最近有個需求,要求此靜態頁面實現倒計時功能
先上圖:
分析需求:
這種肯定是用到定時器了,選用了setTime間隔1秒調用自身函數,每次更改文本的值
<span>00</span>天<span id="jq_hour">0</span>小時<span id="jq_minute">1</span>分<span id="jq_second">1</span>秒
這裏我是用了jq插件所以直接獲取了文本的值了
var hour=$('#jq_hour').text()
var minute=$('#jq_minute').text()
var second=$('#jq_second').text()
getTime()
function getTime(){
//時間到底終止
if(hour=="0"&&minute=="0"&&second=="0"){
return false
}
if(second=="0"){
//秒到底分就減一,並且重新恢復60
//前置條件
if(minute>0){
minute--
second=60
}
}
if(minute=="0"){
//前置條件
if(hour>0){
hour--
minute=60
}
}
second--
//每次調用更新文本值
$('#jq_hour').text(hour)
$('#jq_minute').text(minute)
$('#jq_second').text(second)
setTimeout(getTime,1000);
}
})