L6-js定时器的应用

Posted 2020-06-27

今天我们来说说定时器，其实定时器在很多程序中是很常用的，比如我们看到的一些网站上的滚动图片，鼠标移动到QQ头像上的效果，还有网站上时间表等等。接下来我们就围绕这三个定时器的经典应用来了解定时器。

首先，我们讲到的是如果开启定时器

　　setInterval　　间隔型，应用：无缝滚动、网站时钟

　　setTimeout　　延时型，应用：QQ头像应用

停止定时器

　　clearInterval

　　clearTimeout

两种定时器的区别：

　　简单的说，setInterval会在设定的时间自动重复，setTimeout不会重复而具有延时性

接下来，就是我们的应用：

1、数码时钟

效果思路

　　获取系统时间

　　　　Date对象

　　　　getHours、getMinutes、getSeconds

　　显示系统时间

　　　　字符串连接

　　　　空位补零

　　设置图片

　　　　charAt方法 　　// 　　能解决兼容性问题

 

html

　　<img scr = "img/1.png"/><img src = "img/2.png"/>:<img src = "img/3.png"/><img src = "img/4.png"/>:<img src = "img/5.png"/><img src = "img/6.png"/>

js

function toDou(num){　　//　　空位补零函数

　　if(num<10){

　　　　return "0" + num;

　　}

　　else{

　　　　return "" + num;

　　}

}

window.onload = function(){

var aImg = document.getElementsByTagName(‘img‘);

function tick = function(){

//  获取系统时间

var oDate = new Date();

//  字符串连接

var oTime = toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds())

for(var i = 0; i < aImg.length; i++){

　　//　设置图片

　　aImg[i] .src = "img/"+oTime[i]+"png";

　　}

　　}

setInterval(tick,1000);　　//　　1000ms = 1s

tick();　　//　　防止页面刷新时，显示 00:00:00

}

2、延时提示框

效果思路

　　原来方法

　　　　移入显示，移除隐藏

　　移出延时隐藏

　　　　移入下面的Div后，还是隐藏了

　　简化代码

　　　　合并两个相同的onmouseover和onmouseout

html

<div id = "Icon" style = "width:50px; height:50px; background:green; float:left; margin-right:20px;"></div>

<div id="Icondetail" style = "width:200px; height:150px; background:#ccc; float:left; display:none" ></div>

js

var oDiv1 = document.getElementById("Icon");

var oDiv2 = document.getElementById("Icondetails");

var timer = null;

oDiv2.onmouseover = oDiv1.onmouseover = functiton(){

　　clearTimerout(timer);

　　oDiv2.style.display = ‘block‘;

}

oDiv2.onmouseout =oDiv1.onmouseout = function(){

　　timer = setTimeout(function(){

　　　　oDiv2.style.display = ‘none‘;

　　},500);

}

3、无缝滚动——基础

效果思路

　　物体运动基础

　　让Div移动起来

　　offsetLeft的作用

　　用定时器让物体连续移动

 

<div id= "div1" style = "width:200px; height:200px; background:red"></div>

js

var oDiv = document.geElementById("div1");

setInterval(function(){

　　oDiv.style.left = oDiv.offsetLeft + 2 + "px";

},30);

 

效果原理

　　让ul一直向左移动

　　复制li

　　　　innerHTML 和 +=

　　修改ul的width

　　滚动过界后，重设位置（判断过界）

扩展

　　改变滚动方向

　　　　修改speed

　　　　修改判断条件

　　鼠标移入暂停

　　　　移入关闭定时器

　　　　移除重新设置定时器

<div id = "div1" >

　　<ul>

<li><img src = "img/1.jpg"/></li>

<li><img src = "img/2.jpg"/></li>

<li><img src = "img/3.jpg"/></li>

<li><img src = "img/4.jpg"/></li>

　　</ul>

</div>

<a href = "javascript:;">向左走</a>

<a href = "javascript:;">向右走</a>

*{margin:0; padding:0;}

#div1 {width:718px; height:108px; border:1px solid #000; position:relative; overfloat:hidden;}　

#div1 ul { position:absolute; top:0; left:0}

#div1 ul li{width:178px; height:108px; list-style:none;}

 

var oDiv = document.getElementById("div1");

var oUl = oDiv.getElementsByTagName("ul");

var aLi = oUl.getElementsByTagName("li");

var speed= null;

//复制li

oUl.innerHTML += oUl.innerHTML;

//修改ul的width

oUl.style.width = aLi[0].width * aLi.length + "px";

function move(){

if(oUl.offsetLeft<- oUl.offsetWidth/2){

　　oUl.style.left = "0";

}

if(oUl.offsetLeft>0){

　　oUl.style.left = - oUl.offsetWidth/2 + "px";

}

oUl.style.left = oUl.offsetLeft - speed + "px";

}

var timer = setInterval(move,30);

扩展：

//鼠标移入暂停，移出移动

oDiv.onmouseover = function(){

　　clearInterval(timer);

}

oDiv.onmouseout = function(){

　　setInterval(move,30);

}

//改变滚动方向

document.getElementsByTagName("a")[0].onclick = function(){

　　speed = -2; 　　//　　向左移动

}

document.getElementsByTagName("a")[1].onclick = function(){

　　speed = 2; 　　//　　向右移动

}

 

总结：主要是两个定时器的开启和关闭的应用。同时，还讲到的offsetLeft获取对象的左边距（包含margin-left）；还有在写程序中主要变量的使用，运用变量来处理一些需要变的东西，比如这里应用到的speed来控制的方向；兼容性问题：charAt()方法：返回指定位置的字符。