JS定时器实现倒计时（含基础知识）
JS 天时分秒倒计时：
先看下方法一倒计时：
源码（直接copy就可以运行，不过没有图片。。）：
<!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: 0;
padding: 0;
}
body {
background: url(../img/d2.jpg)no-repeat;
background-size: cover;
}
.time-box {
position: fixed;
top: 50%;
left: 50%;
width: 980px;
transform: translate(-50%,-50%);
}
.square-box {
float: left;
width: 150px;
height: 150px;
margin: 0 45px;
border: 2px solid rgba(255, 255, 255, .3);
/* border: 2px solid pink; */
/* border: 2px solid #fff; */
/* border: 2px solid #2c7d8f; */
/* border: 2px solid rgba(255, 255, 255, .52); */
transform: rotate(45deg);
border-radius: 14px;
}
.container {
text-align: center;
transform: rotate(-46deg);
}
.container .time {
display: block;
width: 83%;
padding: 31px 0px 3px 0px;
text-align: center;
font-family: 'Lato', sans-serif;
font-size: 61px;
font-weight: 400;
color: white;
}
.container .word {
font-family: 'Lato', sans-serif;
font-size: 17px;
font-weight: 500;
margin-right: 15px;
text-transform: uppercase;
color: white;
}
/* 换背景 */
.backgroundPicker {
position: absolute;
right: 30px;
bottom: 20px;
padding: 3px 6px 6px;
}
.backgroundPicker img {
float: left;
width: 25px;
height: 25px;
margin: 0 5px;
border-radius: 3px;
background-size: cover;
cursor: pointer;
transition: all .3s linear;
}
.backgroundPicker img:hover{
transform: translateY(-4px);
}
</style>
</head>
<body>
<div class="time-box">
<div class="square-box">
<div class="container">
<span class="time" id="day">15</span>
<span class="word">days</span>
</div>
</div>
<div class="square-box">
<div class="container">
<span class="time" id="hours">15</span>
<span class="word">hours</span>
</div>
</div>
<div class="square-box">
<div class="container">
<span class="time" id="minute">15</span>
<span class="word">minute</span>
</div>
</div>
<div class="square-box">
<div class="container">
<span class="time" id="seconds">15</span>
<span class="word">seconds</span>
</div>
</div>
</div>
<div class="backgroundPicker">
<img src="../img/d1.jpg" alt="">
<img src="../img/d2.jpg" alt="">
<img src="../img/d3.jpg" alt="">
<img src="../img/d4.jpg" alt="">
<img src="../img/d5.jpg" alt="">
</div>
<script>
//切换body模块
var btn = document.querySelectorAll('.backgroundPicker img');
var btnLen = btn.length;
for(var i = 0;i < btn.length;i++) {
(function(n){
btn[n].addEventListener('click',function() {
document.body.style.background = 'url('+this.src+')no-repeat';
document.body.style.backgroundSize = 'cover';
})
//方形盒子边框变色(待完善！！)
}(i))
};
var inputTime = +new Date('2020-5-5 00:00'); //获取设置时间毫秒数
//倒计时函数
function getTimes() {
var clear = setInterval(function(){
var now = +new Date(); //当前时间毫秒数
var sec = (inputTime - now) / 1000; //转换秒
if(sec > 0) {
$('day').innerHTML = addzero(parseInt(sec / 3600 /24)); //天数
$('hours').innerHTML = addzero(parseInt(sec / 3600 % 24)); //小时
$('minute').innerHTML = addzero(parseInt(sec / 60 % 60)); //分钟
$('seconds').innerHTML = addzero(parseInt(sec % 60 )); //秒
} else {
clearInterval(clear);
$('day').innerHTML = '00';
$('hours').innerHTML = '00';
$('minute').innerHTML = '00';
$('seconds').innerHTML = '00';
}
},1000);
}
getTimes();
//时间小于10前面补0
function addzero(num) {
return num < 10?'0'+num :num;
}
//获取id
function $(id) {
return typeof id === 'string' ? document.getElementById(id):null;
}
</script>
</body>
</html>
倒计时方法二：
效果图：
源码（可直接copy就可以运行）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>倒计时</title>
<style>
.timers {
width: 300px;
margin: 0 auto;
margin-top: 10px;
font-weight: 700;
text-align: center;
color: #333;
overflow: hidden;
}
.timers span {
position: relative;
display: inline-block;
width: 30px;
height: 30px;
background-color: #2f3430;
margin-right: 20px;
margin-bottom: 20px;
font-size: 20px;
text-align: center;
color: #fff;
}
.timers span::after {
content: "：";
position: absolute;
top: 0;
right: -23px;
display: block;
width: 20px;
height: 100%;
font-size: 18px;
color: red;
}
.timers span:last-of-type::after {
content: "";
}
#btn {
margin-left: -22px;
}
</style>
</head>
<body>
<div class="timers">
<span id="minute">10</span>
<span id="second">00</span>
<!-- <span id="mil">00</span><br> -->
<br>
<input type="button" value="开始倒计时" id="btn">
</div>
<script>
var maxMinute = 10 * 60; // 10分钟,以秒为单位计算
function countTime() {
if(maxMinute >= 0) {
maxMinute--;
$('minute').innerText = addzero(Math.floor(maxMinute / 60)); //分钟
$('second').innerText = addzero(Math.floor(maxMinute % 60)); //秒
}
}
var timer = null; //清除定时器变量
var flag = true; //开关
$('btn').onclick = function() {
if(flag) {
flag = false;
//开启定时器倒计时
timer = setInterval("countTime()",1000);
this.value = '暂停倒计时';
} else {
flag = true;
this.value = '继续倒计时';
clearInterval(timer); //清除定时器
}
}
function addzero(num) {
return num < 10 ?('0'+num):num;
}
function $(id) {
return typeof id === 'string'?document.getElementById(id):null;
}
</script>
</body>
</html>
定时器基础知识点详解：
setTimout()定时器
window.setTimeout(调用函数，[延迟毫秒数]);
setTimout() 方法用于设置一个定时器 ，这个调用函数我们也称为 回调函数 callback
普通函数是按照代码顺序直接调用，而这个函数，需要等待时间，时间到了才去调用这个函数，我们称为 回调函数
简单理解：回调，就是回头调用的意思，上一件事情做完，在回头调用这个函数
element.onclick = function(){}
// 或者
element.addEventListence('click',function(){}) //里面的参数也是回调函数
【注意：】
- window可以省略
- 这个调用函数可以直接写函数，或者写函数名，或者写字符串 ‘函数名()’ 三种方法，第三种不推荐
- 延迟的毫秒数可以省略，省略默认是 0 .如果写，必须是毫秒数
- 因为定时器可能有很多，我们经常给定时器赋值一个标识符
setInterval()定时器
window.setInterval(回调函数,[间隔的毫秒数]);
setInterval() 方法重复调用一个函数，每隔一段时间（自己设置的），就去调用一次回调函数
【注意：】
- window可以省略
- 这个调用函数可以直接写函数，或者写函数名，或者写字符串 ‘函数名()’ 三种方法，第三种不推荐
- 延迟的毫秒数可以省略，省略默认是 0 .如果写，必须是毫秒数
- 因为定时器可能有很多，我们经常给定时器赋值一个标识符
停止定时器
window.clearTimeout(timeoutID); //里面传入设置定时器的标识符
clearTimeout() 取消了先前通过调用 setTimeout 建立的定时器
【注意：】里面的参数就是定时器的标识符
【案例】（发送验证码）
// 每隔一分钟才能发送一次验证码
<input type="text" placeholder="短信验证码">
<button>获取验证码</button>
var btn = document.querySelector('button');
var count = 60;
btn.addEventListener('click',function() {
this.disabled = true;
this.style.backgroundColor = '#ccc';
this.style.cursor = 'not-allowed';
var clear = setInterval(function(){
if(count !== 0) {
btn.innerHTML = '重新发送('+count+')';
count--;
} else {
clearInterval(clear);
btn.innerHTML = '重新发送';
count = 3;
btn.disabled = false;
btn.style.backgroundColor = 'orange';
btn.style.cursor = 'pointer';
}
},1000);
})