最近有个需求,要求此静态页面实现倒计时功能
先上图:
分析需求:
这种肯定是用到定时器了,选用了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);
}
})