JS定时器的用法及示例
目录
js 定时器的四个方法
示例一
示例二
示例三
js 定时器的四个方法
- setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
- setTimeout() ：在指定的毫秒数后调用函数或计算表达式。
- clearTimeout(timer)：取消由setTimeout()设置的定时操作。
- clearInterval(timer)：取消由setInterval()设置的定时操作。
setInterval()与clearInterval(timer)
语法
setInterval(code,millisec,lang)
| 参数 | 描述 |
|---|---|
| code | 必需。要调用的函数或要执行的代码串。 |
| millisec | 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。 |
| lang | 可选。 JScript | VBScript | JavaScript |
以下实例在每 1000 毫秒执行 clock() 函数。实例中也包含了停止执行的按钮:
<html> <body><input type="text" id="clock" /> <script type="text/javascript"> var int=self.setInterval("clock()",1000); function clock() { var d=new Date(); var t=d.toLocaleTimeString(); document.getElementById("clock").value=t; } </script><button οnclick="int=window.clearInterval(int)">停止</button></body> </html>
setTimeout()与clearTimeout（）
语法
setTimeout(code,millisec,lang)
| 参数 | 描述 |
|---|---|
| code | 必需。要调用的函数后要执行的 JavaScript 代码串。 |
| millisec | 必需。在执行代码前需等待的毫秒数。 |
| lang | 可选。脚本语言可以是：JScript | VBScript | JavaScript |
实例演示如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body><p>点击按钮，在等待 3 秒后弹出 "Hello"。</p> <button οnclick="myFunction()">点我</button><script> function myFunction() {setTimeout(function(){alert("Hello")},3000); } </script></body> </html>
示例一
示例一我们将用定时器做一个鼠标点击定向移动div的demo。
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin:0;padding: 0;}#box{position:absolute;left: 0;height:100px;width:100px;background:#000;}#bt{position: absolute;top:110px;}</style><script type="text/javascript">window.onload=function(){var bt=document.getElementById("bt");var box=document.getElementById("box");var timer;bt.onclick=function(){//关闭上一次定时器 clearInterval(timer);//开启一个定时器 timer=setInterval(function(){var oldvalue=parseInt(getStyle(box,"left"));var newvalue=oldvalue+10;if(newvalue>800){newvalue=800;}box.style.left=newvalue+"px";//当元素到达800关闭定时器if(newvalue===800)clearTimeout(timer);},30);};};function getStyle(obj,name){if(window.getComputedStyle){return getComputedStyle(obj,null)[name];}else{return obj.currentStyle[name];}};</script></head><body><div id="box"></div><button id="bt">开始</button></body> </html>
示例二
示例一我们将用定时器做一个鼠标点击可以左右移动div的demo。
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin:0;padding: 0;}#box{position:absolute;left: 0;height:100px;width:100px;background:#000;}#bt{position: absolute;top:110px;}#bt1{position:absolute;top:110px;left:50px;}</style><script type="text/javascript">window.onload=function(){var bt=document.getElementById("bt");var bt1=document.getElementById("bt1");var box=document.getElementById("box");var timer;bt.onclick=function(){move(box,10,800);};bt1.onclick=function(){move(box,10,0);};//动画函数/*参数* -1.obj 对象* -2.speed 速度* -3.target 执行动画的目标*/function move(obj,speed,target){clearInterval(timer);//判断速度的正负值//如果从0向800移动则为正//如果从800向0移动则为负var current=parseInt(getStyle(obj,"left"));if(current>target){speed=-speed;}//开启一个定时器timer=setInterval(function(){//关闭上一次定时器var oldvalue=parseInt(getStyle(obj,"left"));var newvalue=oldvalue+speed;if(speed<0&&newvalue<target||speed>0&&newvalue>target){newvalue=target;}obj.style.left=newvalue+"px";//当元素到达target关闭定时器if(newvalue===target||newvalue===target)clearTimeout(timer);},30);};};function getStyle(obj,name){if(window.getComputedStyle){return getComputedStyle(obj,null)[name];}else{return obj.currentStyle[name];}};</script></head><body><div id="box"></div><button id="bt">左移</button><button id="bt1">右移</button></body> </html>
示例三
示例三中我们对move函数做了扩展及封装。
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin:0;padding: 0;}#box{position:absolute;top:30px;left: 0;height:100px;width:100px;background:#000;}#box2{position:absolute;top:200px;left: 0;height:100px;width:100px;background:yellow;}</style><script type="text/javascript" src="js/tools.js"></script><script type="text/javascript">window.onload=function(){var bt=document.getElementById("bt");var bt1=document.getElementById("bt1");var bt2=document.getElementById("bt2");var bt3=document.getElementById("bt3");var box=document.getElementById("box");var box2=document.getElementById("box2");//var timer;bt.οnclick=function(){move(box,10,800,"left");};bt1.onclick=function(){move(box,10,0,"left");};bt2.onclick=function(){move(box2,10,800,"left");};bt3.onclick=function(){move(box2,10,800,"width",function(){move(box2,10,400,"height",function(){move(box2,10,100,"width",function(){move(box2,10,100,"height",function(){});});});});};};</script></head><body><button id="bt">box右移</button><button id="bt1">box左移</button><button id="bt2">box2右移</button> <button id="bt3">测试</button> <div id="box"></div><div id="box2"></div></body> </html>
tool.js
//动画函数/*参数* -1.obj 对象* -2.speed 速度* -3.target 执行动画的目标* -4.arrt 要变化的样式* -5.callback:回调函数 将会在动画执行完后执行*/function move(obj,speed,target,arrt,callback){//关闭上一次定时器 clearTimeout(obj.timer);//判断速度的正负值//如果从0向800移动则为正//如果从800向0移动则为负var current=parseInt(getStyle(obj,arrt));if(current>target){speed=-speed;}//开启一个定时器//为obj添加一个timer属性，用来保存它1自己的定时器的标识obj.timer=setInterval(function(){//获取原来的left值var oldvalue=parseInt(getStyle(obj,arrt));//在旧值的基础上增加var newvalue=oldvalue+speed;if(speed<0&&newvalue<target||speed>0&&newvalue>target){newvalue=target;}obj.style[arrt]=newvalue+"px";//当元素到达target关闭定时器if(newvalue===target||newvalue===target){clearTimeout(obj.timer);//动画执行完 执行函数callback&&callback();}},30);};function getStyle(obj,name){if(window.getComputedStyle){return getComputedStyle(obj,null)[name];}else{return obj.currentStyle[name];}};
