多次定时器
setInterval(函数名,定时时间) //第一种
setInterval(function(){},定时时间) //第二种
//清除多次定时器
clearInterval(定时器变量)
单次定时器
//第一种使用方式
setTimeout(函数名，定时时间)
// 第二种使用方式
setTimeout(function(){},定时时间)
//定时时间单位：毫秒 1 秒= 1000 毫秒
//清除定时器
clearTimeout(定时器变量)
让我们利用定时器来简单的做一个倒计时的特效吧!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0px;padding:0px;}
#box{width:200px;height:50px;background:green;color:white;text-align:center;font:bold 30px/50px 黑体; margin:0px auto;}
</style>
</head>
<body>
<div id="box">10</div>
</body>
<script>
//找对象
var box = document.getElementById('box');
//初始化的值
var num = box.innerHTML;
//改属性
var timmer = setInterval(function(){
num--;
console.log(num);
//把 num 的值赋值给 div 元素的对象的文本值
box.innerHTML = num;
if(num == 0){
//清除定时器
clearInterval(timmer);
alert('倒计时结束');
}
},1000)
</script>
</html>
演示
KIENG.CN , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA 4.0协议进行授权
转载请注明出处：JavaScript 好玩的定时器
本文章链接：https://blog.kieng.cn/153.html
转载请注明出处：JavaScript 好玩的定时器
本文章链接：https://blog.kieng.cn/153.html
Windows 10 | 
Chrome 63.0.3239.132
搜狗浏览器.X
