javascript 时间倒计时

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

方案一：

页面Html：

<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代码：

<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>

方案二：

<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：

<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>

方案三：

<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 style="font-family: Arial, Helvetica, sans-serif;">timeCounter</span>"></p></span>

总结：

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

秒客网

javascript 时间倒计时

相关文章