js简单时分秒毫秒倒计时
效果图
直接copy就能运行
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>js时分秒毫秒倒计时</title> </head> <body> <div> <span id="_d">00</span> <span id="_h">00</span> <span id="_m">00</span> <span id="_s">00</span> <span id="_ms">00</span> </div> <script type="text/javascript"> function countTime() { var date = new Date(); var now = date.getTime(); var endDate = new Date("2017-10-01 00:00:00");//设置截止时间 var end = endDate.getTime(); var leftTime = end - now; //时间差 var d, h, m, s, ms; if(leftTime >= 0) { d = Math.floor(leftTime / 1000 / 60 / 60 / 24); h = Math.floor(leftTime / 1000 / 60 / 60 % 24); m = Math.floor(leftTime / 1000 / 60 % 60); s = Math.floor(leftTime / 1000 % 60); ms = Math.floor(leftTime % 1000); if(ms < 100) { ms = "0" + ms; } if(s < 10) { s = "0" + s; } if(m < 10) { m = "0" + m; } if(h < 10) { h = "0" + h; } } else { console.log('已截止') } //将倒计时赋值到div中 document.getElementById("_d").innerHTML = d + "天"; document.getElementById("_h").innerHTML = h + "时"; document.getElementById("_m").innerHTML = m + "分"; document.getElementById("_s").innerHTML = s + "秒"; document.getElementById("_ms").innerHTML = ms + "毫秒"; //递归每秒调用countTime方法，显示动态时间效果 setTimeout(countTime, 50); } countTime(); </script> </body></html>固定时间差实现方法（时间轮巡 ）
[javascript]
var cha; var toTime = new Date('2018/05/13 17:17:00'); ////iphone下时间固定为这个格式否则会发生错误 function dateDown(cha){ var h = Math.floor(cha / 1000 / 60 / 60 % 24); // var m = Math.floor(cha - Math.floor(cha/1000/60/60)); var m = Math.floor(cha / 1000 / 60 % 60); var s = Math.floor(cha / 1000 % 60); var ms = (cha%1000+'').slice(0,2); // console.log(document.getElementById("time")) if(h<0){h="00";} if(m<0){m="00"} if(s<0){s="00"} if(ms<0){ms="00"} if(h<10){h="0"+h;} if(m<10){m="0"+m;} if(s<10){s="0"+s;} if(ms<10){ms="0"+ms;} document.getElementById("time").innerHTML ="===="+ h+'：'+m +':'+s+':'+ ms; // console.log(cha) } function timeCalc(toTime){ var now = new Date(); cha= toTime - now; if(cha<=0 || !cha){ var newCha = Math.ceil((now*1 - toTime*1)/(1000*60*60*24)) toTime =toTime*1 + 24*60*60*1000 * newCha } console.log(toTime) console.log(now*1) cha= toTime - now; return cha; } setInterval(function(){ dateDown(timeCalc(toTime)) },100) 微信小程序倒计时wxml:<view class='cont'><image class='data_imag' src='../images/hd.png'></image><text class='one'>{{a}}</text><view class='two'><label class='times'>{{clock}}</label> 时：<label class='times'>{{b}}</label> 分：<label class='times'>{{c}}</label> 秒</view><lable class='msg' bindtap="btn_sub" >完善资料</lable></view>css:/* */.cont {width: 100%;height: 100%;position: relative;text-align: center;}/*背景图片 */.data_imag {width:100%;height:960rpx;}.one{position: relative;bottom: 550rpx;color: #fff;font-size: 35px;}.two{position: relative;bottom: 320rpx;color: #fff;font-size: 20px;}.msg{position: relative;bottom: 80rpx;border: 1px solid #FF6900;padding-left: 25rpx;padding-right: 25rpx;padding-top: 10rpx;padding-bottom: 10rpx;font-size: 18px;color: #FF6900;border-radius: 40rpx;}.times{background-color: #DB8D0E;padding: 10rpx;}js:// 定义一个总毫秒数，以一天为例Page({data: {clock: '',times: '',a: '',b:''},onLoad: function (cb) {var that = this;console.log();//时间戳var time ='1811111';this.setData({times: time})countdown(this);},btn_sub:function(e){wx.redirectTo({url: '../page_updata_compile/page_updata_compile',})},codesel: function (e) {id: nullcodes: nulltaken: nullspoid: null},});/* 毫秒级秒杀倒计时 */function countdown(that) {// 渲染倒计时时钟that.setData({clock: dateformat(that.data.times),//格式化时间a: dateformats(that.data.times),b: dateformat_hur(that.data.times),c: dateformat_tim(that.data.times)});if (that.data.times <= 0) {that.setData({clock: "秒杀结束"});// timeout则跳出递归return;}//settimeout实现倒计时效果setTimeout(function () {// 放在最后--that.data.times -= 10;countdown(that);}, 10)//注意毫秒的步长受限于系统的时间频率，于是我们精确到0.01s即10ms}// 时间格式化输出，如1天天23时时12分分12秒秒12 。每10ms都会调用一次function dateformat(micro_second) {// 总秒数var second = Math.floor(micro_second / 1000);// 天数var day = Math.floor(second / 3600 / 24);// 总小时var hr = Math.floor(second / 3600);// 小时位var hr2 = hr % 24;// 分钟位var min = Math.floor((second - hr * 3600) / 60);// 秒位var sec = (second - hr * 3600 - min * 60);// equal to => var sec = second % 60;// 毫秒位，保留2位var micro_sec = Math.floor((micro_second % 1000) / 10);return hr2;}function dateformat_hur(micro_second) {// 总秒数var second = Math.floor(micro_second / 1000);// 天数var day = Math.floor(second / 3600 / 24);// 总小时var hr = Math.floor(second / 3600);// 小时位var hr2 = hr % 24;// 分钟位var min = Math.floor((second - hr * 3600) / 60);// 秒位var sec = (second - hr * 3600 - min * 60);// equal to => var sec = second % 60;// 毫秒位，保留2位var micro_sec = Math.floor((micro_second % 1000) / 10);return min;}function dateformat_tim(micro_second) {// 总秒数var second = Math.floor(micro_second / 1000);// 天数var day = Math.floor(second / 3600 / 24);// 总小时var hr = Math.floor(second / 3600);// 小时位var hr2 = hr % 24;// 分钟位var min = Math.floor((second - hr * 3600) / 60);// 秒位var sec = (second - hr * 3600 - min * 60);// equal to => var sec = second % 60;// 毫秒位，保留2位var micro_sec = Math.floor((micro_second % 1000) / 10);return sec;}function dateformats(micro_second) {// 总秒数var second = Math.floor(micro_second / 1000);// 天数var day = Math.floor(second / 3600 / 24);// 总小时var hr = Math.floor(second / 3600);// 小时位var hr2 = hr % 24;// 分钟位var min = Math.floor((second - hr * 3600) / 60);// 秒位var sec = (second - hr * 3600 - min * 60);// equal to => var sec = second % 60;// 毫秒位，保留2位var micro_sec = Math.floor((micro_second % 1000) / 10);return day + "天";}
