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

来源:互联网 发布:包装版面设计软件 编辑:程序博客网 时间:2024/06/08 19:26

用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