javascript之定时器的使用
一:什么是定时器
(一)无限循环定时器
<script> window.onload = function(){ function test(){ alert("test") } // 无限循环的执行函数test,间隔时间为2秒 setInterval(test,2000); } </script>
(二)不循环执行定时器
<script> window.onload = function(){ function test(){ alert("test") } // 2秒后,执行test函数,只执行一次 setTimeout(test,2000); } </script>
(三)开关定时器
<!DOCTYPE html> <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>定时器</title> <script> window.onload = function(){ var oBtn1 = document.getElementById("btn1"); var oBtn2 = document.getElementById("btn2"); // 控制匿名函数 var timer = null; oBtn1.onclick = function(){ timer = setInterval(function(){ alert("haha"); },3000) } oBtn2.onclick = function(){ clearInterval(timer); } } </script> </head> <body> <input type="button" id="btn1" value="开启"> <input type="button" id="btn2" value="关闭"> </body> </html>
数码时钟
# 自己思路的代码
<!DOCTYPE html>
<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>数字时钟</title>
<style>
body{
font-size: 150px;
background:gray;
}
img{
width: 100px;
height: 100px;
}
</style>
<script>
window.onload = function(){
var oData = new Date();
var h = oData.getHours().toString();
var m = oData.getMinutes().toString();
var s = oData.getSeconds().toString();
var oImg = document.getElementsByTagName("img")
function set(){
oImg[0].src = "pic/数字" + h[0] + ".png"
oImg[1].src = "pic/数字" + h[1] + ".png"
if(h.length==1){
oImg[0].src = "pic/数字0" + ".png"
oImg[1].src = "pic/数字" + h[0] + ".png"
}else{
}
oImg[0].src = "pic/数字" + h[0] + ".png"
oImg[1].src = "pic/数字" + h[1] + ".png"
if(m.length==1){
oImg[2].src = "pic/数字0" + ".png"
oImg[3].src = "pic/数字" + m[0] + ".png"
}else{
oImg[2].src = "pic/数字" + m[0] + ".png"
oImg[3].src = "pic/数字" + m[1] + ".png"
}
if(s.length==1){
oImg[4].src = "pic/数字0"+".png"
oImg[5].src = "pic/数字" + s[0]+".png"
}else{
oImg[4].src = "pic/数字" + s[0] + ".png"
oImg[5].src = "pic/数字" + s[1] + ".png"
}
}
set();
}
setInterval(window.onload,1000);
</script>
</head>
<body>
<img src="" alt="">
<img src="" alt="">
:
<img src="" alt="">
<img src="" alt="">
:
<img src="" alt="">
<img src="" alt="">
</body>
</html>
![](https://img2018.cnblogs.com/common/1749518/201912/1749518-20191221225532635-22317387.png)
网上的做法
<!DOCTYPE html> <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>数字时钟</title> <style> body{ font-size: 150px; background:gray; } img{ width: 100px; height: 100px; } </style> <script> function toDoule(n){ if(n<10){ return "0" + n # 字符串和数字相加,会先将数字变成字符串,然后进行拼接 }else{ return "" + n } } window.onload = function(){ var oImg = document.getElementsByTagName("img"); function clock (){ var oData = new Date(); var toStr = toDoule(oData.getHours()) + toDoule(oData.getMinutes()) + toDoule(oData.getSeconds()); for(var i=0; i<oImg.length;i++){ oImg[i].src = "pic/数字" + toStr[i] + ".png" } } setInterval(clock,1000); // 这里调用,是为了一秒钟的延迟 clock(); } </script> </head> <body> <img src="" alt=""> <img src="" alt=""> : <img src="" alt=""> <img src="" alt=""> : <img src="" alt=""> <img src="" alt=""> </body> </html>
潜在问题:ie7不支持 str[0] 这种写法取字符串的元素,因此要改成 str.chaAt(0) 解决兼容性问题
其他关于 Data的知识点
<script> var oData = new Date(); // 获取几号 alert(oData.getDate()); // 0代表周日,国外从周日开始算 alert(oData.getDay()); // 获取年份s alert(oData.getFullYear()); // 月份从0开始 alert(oData.getMonth()+1); </script>
延时消失的提示框案例
自己思路
<!DOCTYPE html> <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>延时提示框</title> <style> #div1{ width: 200px; height: 200px; background-color: red; } #div2{ width: 200px; height: 200px; background-color:greenyellow; display: none; } </style> <script> window.onload = function(){ var oDiv1 = document.getElementById("div1") var oDiv2 = document.getElementById("div2") function tools(){ oDiv2.style.display = "none"; } oDiv1.onmouseover = function(){ oDiv2.style.display = "block"; } oDiv1.onmouseout = function(){ setTimeout(tools,2000); } } </script> </head> <body> <div id="div1"></div> <div id="div2"></div> </body> </html>
网上做法:
<!DOCTYPE html> <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>延时提示框</title> <style> #div1{ width: 200px; height: 200px; background-color: red; } #div2{ width: 200px; height: 200px; background-color:greenyellow; display: none; } </style> <script> window.onload = function(){ var oDiv1 = document.getElementById("div1") var oDiv2 = document.getElementById("div2") // 用来存储定时器 var timer = null; function tools(){ oDiv2.style.display = "none"; }; oDiv1.onmouseover = function(){ clearTimeout(timer); oDiv2.style.display = "block"; }; oDiv1.onmouseout = function(){ // 如果要清除定时器,这里最好有一个变量接收定时器对象 timer = setTimeout(tools,2000); }; oDiv2.onmouseover = function(){ // clearTimeout(tools) // 这里要清除的是定时器的对象,而不是函数 clearTimeout(timer); }; oDiv2.onmouseout = function(){ timer = setTimeout(tools,500); } } </script> </head> <body> <div id="div1"></div> <div id="div2"></div> </body> </html>
无缝滚动案例
原理:修改left的值
<!DOCTYPE html> <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>无缝滚动</title> <style> #div1{ width: 200px; height: 200px; background-color: red; position: absolute; left: 0; top: 20px; } </style> <script> window.onload = function(){ var oDiv = document.getElementById("div1"); setInterval(function(){ // offsetLeft不仅仅不考虑left,还考虑margin oDiv.style.left = oDiv.offsetLeft + 10 + "px"; },200) } </script> </head> <body> <div id="div1"></div> </body> </html>
缺点是:会一直往右移动,不会再回来
一个方向循环滚动,鼠标悬停暂停滚动,移出继续滚动
缺点:只能往一个方向滚动
<!DOCTYPE html> <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>div中图片问题</title> <style> #div1 { border: 1px solid red; width: 1400px; height: 200px; position: relative; left: 50px;
overflow:hidden; # 超出部分隐藏
} #div1 li{ float: left; list-style: none; width: 200px; height: 200px; } #div1 ul{ margin: 0; height: 200px; padding: 0; position: absolute; left: 0; top: 0; } </style> <script> window.onload = function(){ var oDiv = document.getElementById("div1"); var oUl = document.getElementById("ul1"); var aLi = oUl.getElementsByTagName("li"); var timer = null; // 这里很亮点,直接拼接两份 oUl.innerHTML = oUl.innerHTML + oUl.innerHTML oUl.style.width = aLi[0].offsetWidth * aLi.length + "px" timer = setInterval(function(){ oUl.style.left = oUl.offsetLeft -2 + "px"; if(oUl.offsetLeft < -oUl.offsetWidth/2){ oUl.style.left = 0 + "px"; } },30) // 鼠标悬停上去,停止滚动 oDiv.onmousemove = function(){ clearInterval(timer); } // 鼠标移开,又开始滑动 oDiv.onmouseout = function(){ timer = setInterval(function(){ oUl.style.left = oUl.offsetLeft -2 + "px"; if(oUl.offsetLeft < -oUl.offsetWidth/2){ oUl.style.left = 0 + "px"; } },30) } } </script> </head> <body> <div id="div1"> <ul id="ul1"> <li><img src="pic/美女1.jpg" alt=""></li> <li><img src="pic/美女2.jpg" alt=""></li> <li><img src="pic/美女3.jpg" alt=""></li> <li><img src="pic/美女4.jpg" alt=""></li> <li><img src="pic/美女5.jpg" alt=""></li> <li><img src="pic/美女6.jpg" alt=""></li> <li><img src="pic/美女7.jpg" alt=""></li> </ul> </div> <a href="#">左</a> <a href="#">右</a> </body> </html>
无缝滚动,增加向左,向右按钮
<!DOCTYPE html> <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>div中图片问题</title> <style> #div1 { border: 1px solid red; width: 1400px; height: 200px; position: relative; left: 50px; /* 超出的隐藏 */ overflow: hidden; } #div1 li{ float: left; list-style: none; width: 200px; height: 200px; } #div1 ul{ margin: 0; height: 200px; padding: 0; position: absolute; left: 0; top: 0; } </style> <script> window.onload = function(){ var oDiv = document.getElementById("div1"); var oUl = document.getElementById("ul1"); var aLi = oUl.getElementsByTagName("li"); var timer = null; var speed = 3; // 这里很亮点,直接拼接两份 oUl.innerHTML = oUl.innerHTML + oUl.innerHTML oUl.style.width = aLi[0].offsetWidth * aLi.length + "px" var oArr = document.getElementsByTagName("a") timer = setInterval(function(){ oUl.style.left = oUl.offsetLeft + speed + "px"; if(oUl.offsetLeft < -oUl.offsetWidth/2){ oUl.style.left = 0 + "px"; } if(oUl.offsetLeft > 0){ oUl.style.left = -oUl.offsetWidth/2 + "px"; } },30) // 鼠标悬停上去,停止滚动 oDiv.onmousemove = function(){ clearInterval(timer); } // 鼠标移开,又开始滑动 oDiv.onmouseout = function(){ timer = setInterval(function(){ oUl.style.left = oUl.offsetLeft + speed + "px"; if(oUl.offsetLeft < -oUl.offsetWidth/2){ oUl.style.left = 0 + "px"; } if(oUl.offsetLeft > 0){ oUl.style.left = -oUl.offsetWidth/2 + "px"; } },30) } oArr[0].onclick = function(){ speed = -3 } oArr[1].onclick = function(){ speed = 3 } } </script> </head> <body> <div id="div1"> <ul id="ul1"> <li><img src="pic/美女1.jpg" alt=""></li> <li><img src="pic/美女2.jpg" alt=""></li> <li><img src="pic/美女3.jpg" alt=""></li> <li><img src="pic/美女4.jpg" alt=""></li> <li><img src="pic/美女5.jpg" alt=""></li> <li><img src="pic/美女6.jpg" alt=""></li> <li><img src="pic/美女7.jpg" alt=""></li> </ul> </div> <a href="#">左</a> <a href="#">右</a> </body> </html>
# TODO