用js实现一个倒计时,样式没有,是根据自己用的前端框架easyUI自己上的样式
/**是这两个变量设置成全局的,方便后面调用方法来暂停倒计时循环
* var sys_second;
var end_time;
* */
var sys_second;
var end_time;
var setTimeOut=function(munites){
var ddddd=new Date().getTime()+1000*60*munites //十分
end_time = new Date(format(ddddd, 'yyyy/MM/dd HH:mm:ss')).getTime();
sys_second = (end_time-new Date().getTime());
countDown("#demo01 .day","#demo01 .hour","#demo01 .minute","#demo01 .second");
}
var setTimeEnd=function(){
var ddddd=new Date().getTime()
sys_second=0;
}
var countDown =function(day_elem,hour_elem,minute_elem,second_elem){
//每10毫秒就执行一次的循环
var timer = setInterval(function(){
if (sys_second > 0) {
sys_second -= 10;
var day = Math.floor((sys_second /1000/ 3600) / 24);
var hour = Math.floor((sys_second /1000/ 3600) % 24);
var minute = Math.floor((sys_second /1000/ 60) % 60);
var second = Math.floor(sys_second/1000 % 60);
// var haomiao = Math.floor(sys_second%1000);
day_elem && $(day_elem).text(day+'天');//计算天
$(hour_elem).text(hour<10?"0"+hour:hour+'时');//计算小时
$(minute_elem).text(minute<10?"0"+minute:minute+'分');//计算分
$(second_elem).text(second<10?"0"+second:second+'秒');// 计算秒
// $("#haomiao").text(haomiao);// 计算秒
} else {
$(hour_elem).text('0时');//计算小时
$(minute_elem).text('0分');//计算分
$(second_elem).text('0秒');// 计算秒
// $("#haomiao").text(haomiao);// 计算秒
clearInterval(timer);
}
}, 10);
}
<div class="time-item" id="demo01">
估计剩余时间 :
<strong id="day" class="day">0天</strong>
<strong id="hour" class="hour">0时</strong>
<strong id="minute" class="minute">0分</strong>
<strong id="second" class="second">0秒</strong>
<!-- <strong id="haomiao" class="second">0</strong>毫秒 -->
</div>
因为如果启用毫秒的话,会有比较明显的误差,这里是注释掉了毫秒的。
/**根据毫秒数和 格式,返回毫秒数的时间日期*/
var format = function(time, format){
var t = new Date(time);
var tf = function(i){return (i < 10 ? '0' : '') + i};
return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function(a){
switch(a){
case 'yyyy':
return tf(t.getFullYear());
break;
case 'MM':
return tf(t.getMonth() + 1);
break;
case 'mm':
return tf(t.getMinutes());
break;
case 'dd':
return tf(t.getDate());
break;
case 'HH':
return tf(t.getHours());
break;
case 'ss':
return tf(t.getSeconds());
break;
}
})
}
入口是setTimeOut,停止是setTimeEnd;