JS实现倒计时,包含开始,停止;根据毫秒数和格式,返回毫秒数的时间日期;终止setInterval循环;兼容IE8,

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值