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: null codes: null taken: null spoid: 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 + "天"; }