JavaScript使用setTimeout实现倒计时效果

JavaScript使⽤setTimeout实现倒计时效果
为了加强对JavaScript原⽣代码的编写能⼒，以及巩固setTimeout()的使⽤⽅法，制作了⼀个倒计时的demo，倒计时在现在的⽹站中算是⼀个常见的⼩功能，如果⼤家喜欢的话可以留下，就当作⼀个⽇常实⽤的⼩脚本。

实现思路
1、先获取⼩时值将⼩时值减1开始进⾏倒计时分钟59 秒数59
2、秒数的个位从9开始递减，当秒数个位⼩于0时，秒数的⼗位减1
3、秒数的⼗位⼩于0时，分钟的个位减1
4、分钟的个位⼩于0时，分钟的⼗位减1
5、分钟的⼗位⼩于0时，⼩时减1
6、⼩时数⼩于0后停⽌计时全部为0
实现代码
html
<p>倒计时：</p>
<span id="hour">5</span>
<span>:</span>
<span id="minuteTen">0</span>
<span id="minuteBit">0</span>
<span>:</span>
<span id="secondTen">0</span>
<span id="secondBit">0</span>
css
span{
display: inline-block;
width: 20px;
height: 20px;
background-color: #000000;
color: #ffffff;
text-align: center;
}
JavaScript
function time(){
/*⼩时*/
var hourTxt = document.getElementById("hour");
var hour = parseInt(document.getElementById("hour").innerHTML);
/*分钟*/
var minuteTenTxt = document.getElementById("minuteTen");
var minuteBitTxt = document.getElementById("minuteBit");
var minuteTen = parseInt(document.getElementById("minuteTen").innerHTML);
var minuteBit = parseInt(document.getElementById("minuteBit").innerHTML);
/*秒*/
var secondTenTxt = document.getElementById("secondTen");
var secondBitTxt = document.getElementById("secondBit");
var secondTen = parseInt(document.getElementById("secondTen").innerHTML);
var secondBit = parseInt(document.getElementById("secondBit").innerHTML);
function start(){
hour--;
hourTxt.innerHTML = hour;
minuteTen = 5;
minuteTenTxt.innerHTML = minuteTen;
minuteBit = 9;
minuteBitTxt.innerHTML = minuteBit;
secondTen = 5;
secondTenTxt.innerHTML = secondTen;
secondBit = 9;
secondBitTxt.innerHTML = secondBit;
/*secondBit开始⾃减*/
function second(){
secondBit--;
secondBitTxt.innerHTML = secondBit;
/*⼗秒过后*/
if(secondBit < 0){
secondTen--;
secondTenTxt.innerHTML = secondTen; secondBit = 9;
secondBitTxt.innerHTML = secondBit; /*继续倒计时*/
setTimeout(second,1000);
/*⼀分钟过后*/
if(secondTen < 0){
minuteBit--;
minuteBitTxt.innerHTML = minuteBit; secondTen = 5;
secondTenTxt.innerHTML = secondTen; secondBit = 9;
secondBitTxt.innerHTML = secondBit; /*⼗分钟过后*/
if(minuteBit < 0){
minuteTen--;
minuteTenTxt.innerHTML = minuteTen; minuteBit = 9;
minuteBitTxt.innerHTML = minuteBit; }
/*⼀个⼩时过后*/
if(minuteTen < 0){
hour--;
hourTxt.innerHTML = hour;
minuteTen = 5;
minuteTenTxt.innerHTML = minuteTen; minuteBit = 9;
minuteBitTxt.innerHTML = minuteBit; secondTen = 5;
secondTenTxt.innerHTML = secondTen; secondBit = 9;
secondBitTxt.innerHTML = secondBit; }
/*倒计时结束*/
if(hour < 0 ){
hour = 0;
hourTxt.innerHTML = hour;
minuteTen = 0;
minuteTenTxt.innerHTML = minuteTen; minuteBit = 0;
minuteBitTxt.innerHTML = minuteBit; secondTen = 0;
secondTenTxt.innerHTML = secondTen; secondBit = 0;
secondBitTxt.innerHTML = secondBit; clearTimeout(second);
clearTimeout(start);
}
}
}else{
setTimeout(second,1000);
}
}
setTimeout(second,1000);
}
setTimeout(start,1000);
}
执⾏页⾯
结束页⾯
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。