js实现动态倒计时功能代码

在一些电子商务网站的活动页面常常会出现一些动态倒计时的效果元素，比如离活动开始还有xx小时xx分钟xx秒，离活动结束还有xx小时xx分钟xx秒等，并且时间是动态减少的，非常的引人注意。那么这篇文章就说一说，如何利用原生JS来实现动态倒计时的效果。

js实现倒计时-时分秒

HTML代码

<span id="Mochu"></span>

JS代码

<pre class=\"prism-highlight prism-language-JavaScript\”>
<script type="text/javascript">
    window.onload = function countTime() {
        //获取当前时间
        var date = new Date();
        var now = date.getTime();
        //设置截止时间
        var str = "2019/10/1 00:00:00";
        var endDate = new Date(str);
        var end = endDate.getTime();
        //时间差
        var leftTime = end – now;
        //定义变量 d,h,m,s保存倒计时的时间
        var d,h,m,s;
        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);
        if (leftTime>1) {
            //活动剩余时间
            document.getElementById("Mochu").innerHTML = "离活动结束还有：<span class='Mochu'> "+d+"</span> 天<span class='Mochu'> "+h+"</span> 时<span class='Mochu'> "+m+"</span> 分<span class='Mochu'> "+s+"</span> 秒";
        } else {
            //倒计时结束
            document.getElementById("Mochu").innerHTML = "<span class='Mochu'>活动已结束</span>";
        }
        setTimeout(countTime,1000);
    }
</script>

运行效果：

代码理解：

var str = "2019/10/1 00:00:00"：可以设置到期时间，比如2020/25/01 23:00:00 ,但要大于当前的时候。

setTimeout(countTime,1000)：为多少时间执行一次countTime() 函数，用来重新计算时间，来更新DIV里面的内容

getTime()：函数用于换取时间的时间戳，用于当前日期与结束日期进行比较