本文详细介绍了JavaScript中定时器的应用，包括定时器的基本概念、使用方法以及在时钟、延时提示框、无缝滚动等动态效果中的具体实现。通过实例展示了如何使用setInterval、setTimeout、clearInterval和clearTimeout等函数进行定时操作，并提供了代码实现，帮助开发者理解和掌握JavaScript定时器的高效使用。
定时器：
定时器，当设定的时间间隔达到了，就执行一次某个操作，可以用在凡是动态效果的情景中，
对于setInterval可以在动态效果中运用，重复很多次，除非有终止条件达到,可以使用的场景：时钟，淡入淡出，滚动，悬浮栏等等
对于setTimeout可以在延时的时候运用，当持续多长时间之后才执行某个操作（setTimout(某个操作, 持续多长时间)）
| 格式 |
setInterval(show, 1000) setTimeout(show,1000) |
show是函数，function show() {} 1000是间隔时间 在show里面的动作可以每隔1000毫秒执行一次 setInterval可以执行很多次，除非有终止条件 setTimeout只能执行一次 | |
| 得到一个定时器变量 |
var timer=null; timer=setInterval(function() {}，1000） | ||
| 停止定时器 | clearInterval(timer)
clearTimerout(timer) |
<script type="text/javascript">
window.onload=function ()
{
var oBtn1=document.getElementById('btn1');
var oBtn2=document.getElementById('btn2');
var timer=null;
oBtn1.onclick=function () {
timer=setInterval(function() {
alert('a');
}, 1000);
};
oBtn2.onclick=function() {
clearInterval(timer);
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="begin" />
<input id="btn2" type="button" value="end" />
</body>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
数码时钟：
---效果思路 12:23:06
设置图片路径 -----将str[i]变量和图片名字结合使用<--从Date()对象获得当前时间转化为字符串
charAt方法 -------字符串获得某个字符string.charAt(i) 一般==string[i], 比起后者更具兼容性
---获取系统时间
Date对象 -----var oDate=new Date()
getHours, getMinutes, getSeconds ---返回的都是整数类型 ，可以使用n=''+n转为字符型
getFullYear(), getMonth()+1, getDate(), getDay()+1
---显示系统时间
字符串的连接 +，
空位补零 ---使用if else判断<10， n='0'+n (n=''+n) ---且将整数转为字符型
---定时器的特性：
它被打开后，并不会立即执行，而是等（那个间隔时间）1000毫秒后，才执行，所以
在程序执行中会有一个延迟
setInterval(function() {}, 1000);
更改为： function tick(){}; setInterval(tick,1000); tick() -----> 这样程序在设置为定时器后，会执行tick（）
并且：如果在多个地方使用某个时钟操作，可以将该定时器里面的函数单独拿出来，然后使用setInterval(函数名，时间）来多次调用。
<script type="text/javascript">
function toDou(n)
{
if(n<10)
{
return '0'+n;
}
else
{
return ''+n;
}
}
window.onload=function()
{
var aImg=document.getElementsByTagName('img');
//var str="012321";
function tick() {
var oDate=new 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';
}
};
setInterval(tick,1000);
tick();
};
</script>
</head>
<body style="background:black; color: white; font-size:50px;">
<image src="img/0.png" />
<image src="img/0.png" />
:
<image src="img/0.png" />
<image src="img/0.png" />
:
<image src="img/1.png" />
<image src="img/1.png" />
:
<image src="img/1.png" />
<image src="img/1.png" />
</body>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
延时提示框：
---效果展示：
例如qq头像，鼠标移入，则显示了qq秀； 鼠标移出，则qq秀框消失；当鼠标移出，不应该立即隐藏，而应该延时隐藏，因为如果从qq头像移动到qq秀框，qq秀框应该仍然显示的，
所以这里就该使用定时器，让qq秀框隐藏的行动延时发生。。。
---最初的想法：
移入显示，移出隐藏（但是这样会造成问题，如果想从A移到B的时候，B已经消失了，无法对其进行操作了）
---改进方法：
对其消失的动作，使用延时定时器：setTimeout(消失，500);500毫秒后再隐藏
---简化代码：
合并两个相同的onmouseover和onmouseout
在编写代码时，遇到了问题，需要注意的javascript代码：
0. <style>里面设置左浮动，float:left，则div1，div2 从竖向排列变为横向
1. 需要使用延时定时器进行延时 setTimeout(function(){}, 500)
2.在移入到B时，B还是会消失，原因是因为原来在A里面移出时我们设置了定时器，当时间到了，它仍然会执行隐藏操作，所以此时要clearTimeout(timer)
3. div的display的属性，在<style>标签里面设置才生效 display=none, 不加双引号， 在行间样式里面设置不生效
在代码里面设置的时候oDiv.style.display="none" 要加引号
4. 界面上元素的动态事件跟函数结合 ：1. 在行间样式里面 直接添加属性 <input .... onclick=tick()>
2. 在脚本里面： oBtn1.onclick=functiontick() { } (这里，函数名tick可以省略）
注意：不管是在定时器里面timer=setInterval(function() {}, 500); 函数在事件里面 oBtn1.onclick=function() {}， 函数可以看作是一组操作的集合，做完返回值直接赋值给其他。。
<style>
#div1 {width:209; height: 100; background: red;float:left;margin:20px;display:none; }
#div2 {width:209; height: 100; background: green;float:left;margin: 20px;}
</style>
<script type="text/javascript">
window.onload=function() {
var oDiv2=document.getElementById('div2');
var oDiv1=document.getElementById('div1');
var timer=null;
oDiv1.onmouseout=oDiv2.onmouseout=function() {
timer=setTimeout(function()
{
oDiv1.style.display='none';
}, 500);
};
oDiv1.onmouseover=oDiv2.onmouseover=function() {
clearTimeout(timer);
oDiv1.style.<span style="font-size:10px;">display="block</span>";
};
};
</script>
</head>
<body >
<div id="div2" type="div" ></div>
<div id="div1" type="div"></div>
</body>++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
无缝滚动：
---效果展示：
4 张图片从左往右，从右往左滚动，鼠标移动上去，会暂停，移出，继续滚动
---原理：(div里面ul，ul下4个li放4个图片）
让ul一直往左或者往右移动，当达到一半的时候拉回到原来的位置
---最初方法：
定时器不断增加其left,这样就产生了向右移动的效果：
setInterval(function () {
oUl.style.left=oUl.offsetLeft-2+'px';
},30);
但是这样产生了问题，就是它会一直往左移动，出了它所在div的界限，漏出div的背景色。于是引出下面的方法
---方法：
我们使用两组一样的图片，横向放置在一起，然后当第二组移动到达起点的时候，我们迅速将整个一组图片向右拉回来，恢复最初状态
<---- ||1 2 3 4|| 1 2 3 4 <----- 1 2 3 4 ||1 2 3 4|| <----- ||1 2 3 4|| 1 2 3 4
复制li, innerHTML的使用（我们使用了一模一样两组li列表图片（ul.innerHTML=ul.innerHTML*2)
修改ul的width
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;// using 2 times of 4 pictures
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
滚动过界后，重设位置
判断过界，如果向做移动，判断条件是offsetleft是否<-oUl.offsetWidth/2; 如果向右移动，判断是否>0
改变滚动方向：根据button指示左右，修改speed(正，负），判断过界
if(oUl.offsetLeft < -oUl.offsetWidth/2) <<------1 2 3 4||
1 2 3 4 ||
{
oUl.style.left='0';
}
if(oUl.offsetLeft>0) ||1 2 3 4||
1 2 3 4 ------>>
{
oUl.style.left=-oUl.offsetWidth/2+'px';
}
鼠标移入暂停：移入时关闭定时器，移出重新开启定时器（即调用setInterval())
<span style="font-size:10px;"> <style>
* {margin:0; padding:0;}
#div1 {width:702px; height:108px; margin：100px; position: absolute;background: red; overflow: hidden;}
#div1 ul {position: absolute;left: 0; top: 0;}
#div1 ul li {float: left; width: 178px; height: 108px; list-style: none; }
</style>
<script type="text/javascript">
window.onload=function()
{
var oDiv=document.getElementById('div1');
var oUl=document.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var speed=2;
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;// using 2 times of 4 pictures
oUl.style.width=aLi[0].offsetWidth*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() //stop move
{
clearInterval(timer);
};
oDiv.onmouseout=function() //create the timer again
{
timer=setInterval(move,30);
};
document.getElementsByTagName('a')[0].onclick=function()
{
speed=-2;
}
document.getElementsByTagName('a')[1].onclick=function()
{
speed=2;
}
};
</script>
</head>
<body >
<a href="javascript:;" >move to left</a>
<a href="javascript:;" >move to right</a>
<div id="div1" type="div">
<ul>
<li>img src="img/1.png" /> </li>
<li>img src="img/2.png" /> </li>
<li>img src="img/3.png" /> </li>
<li>img src="img/4.png" /> </li>
</ul>
</div>
</body></span>
1. 在<style>里面给元素设置边距的时候，比如top,left之类的，必须要设定position：absolute才能生效，而margin则不受此限制
2.当多个地方使用同一个定时器操作时，将定时器里面的那段函数操作单独拿出来做一个有名函数，然后setInterval(函数名，time) 多次调用
3.注意定时器的关闭场景，防止时间达到时，原来定时器触发的操作影响其他操作
4.移动操作主要就是根据定时器，元素位置的改变（所以left, top, offsetLeft, offsetWidth这些要掌握好）
5.div属性里面的oveflow:hidden可以将它的孩子只显示在它的范围内。
这一节学到的一些函数即属性：
Date()
getHours, getMinutes, getSeconds
oDate.getFullYear()
getFullYear(), getMonth()+1, getDate(), getDay()+1
string.charAt(i)
setInterval(function() {}, time);
setInterval(funname,time);
setTimeout(...);
clearInterval(...);
clearTimeout(...);
元素.onmouseover=function(){}
onmouseover
onmouseout
onclick
扫一扫
509
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
