JavaScript使用setTimeout實(shí)現(xiàn)倒計(jì)時(shí)效果

第JavaScript使用setTimeout實(shí)現(xiàn)倒計(jì)時(shí)效果為了加強(qiáng)對(duì)JavaScript原生代碼的編寫能力，以及鞏固setTimeout()的使用方法，制作了一個(gè)倒計(jì)時(shí)的demo，倒計(jì)時(shí)在現(xiàn)在的網(wǎng)站中算是一個(gè)常見(jiàn)的小功能，如果大家喜歡的話可以留下，就當(dāng)作一個(gè)日常實(shí)用的小腳本。

實(shí)現(xiàn)思路

1、先獲取小時(shí)值將小時(shí)值減1開始進(jìn)行倒計(jì)時(shí)分鐘59秒數(shù)59

2、秒數(shù)的個(gè)位從9開始遞減，當(dāng)秒數(shù)個(gè)位小于0時(shí)，秒數(shù)的十位減1

3、秒數(shù)的十位小于0時(shí)，分鐘的個(gè)位減1

4、分鐘的個(gè)位小于0時(shí)，分鐘的十位減1

5、分鐘的十位小于0時(shí)，小時(shí)減1

6、小時(shí)數(shù)小于0后停止計(jì)時(shí)全部為0

實(shí)現(xiàn)代碼

html

p倒計(jì)時(shí)：/p

spanid="hour"5/span

span:/span

spanid="minuteTen"0/span

spanid="minuteBit"0/span

span:/span

spanid="secondTen"0/span

spanid="secondBit"0/span

css

span{

display:inline-block;

width:20px;

height:20px;

background-color:#000000;

color:#ffffff;

text-align:center;

}

JavaScript

functiontime(){

/*小時(shí)*/

varhourTxt=document.getElementById("hour");

varhour=parseInt(document.getElementById("hour").innerHTML);

/*分鐘*/

varminuteTenTxt=document.getElementById("minuteTen");

varminuteBitTxt=document.getElementById("minuteBit");

varminuteTen=parseInt(document.getElementById("minuteTen").innerHTML);

varminuteBit=parseInt(document.getElementById("minuteBit").innerHTML);

/*秒*/

varsecondTenTxt=document.getElementById("secondTen");

varsecondBitTxt=document.getElementById("secondBit");

varsecondTen=parseInt(document.getElementById("secondTen").innerHTML);

varsecondBit=parseInt(document.getElementById("secondBit").innerHTML);

functionstart(){

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開始自減*/

functionsecond(){

secondBit--;

secondBitTxt.innerHTML=secondBit;

/*十秒過(guò)后*/

if(secondBit0){

secondTen--;

secondTenTxt.innerHTML=secondTen;

secondBit=9;

secondBitTxt.innerHTML=secondBit;

/*繼續(xù)倒計(jì)時(shí)*/

setTimeout(second,1000);

/*一分鐘過(guò)后*/

if(secondTen0){

minuteBit--;

minuteBitTxt.innerHTML=minuteBit;

secondTen=5;

secondTenTxt.innerHTML=secondTen;

secondBit=9;

secondBitTxt.innerHTML=secondBit;

/*十分鐘過(guò)后*/

if(minuteBit0){

minuteTen--;

minuteTenTxt.innerHTML=minuteTen;

minuteBit=9;

minuteBitTxt.innerHTML=minuteBit;

/*一個(gè)小時(shí)過(guò)后*/

if(minuteTen0){

hour--;

hourTxt.innerHTML=hour;

minuteTen=5;

minuteTenTxt.innerHTML=minuteTen;

minuteBit=9;

minuteBitTxt.innerHTML=minuteBit;

secondTen=5;

secondTenTxt.innerHTML=secondTen;

secondBit=9;

secondBitTxt.innerHTML=secondBit;

/*倒計(jì)時(shí)結(jié)束*/

if(hour0){

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);

}e