微信小程序与js简单时分秒毫秒倒计时

js简单时分秒毫秒倒计时

效果图 

---

直接copy就能运行

    
        
        
    
    
        

            00
            00
            00
            00
            00
        
        
    


固定时间差实现方法（时间轮巡 ）

[javascript] 

1. 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:
   
   
   
   
   
   {
         {a}}
   
   {
         {clock}} 时：
   
   {
         {b}} 分：{
         {c}} 秒
   
   完善资料
   
   
   
   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 + "天";
   
   }