javascript 时间倒计时

zoukankan html css js c++ java

javascript 时间倒计时
新加入一个项目的集中开发，遇到一个需要倒计时的需求，经过测试，有以下几种方案，分享出来：

方案一：

页面Html：
[html] view plain copy
print ?

<span style="font-size:18px;"><html>

<head>

    <meta charset="utf-8">

</head>

<body onload="timeCounter('timeCounter')">

    <p id="timeCounter">2:00:00</p>

</body>

</html></span>
JavaScript代码：
[javascript] view plain copy
print ?

<span style="font-size:18px;"><script>

        var timeCounter = (function () {

            var int;

            var timeID = SumTime().split(":");

            var total =parseInt(timeID[0] * 3600) + parseInt(timeID[1] * 60) + parseInt(timeID[2]);//将时间换算成秒数

            return function (elemID) {

                obj = document.getElementById(elemID);

                var s = (total % 60) < 10 ? ('0' + total % 60) : total % 60;//秒

                var h = total / 3600 < 10 ? ('0' + parseInt(total / 3600)) : parseInt(total / 3600);//时

                var m = (total - h * 3600) / 60 < 10 ? ('0' + parseInt((total - h * 3600) / 60)) : parseInt((total - h * 3600) / 60);//分

                obj.innerHTML = h + ' : ' + m + ' : ' + s;

                total--;

                int = setTimeout("timeCounter('" + elemID + "')", 1000);

                if (total < 0) clearTimeout(int);

             }

        })()



        function SumTime() {

                var ap = new Date().toLocaleTimeString().substring(0, 2);

                var startTime = new Date().toLocaleTimeString().substring(2);

                var endTime = "15:00:00";

                var start = new Array;

                var end = new Array;

                start = startTime.split(":");

                end = endTime.split(":");

                var hh = end[0] - start[0];

                if (ap == "下午" || ap=="PM") { hh -= 12;}

                if (end[1] < start[1]) {

                    hh -= 1;

                    var mm = end[1] + 60 - start[1];

                } else {

                    var mm = end[1] - start[1];

                }

                if (end[2] < start[2]) {

                    mm -= 1;

                    var ss = end[2] + 60 - start[2];

                } else {

                    var ss = end[2] - start[2];

                }

                var diffTime = hh + ":" + mm + ":" + ss;

                return diffTime;

            }



    </script></span>
方案二：
[html] view plain copy
print ?

<span style="font-size:18px;"><meta charset="utf-8">

<div>

    <span id='daya'></span>天

    <span id='hoursa'></span>小时

    <span id='minua'></span>分

    <span id='secoa'></span>秒

</div></span>
js：
[javascript] view plain copy
print ?

<span style="font-size:18px;"><script type="text/javascript">

    var a=7200;         //以毫秒为单位

    function fomtime()

    {

        a=a-1000;

        var b=new Date();

        b.setTime(0);

        var c=new Date();

        c.setTime(a);

        var day1=b.getDate();        //为方便调用，把天数、小时等单独定义

        var hours1=b.getHours();

        var minu1=b.getMinutes();

        var seco1=b.getSeconds();

        var day2=c.getDate();

        var hours2=c.getHours();

        var minu2=c.getMinutes();

        var seco2=c.getSeconds();

        var day=day2-day1;

        var hours=hours2-hours1;

        var minu=minu2-minu1;

        var seco=seco2-seco1;

        document.getElementById('daya').innerHTML=day;

        document.getElementById('hoursa').innerHTML=hours;

        document.getElementById('minua').innerHTML=minu;

        document.getElementById('secoa').innerHTML=seco;

        setTimeout("fomtime()",1000);

    }

    fomtime();

</script></span>
方案三：
[javascript] view plain copy
print ?

<span style="font-size:18px;"><script>

var second = 7200; // 剩余秒数

// 写一个方法，将秒数专为天数

var toDays = function(){

var s = second % 60; // 秒

var mi = (second - s) / 60 % 60; // 分钟

var h =  ((second - s) / 60 - mi ) / 60 % 24; // 小时

var d =  (((second - s) / 60 - mi ) / 60 - h ) / 24 // 天

return  d + "天" + h + "小时" + mi + "分钟" + s + "秒";

}

//定时器

window.setInterval(function(){

second --;

document.getElementById("showTimes").innerHTML = toDays ();

}, 1000);

</script>



<p id="<span margin: 0px; padding: 0px; border: currentColor; color: black; background-color: inherit;">font-family: Arial, Helvetica, sans-serif;">timeCounter</span>"></p></span>
总结：

总结一下上面的集中方法，其实就是一种方法：将时间差转化为以秒为单位的数，然后写定时器美妙执行一次时间变化，只是这个变化的方式稍有不同，但是都离不开SetTimeout延时这个方法,另一个就是window的setInterval设置时间间隔，思想是一样的。
查看全文

相关阅读:
Leetcode练习(Python)：树类：第117题：填充每个节点的下一个右侧节点指针 II：给定一个二叉树填充它的每个 next 指针，让这个指针指向其下一个右侧节点。如果找不到下一个右侧节点，则将 next 指针设置为 NULL。初始状态下，所有 next 指针都被设置为 NULL。
高可用OpenStack（Queen版）集群-5.Glance集群
 高可用OpenStack（Queen版）集群-4.keystone集群
 高可用OpenStack（Queen版）集群-3.高可用配置(pacemaker&haproxy)
高可用OpenStack（Queen版）集群-2.基础服务
 高可用OpenStack（Queen版）集群-1. 集群环境
 GlusterFS分布式存储集群-2. 使用
 GlusterFS分布式存储集群-1. 部署
 高可用Kubernetes集群-15. 部署Kubernetes集群统一日志管理
 高可用Kubernetes集群-14. 部署Kubernetes集群性能监控平台

原文地址：https://www.cnblogs.com/DoubleEggs/p/6018478.html