1.setInterval
<!DOCTYPE html> <html> <head> <title>json</title> <script type="text/javascript"> function show(){ alert("a"); } //每隔1s执行一次函数 setInterval(show, 1000); </script> </head> <body> </body> </html>
2.setTimeout
<!DOCTYPE html> <html> <head> <title>json</title> <script type="text/javascript"> function show(){ alert("a"); } //1s之后执行该函数且只执行一次 setTimeout(show, 1000); </script> </head> <body> </body> </html>
2.clearInterval
<!DOCTYPE html> <html> <head> <title>json</title> </head> <body> <button type="button" id="open">开启</button> <button type="button" id="close">关闭</button> <script type="text/javascript"> function show(){ alert("a"); } var oBtn1 = document.getElementById('open'); var oBtn2 = document.getElementById('close'); var timer = null; oBtn1.onclick=function (){ timer = setInterval(show, 1000); } oBtn2.onclick = function (){ clearInterval(timer); } </script> </body> </html>
3.演示提示框的实现
<!DOCTYPE html> <html> <head> <title>json</title> <style type="text/css"> #div1{ width: 29px; height: 30px; background-color: red; } #div2{ width: 100px; height: 100px; background-color: blue; margin-left: 50px; display: none; } </style> </head> <body> <div id="div1"></div> <div id="div2"></div> <script type="text/javascript"> var oDiv1 = document.getElementById('div1'); var oDiv2 = document.getElementById('div2'); var timer = null; oDiv1.onmouseover = oDiv2.onmouseover = function (){ clearTimeout(timer); oDiv2.style.display = 'block'; } oDiv1.onmouseout = oDiv2.onmouseout =function (){ timer = setTimeout(function(){ oDiv2.style.display = 'none'; }, 700); } </script> </body> </html>
4.无缝滚动
<!DOCTYPE html> <html> <head> <title>json</title> <style type="text/css"> *{margin: 0;padding: 0} #div1{ height: 108px; margin: 100px auto; /*相对定位的作用是为了让ul能够以包含它的div为参考标准*/ position: relative; overflow: hidden; /*将多余的四张图片遮住*/ } #div1 ul{ position: absolute; left: 0px; top: 0px; } #div1 ul li{ list-style: none; float: left; height: 108px; width: 178px; } </style> </head> <body> <div id="div1"> <ul> <li><img src="img/1.jpg" alt=""></li> <li><img src="img/2.jpg" alt=""></li> <li><img src="img/3.jpg" alt=""></li> <li><img src="img/4.jpg" alt=""></li> </ul> </div> <script type="text/javascript"> var oDiv = document.getElementById('div1'); var oUl = oDiv.getElementsByTagName('ul')[0]; //让4张图片变成8张图片 oUl.innerHTML += oUl.innerHTML; // 给ul设置宽度以防止其父标签宽度太小将图片压下来 oUl.style.width = oUl.offsetWidth + 'px'; //div的宽度设置为ul的一般这样能实现滚动效果 oDiv.style.width = oUl.offsetWidth/2 + 'px'; setInterval(function(){ if(oUl.offsetLeft < - oUl.offsetWidth/2) oUl.style.left = '0px'; oUl.style.left = oUl.offsetLeft - 5 +'px'; }, 50); </script> </body> </html>
