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

最新推荐文章于 2024-04-17 17:07:41 发布

静默思想

最新推荐文章于 2024-04-17 17:07:41 发布

阅读量6.2k

点赞数

分类专栏：小程序文章标签： js

本文链接：https://blog.csdn.net/weixin_41871290/article/details/80313027

版权

小程序专栏收录该内容

38 篇文章 2 订阅

订阅专栏

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 + "天";

}

静默思想

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
微信小程序与js简单时分秒毫秒倒计时

js简单时分秒毫秒倒计时效果图直接copy就能运行&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;js时分秒毫秒倒计时&lt;/title&gt; &l
复制链接

扫一扫