目录
创建定时器的两种方法
清理定时器的两种方法
一些关于定时器的小案例
- window.setInterval(函数,时间）;
- 函数
- 时间----毫秒
- 执行过程：页面加载完毕后，过设定的时间，就会执行一次函数代码，一直重复
- window.setTimeout(函数，时间)；
- 函数
- 时间----毫秒
- 执行过程：页面加载完毕后，只重复一次函数代码，然后不再执行，所以叫一次性定时器
清理定时器的两种方法
因为定时器函数有返回照顾，所以清理定时器就清理定时器的的返回值就ok
- clearinterval(timeId)
- clearTimeout(timeId)
案例1之div的渐变
<body>
<div id="box"></div>
<input type="button" value="点我渐变" id="btn">
<script>
var btn = document.getElementById('btn');
btn.onclick = function () {
//设置透明度为10
var opacity = 10;
var timeId = setInterval(function(){
opacity--;
if (opacity < 0 ) {
clearInterval(timeId);//清理定时器
return;
}
var box = document.getElementById('box');
//设置div的透明度，（透明度的取值范围为0-1）
box.style.opacity = opacity / 10;
}, 200);
}
</script>
</body>案例2之div变宽
<body>
<div id="box"></div>
<input type="button" value="点我变宽" id = 'btn'>
<script>
var btn = document.getElementById('btn');
btn.onclick = function () {
var width = 300;
var timeId = setInterval (function() {
width = width + 10;
if(width > 800) {
clearInterval(timeId);
return;
}
var box = document.getElementById('box');
box.style.width = width + 'px';
},200);
}
</script>
</body>