计时器
一.计时器
1.javaScript一个设定的时间间隔之后来执行代码而不是在函数被调用后立即执行,我们称之为计时事件.
2.时间为毫秒.1000毫秒=1秒
二.计时器开启方法:
setInterval(参数1,参数2) 参数1为函数,参数2为时间.可以直接运行,也可以赋给一个变量之后运行.
计时器只运行一次,如果想多用几个要复制粘贴.
(1)常用计时器:setInterval
1.使用匿名函数,函数由计时器调用执行
var num = 1;
setInterval(function(){
num++;
console.log(num);
},1000);
2.正常函数的写法
function action1(){
console.log("张三");
}
//不要写()
var timer1 = setInterval(action1,1000);
3.方法3:
setInerval("action()",500);
(2)方法4:setTimeout
延时计时器,循环一定时间后停止
setTimeout(function(){
clearInterval(timer1);
},5000);//5秒后停止,上边循环5次
三.计时器解除方法
1.setInterval()的解除方法
clearInterval(timer1);//括号里边是计时器所赋的名字.
2.setTimeout()的解除方法
clearTimeout();
四.倒计时练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>倒计时</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.hour,
.minute,
.second {
width: 30px;
height: 30px;
background-color: #000;
color: #fff;
font-size: 16px;
text-align: center;
line-height: 30px;
display: inline-block;
}
.hour {
margin-left: 20px;
}
.div {
float: left;
margin: 20px 0;
}
span {
color: #000;
font-size: 16px;
margin: 0 20px;
}
</style>
</head>
<body>
<!-- 时 -->
<div class="div">
<div class="hour">01</div>
<span>:</span>
</div>
<!-- 分 -->
<div class="div">
<div class="minute">10</div>
<span>:</span>
</div>
<!-- 秒 -->
<div class="div">
<div class="second">10</div>
</div>
<script>
var hour = document.getElementsByClassName("hour")[0];
var minute = document.getElementsByClassName("minute")[0];
var second = document.getElementsByClassName("second")[0];
var timeNumber = setInterval(function () {
second.innerHTML -= 1;
if (second.innerHTML <= 10 && second.innerHTML >= 0) {
second.innerHTML = "0" + second.innerHTML;
}
//在秒数到0时分针没有变,下一秒才变
if (second.innerHTML == -1) {
second.innerHTML = 59;
minute.innerHTML -= 1;
if (minute.innerHTML < 10 && minute.innerHTML >= 0) {
minute.innerHTML = "0" + minute.innerHTML;
}
if (minute.innerHTML == -1) {
minute.innerHTML = 59;
hour.innerHTML -= 1;
if (hour.innerHTML < 10 && hour.innerHTML >= 0) {
hour.innerHTML = "0" + hour.innerHTML;
}
if (hour.innerHTML == -1) {
hour.innerHTML = "00";
second.innerHTML = "00";
minute.innerHTML = "00";
clearInterval(timeNumber);
}
}
}
},
10);
</script>
</body>
</html>
效果