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 onclick="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 onclick="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.onclick=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]; } };
