1. Progress bar
<! doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css" >
#box{
width: 200px;
height: 30px;
border: 1px solid black;
}
#jinDuBox{
width: 0px;
height: 100%;
background-color: skyblue;
text-align: center;
}
</style>
</head>
<body style="height: 1000px">
<div id="box">
<div id="jinDuBox">
</div>
</div>
<input type="button" value="Leave you" onclick="testf()" />
</body>
</html>
<script type="text/javascript">
var width =0; // Save the current width
function testf(){
var myTimer = setInterval(function(){
width+=2;
if(width>=200){
width = 200;
window.clearInterval(myTimer);
}
$("jinDuBox").style.width = width+"px";
$("jinDuBox").innerHTML = parseInt(width/200*100) +"%";
},100);
}
function $(id){
return document.getElementById(id);
}
</script>
Copy the code
2, addition, subtraction, multiplication and division calculator
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /*#num1*/ </style> </head> <body> <input type="text" id="num1" > <select id="oper" > <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> <option value="%">%</option> </select> <input type="text" id="num2" > <input type="button" value=" = " onclick="testf()" /> <input type="text" id="num3" > </body> </html> <script Var num1 = Number(document.getelementbyId ("num1").value); var num1 = Number(document.getelementbyId ("num1").value); //12 var num2 = Number(document.getElementById("num2").value); //23 var oper = document.getElementById("oper").value; Var result; switch(oper){ case "+":result = num1+num2; break; case "-":result = num1-num2; break; case "*":result = num1*num2; break; case "/":if(num2! =0){ result = num1/num2; }else{result = "0"; } break; case "%":if(num2! =0){ result = num1%num2; }else{result = "0"; } break; default:; Document.getelementbyid ("num3"). Value = result; } </script>Copy the code
3. Random N-bit verification code
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=`, <meta HTTP-equiv =" x-UA-compatible "content=" IE =edge"> <title>Document</title> </head> <body> <input </span> <input type="button" value=" verification code "onclick="testf()" />< /body> </ HTML >< script src="js/tools.js"></script> <script> function testf(){ // var str=""; // for(var i=0; i<4; i++){ // str += parseInt(Math.random()*10); // } // document.getElementById("ma").innerHTML = str; document.getElementById("ma").innerHTML = getMa(4); } </script>Copy the code4, sensitive word filtering
<! DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">* {margin: 0;
padding: 0;
}
#sourceImgBox01{
position: relative;
width: 300px;
height: 300px;
background-image: url(img/2.jpg);
background-size: cover;
}
#sourceImgBox02{
position: relative;
width: 200px;
height: 300px;
background-image: url(img/3.jpg);
background-size: cover;
}
</style>
</head>
<body>Please input your thoughts:<input id="textId" type="text" onblur="filterMinGan()" />
</body>
</html>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
// (replace sensitive words in user input with *).html
function filterMinGan(){
// get user input
var str = $("textId").value;
/ / 2, filtering
var arr=["sb"."eb"."nnd"];
for(var i in arr){
while(str.indexOf(arr[i])>-1){
str = str.replace(arr[i],"*"); }}/ / 3, the output
$("textId").value = str;
}
</script>
Copy the code5, do not repeat speech, and filter sensitive words
<! DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">* {margin: 0;
padding: 0;
}
#sourceImgBox01{
position: relative;
width: 300px;
height: 300px;
background-image: url(img/2.jpg);
background-size: cover;
}
#sourceImgBox02{
position: relative;
width: 200px;
height: 300px;
background-image: url(img/3.jpg);
background-size: cover;
}
</style>
</head>
<body>
<textarea id="allmessage">
</textarea><br/>Please input your thoughts:<input id="textId" type="text" onblur="filterMinGan()" /><br/>
</body>
</html>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
// Message filtering. (Do not repeat speech and contain sensitive words)
// Save all conversations to array
var arrmessages=[];//
function filterMinGan(){
// get user input
var str = $("textId").value;
/ / 2, filtering
//1) Sensitive filtering
var arr=["sb"."eb"."nnd"];
for(var i in arr){
if(str.indexOf(arr[i])>-1) {//str = str.replace(arr[i],"*");
alert("Dear, please speak well!");
return; }}//2)
if(arrmessages.indexOf(str)>-1){
alert("Honey, don't repeat yourself!");
return;
}
/ / 3, the output
arrmessages.push(str);
$("allmessage").value += str+"\n";
}
</script>
Copy the code6, a stopwatch
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, <meta HTTP-equiv =" x-UA-compatible "content=" IE =edge"> <title>Document</title> </head> <body> <input id="hours" type="text" value="00" >: <input id="minutes" type="text" value="00">: <input id="seconds" type="text" value="00"> <input type="button" value=" start "onclick="begin()" /> <input type="button" Onclick ="button" value=" stop()" /> <input id="result" type="text" > </body> </ HTML > <script> //setInterval(callback function, milliseconds); Executes the callback function every specified number of milliseconds. This function returns a timer number //clearInterval(timer number). Clear the specified timer. var seconds = 0; Var minutes = 0; var hours = 0; var myTimer=0; function begin(){ if(myTimer>0){ return; } myTimer=setInterval(function(){ seconds++; If (seconds>=60){// Benign redundancy seconds=0; minutes++; if(minutes>=60){ minutes=0; hours++; } } document.getElementById("seconds").value = seconds<10?" 0"+seconds:seconds; document.getElementById("minutes").value = minutes<10?" 0"+minutes:minutes; document.getElementById("hours").value = hours<10?" 0"+hours:hours; }, 1000); console.log(myTimer); } function pause(){ clearInterval(myTimer); myTimer = 0; } function addZero(num){ return num<10?" 0"+num:num; } function stop(){ pause(); document.getElementById("result").value = addZero(hours)+":"+addZero(minutes)+":"+addZero(seconds); seconds=0; minutes=0; hours=0; document.getElementById("seconds").value = addZero(seconds); document.getElementById("minutes").value =addZero(minutes); document.getElementById("hours").value = addZero(hours); } </script>Copy the code7, interlaced discoloration
<! doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css" > </style> </head> <body style="height: 1000 px "> < ul id =" box "> < li > the first line < / li > < li > the second line < / li > < li > the third row < / li > < li > the fourth row < / li > < li > line 5 < / li > < / ul > < input type =" button" /> </body> </ HTML > <script type="text/javascript"> function testf(){var liDoms = $("box").children; for(var i=0; i<liDoms.length; i++){ if(i%2==0){ liDoms[i].style.backgroundColor = "pink"; }else{ liDoms[i].style.backgroundColor = "orange"; } } } function $(id){ return document.getElementById(id); } </script>Copy the code8. Drag and drop blocks
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #box{ height: 100px; width: 100px; position: absolute; background: skyblue; left: 200px; top:200px; /* cursor: move; */ } </style> </head> <body> <div id="box"> </div> </body> </html> <script> var oBox = document.querySelector("#box"); oBox.onmousedown = function(evt){ var e = evt || event; var offSetX = e.offsetX; var offSetY = e.offsetY; document.onmousemove = function(evt){ var e = evt || event; var x = e.pageX - offSetX; var y = e.pageY - offSetY; if(x<0){ x = 0; } var maxLeft = window.innerWidth - oBox.offsetWidth; if(x>maxLeft){ x = maxLeft; } if(y<0){ y = 0; } var maxTop = window.innerHeight - oBox.offsetHeight; if(y>maxTop){ y = maxTop; } oBox.style.left = x + "px"; oBox.style.top = y + "px"; } document.onmouseup = function(){ document.onmousemove = null; } } </script>Copy the code9. Click to change color
<! DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
<script>
let oUl = document.querySelector("ul");
oUl.onclick = function (evt) {
// Event delegate does not allow this
//this.style.backgroundColor = "yellow";
var e = evt || event;
// But the actual operation is Li
// You need to get it from the event source
// The event source is the actual operation element itself
var targat = e.target || e.srcElement;
//tagName click the tagName of the event source. The default return value is uppercase
if (targat.tagName == "LI") {
targat.style.backgroundColor = "yellow"; }}</script>
Copy the code
10. Pop-up dialog box
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#box{
width: 300px;
height:400px;
background: chartreuse;
position: absolute;
display: none;
}
</style>
</head>
<body>
<input type="button" value="Login" id="but">
<div id="box"></div>
</body>
</html>
<script src="Popup.js"></script>
<script>
let oBox = document.getElementById("box");
let oButs = document.getElementById("but");
let s = new Tan(oBox);
oButs.onclick = function(){
s.She();
// s.tian();
s.onclick();
}
</script>
Copy the codeclass Tan{
constructor(newbox){
this.box = newbox;
this.but = null;// Use this method to implement the singleton pattern
}
// Set the pop-up location
She(){
this.box.style.display = "block";
// The offsetWidth display must be set to block
this.box.style.left = window.innerWidth/2 - this.box.offsetWidth/2 + 'px';
this.box.style.top = window.innerHeight/2- this.box.offsetHeight/2 + 'px';
// Call the newly created button
this.tian();
}
// Add button
tian(){
this.but = document.createElement("button");
this.but.innerHTML="X";
this.but.style.height = 20 + 'px';
this.but.style.width = 30 + 'px';
this.box.appendChild(this.but);
this.box.style.display = "block";
this.but.style.position = "absolute";
this.but.style.left = this.box.offsetWidth - this.but.offsetWidth + 'px';//
}
// Click hide display to make it hide first
onclick(){
let that = this;
this.but.onclick = function(){
that.box.style.display = "none"; }}}Copy the code
11. Ads followed on both sides
<! DOCTYPE html><html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
img{
position: absolute;
left:0;
top:50px;
}
#demo{
width:1000px;
margin:0 auto;
}
</style>
</head>
<body>
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5f2434f858ad43c79964a5373c7eb1ad~tplv-k3u1fbpfcp-zoom-1.image" alt="" id="pic"/>
<div id="demo">
<p>The king of Heaven covers tiger, chicken stews mushroom</p>
<p>The king of Heaven covers tiger, chicken stews mushroom</p>
<p>The king of Heaven covers tiger, chicken stews mushroom</p>
<p>The king of Heaven covers tiger, chicken stews mushroom</p>
<p>The king of Heaven covers tiger, chicken stews mushroom</p>
<p>The king of Heaven covers tiger, chicken stews mushroom</p>
<p>The king of Heaven covers tiger, chicken stews mushroom</p>
<p>The king of Heaven covers tiger, chicken stews mushroom</p>
<p>The king of Heaven covers tiger, chicken stews mushroom</p>
<p>The king of Heaven covers tiger, chicken stews mushroom</p>
<p>The king of Heaven covers tiger, chicken stews mushroom</p>
<p>The king of Heaven covers tiger, chicken stews mushroom</p>
<p>The king of Heaven covers tiger, chicken stews mushroom</p>
<p>The king of Heaven covers tiger, chicken stews mushroom</p>
<p>The king of Heaven covers tiger, chicken stews mushroom</p>
<p>The king of Heaven covers tiger, chicken stews mushroom</p>
<p>The king of Heaven covers tiger, chicken stews mushroom</p>
<p>The king of Heaven covers tiger, chicken stews mushroom</p>
<p>The king of Heaven covers tiger, chicken stews mushroom</p>
<p>The king of Heaven covers tiger, chicken stews mushroom</p>
<p>The king of Heaven covers tiger, chicken stews mushroom</p>
<p>The king of Heaven covers tiger, chicken stews mushroom</p>
<p>The king of Heaven covers tiger, chicken stews mushroom</p>
<p>The king of Heaven covers tiger, chicken stews mushroom</p>
<p>The king of Heaven covers tiger, chicken stews mushroom</p>
<p>The king of Heaven covers tiger, chicken stews mushroom</p>
<p>The king of Heaven covers tiger, chicken stews mushroom</p>
<p>The king of Heaven covers tiger, chicken stews mushroom</p>
<p>The king of Heaven covers tiger, chicken stews mushroom</p>
<p>The king of Heaven covers tiger, chicken stews mushroom</p>
<p>The king of Heaven covers tiger, chicken stews mushroom</p>
<p>The king of Heaven covers tiger, chicken stews mushroom</p>
<p>The king of Heaven covers tiger, chicken stews mushroom</p>
<p>The king of Heaven covers tiger, chicken stews mushroom</p>
<p>The king of Heaven covers tiger, chicken stews mushroom</p>
<p>The king of Heaven covers tiger, chicken stews mushroom</p>
</div>
</body>
</html>
<script type="text/javascript">
var oPic = document.querySelector("#pic");
window.onscroll = function(){
// Get how far the page rolls
var sTop = document.documentElement.scrollTop || document.body.scrollTop;
startMove( oPic , 50 + sTop );
}
var timer = null;
function startMove(obj,target){
clearInterval(timer);
timer = setInterval(function(){
// Buffer motion principle
var speed = (target-obj.offsetTop)/10;
speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
if( obj.offsetTop == Math.floor(target) ){
clearInterval( timer );
}else{
obj.style.top = obj.offsetTop + speed + "px"; }},30)}</script>
Copy the code