第四节定时器

it2022-05-09 26

开启定时器：

　　setInterval(函数名，时间间隔ms);　　间隔型（每隔一段时间就会执行一次，无限地执行下去）

　　setTimeout(函数名，时间延时ms)　　延时型（开启系统后在“时间延时后”只执行一次）

停止定时器：　　clearInterval()：对应上面setInterval(name, time)　　clearTimeout()：对应上面setTimeout(name, time)　　

　　<script> 　　　　window.onload=function(){ 　　　　　　var oBtn1=document.getElementById('btn1'); 　　　　　　var oBtn2=document.getElementById('btn2'); 　　　　　　var timer=null; 　　　　　　oBtn1.onclick=function () {timer=setInterval(function () {alert('已开启timer定时器！');}, 5000);}; 　　　　　 oBtn2.onclick=function () {clearInterval(timer);alert('已关闭timer定时器！')}; 　　　　}; 　　</script> 　　<button id="btn1">开启定时器</button> 　　<button id="btn2">关闭定时器</button>

应用举例：数码时钟

　　获取系统时间：Date对象；　　　　getHours、getMinutes、getSeconds

　　显示系统时间：字符串连接，空位补零——如下面toDou(n)函数的定义；　　　　

　　设置图片路径：

　　　　charAt()方法：用于解决兼容性问题，由于低版本浏览器的不兼容性，“str[i]”不会取出字符串中相应字符，所以我们要用“str.charAt(i)”任何浏览器都兼容　　

　　<script> 　　　　function toDou(n){ //转换为两位字符串“051213” 　　　　　　if (n < 10) {return '0'+n} 　　　　　　else {return ''+n;} 　　　　} 　　　　window.onload=function(){ 　　　　　　var aImg=document.getElementsByTagName("img"); 　　　　　　function tick() { 　　　　　　　　var oDate = new Date();　　//Date对象　　　　　　　　var str = toDou(oDate.getHours()) + toDou(oDate.getMinutes()) + toDou(oDate.getSeconds()); 　　　　　　　　for (var i = 0; i < aImg.length; i++) { 　　　　　　　　　　aImg[i].src = 'img/' + str.charAt(i) + '.png'; 　　　　　　　　} 　　　　　　} 　　　　　　//由于刚打开页面时，会有一秒“00:00:00”延迟才会显示正确系统时间，为了去掉延时，操作如下　　　　　　setInterval(tick, 1000); 　　　　　　tick(); //原理就是，上面语句延时时，词句已调用函数　　　　}; 　　</script> 　　<div id="div1"> 　　　　<img src="img/0.png"/> 　　　　<img src="img/0.png"/>: 　　　　<img src="img/0.png"/> 　　　　<img src="img/0.png"/>: 　　　　<img src="img/0.png"/> 　　　　<img src="img/0.png"/> 　　</div> 　　<style>#div1{background: black;color: white;font-size: 100px;text-align: center;}</style>

Date对象其他方法

　　年getFullYear()：获得系统年份

　　月getMouth()：获得系统月份，注意系统月份是从“0~11”

　　日getDate()：获得系统日期

　　周getDay()：0表示周日，1表示周一，依次类推……

延时提示框：　　

　　<style> 　　　　div{float: left;margin: 10px;} 　　　　#div1{width: 50px;height: 50px;background: red;} 　　　　#div2{width: 250px;height: 250px;background: #ccc;display: none;} 　　</style> 　　<script> 　　　　window.onload=function(){ 　　　　　　var oDiv1=document.getElementById('div1'); 　　　　　　var oDiv2=document.getElementById('div2'); 　　　　　　oDiv1.onmouseover=function () { 　　　　　　　　clearTimeout(timer); //解决加入下半部分代码后div2闪现的问题　　　　　　　　oDiv2.style.display='block'; 　　　　　　}; 　　　　　　oDiv1.onmouseout=function () { 　　　　　　　　timer=setTimeout(function () { 　　　　　　　　oDiv2.style.display='none'; 　　　　　　　　}, 500); 　　　　　　}; 　　　　　　//上述代码已经可以了，但是问题是移入div2后经过500msdiv2依然消失了　　　　　　oDiv2.onmouseover=function () { 　　　　　　　　clearTimeout(timer); 　　　　　　}; 　　　　　　oDiv2.onmouseout=function () { 　　　　　　　　timer=setTimeout(function () { 　　　　　　　　　　oDiv2.style.display='none'; 　　　　　　　　}, 500); 　　　　　　}; 　　　　}; 　　</script> 　　<div id="div1"></div> 　　<div id="div2"></div>

　　原来的方法

　　　　移入显示、移出隐藏

　　移出延时隐藏

　　　　一如下面的Div后，还是隐藏了

　　简化代码：

　　　　合并两个相同的 mouseover 和 mouseout　　　　

　　　　<script> 　　　　　　window.onload=function(){ 　　　　　　　　var oDiv1=document.getElementById('div1'); 　　　　　　　　var oDiv2=document.getElementById('div2'); 　　　　　　　　var timer=null; 　　　　　　　　oDiv2.onmouseover=oDiv1.onmouseover=function () { 　　　　　　　　　　clearTimeout(timer); 　　　　　　　　　　oDiv2.style.display='block'; 　　　　　　　　}; 　　　　　　　　oDiv2.onmouseout=oDiv1.onmouseout=function () { 　　　　　　　　　　timer=setTimeout(function () { 　　　　　　　　　　　　oDiv2.style.display='none'; 　　　　　　　　　　}, 500); 　　　　　　　　}; 　　　　　　}; 　　　　</script>

无缝滚动（图片自动轮播）——基础

　　物体运动基础

　　　　让Div移动起来

　　　　offsetLeft的作用：获取物体左边距，是一个数字，而且它可以综合考虑所有影响该物体位置的因素之后，计算出物体的“总左边距”，同理与此相对应还有offsetTop，以及offsetWidth、offsetHeight

　　　　用定时器让物体连续移动

　　效果原理

　　　　让 ul 一直向左移动

　　复制 li

　　　　innerHTML 和 +=

　　　　修改 ul 的 width

　　滚动过界后，重设位置

　　　　判断过界

无缝滚动——扩展

　　改变滚动方向：修改speed、修改判断条件

　　鼠标移入暂停：移入关闭定时器、移出重新开启定时器

代码展示：

转载于:https://www.cnblogs.com/han-bky/p/10072002.html

相关资源：数据结构—成绩单生成器

专利

最新回复(0)

第四节 定时器

专利

第四节定时器