1、定时器概念： BOM
- 延时器
过多长时间执行某个动作。比如说定时炸弹。 - 循环定时器
每隔多长时间执行一个固定的动作。
定时器都是可以取消的。但是取消之后不能重新启动，只能重新定义一个新的定时器。
2、定义定时器
- 延时器
setTimeout(函数，时间);
eg:
方法一：var timer = setTimeout(time,1000);
function time(){
console.log('a');
}
方法二：var timer = setTimeout(function(){
console.log('a');
},1000);
- 循环定时器
setInterval(函数，时间);
eg:
方法一：var timer = setInterval(time,1000);
function time(){
console.log('a');
}
方法二：var timer = setInterval(function(){
console.log('a');
},1000);
3.停止定时器
- 延时器：
clearTimeout();
eg:
var timer = setTimeout(function(){
console.log('b');
},3000);
oBtn.onclick = function(){
clearTimeout(timer);
};
- 循环定时器
clearInterval();
eg:
var timer = setTimeout(function(){
console.log('b');
},3000);
oBtn.onclick = function(){
clearInterval(timer);
};
案例：
倒计时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="发送">
</body>
<script>
var oIn = document.getElementsByTagName('input')[0];
oIn.onclick = function(){
//初始化
if(this.value>0){
return false;
}
var time = 4;
oIn.value = time;
var timer = setInterval(function(){
//递归
time--;
//判断time<0的情况
if(time<0){
oIn.value = '发送';
clearInterval(timer);
return false;
}
//赋值
oIn.value = time;
},1000);
};
</script>
</html>
延时提示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
height:300px;
float: left;
margin:50px;
}
#left{
width:200px;
background: red;
}
#right{
width:600px;
background: yellow;
display: none;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
<script>
var left = $('left');
var right = $('right');
var timer;
function $(id){
return document.getElementById(id);
}
//移入左/右，右边显示并且清除定时器
right.onmouseover = left.onmouseover = function(){
clearTimeout(timer);
right.style.display = 'block';
};
//移出左/右，右边延迟400s消失
right.onmouseout = left.onmouseout = function(){
timer = setTimeout(function(){
right.style.display = 'none';
},400);
};
</script>
</body>
</html>
多个桌球
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
}
div{
width:50px;
height:50px;
border-radius: 50px;
background: blue;
position: absolute;
left:47%;
top:100px;
}
.na{
left:100px;
}
</style>
</head>
<script>
window.onload= function(){
var oDiv = document.getElementsByTagName('div');
//每个小球的速度
for(var i = 0;i<oDiv.length;i++)
{
oDiv[i].speedX = i+5;
oDiv[i].speedY = i+4;
}
var timer = setInterval(function(){
for(var i = 0;i<oDiv.length;i++)
{
//判断小球距离浏览器上下两边的边界值
if(oDiv[i].offsetLeft<0 || oDiv[i].offsetLeft>1230){
oDiv[i].speedX *= -1;
}
//判断小球距离浏览器左右两边的边界值
if(oDiv[i].offsetTop<0 || oDiv[i].offsetTop>645 ){
oDiv[i].speedY *= -1;
}
//小球的位置
oDiv[i].style.left = oDiv[i].offsetLeft+oDiv[i].speedX + 'px';
oDiv[i].style.top = oDiv[i].offsetTop+oDiv[i].speedY + 'px';
}
},30);
}
</script>
<body>
<div></div>
<div class="na"></div>
</body>
</html>
超酷数码钟表
//初始化（干掉原本的样式）
time();
// 循环定时器（函数，时间）时间单位：毫秒
setInterval(time,1000);
function time(){
// 实例
var day = new Date();
// 获取年月日时分秒星期
var year = day.getFullYear();
var month = day.getMonth()+1;
var today = day.getDate();
var shi = day.getHours();
var fen = day.getMinutes();
var miao = day.getSeconds();
var week = day.getDay();
// 格式化数字：月日时分秒的数字10，数字前加0，即01
function parseNum(num){
if (num<10) {
num = '0'+num;
}
return num;
}
//年月日时分秒字符串拼接
var str = year+''+parseNum(month)+parseNum(today)+parseNum(shi)+parseNum(fen)+parseNum(miao);
var oImg = document.getElementsByClassName('num');
var oImg2 = document.getElementsByClassName('num2')[0];
for (var i = 0; i < oImg.length; i++) {
// 下标表示的当前日期与图片对应
oImg[i].src = 'images/'+str[i]+'.png';
}
// 0：代表星期天
switch(week){
case 0:oImg2.src = 'images/senven.png';
break;
case 1:oImg2.src = 'images/one.png';
break;
case 2:oImg2.src = 'images/two.png';
break;
case 3:oImg2.src = 'images/three.png';
break;
case 4:oImg2.src = 'images/four.png';
break;
case 5:oImg2.src = 'images/five.png';
break;
case 6:oImg2.src = 'images/six.png';
break;
}
}
网友评论