javascript 倒计时

      从事前端工作以来，经常用到很多牛人写的javascript的库和插件。很是羡慕他们的能力，
自己也是以他们这些能人为目标不断努力。自己一直以来都想写一个自己的js库，再封装一
些自己常用插件，想法是美丽动人的，现实是自己一直都还没一个很好的行动。

      很多人的想法是很丰富的，东南西北的乱想，但是能把想的转化成现实的，就是很少。而往往
想与行动结合才是学习提升的重点。自个为了能让自己的js库能够早日出炉，已经把大概的
js库模样构思出来啦，代码已提交到https://github.com/qiheng/baseLib，欢迎大家留言
建议。我的现在的想法就是利用自己编写的js库，扩展一些常用的js插件，比如我今天要说
的倒计时的小插件。但是今天说的倒计时小插件还没结合自己编写的js库，那个js库的还有
很多的问题存在，因此不便结合它来编写插件。

现在来说说倒计时的插件吧，我是把它封装成一个构造函数TimeCountDown，daima如下：

/*
* 倒计时 ( TimeCountDown ) 封装类
* @param { String } 类的属性 传入的结束时间
*/

function TimeCountDown( strTime ) {
    if ( this instanceof TimeCountDown ) {
        this.strTime = strTime;
    }else {
        return new TimeCountDown();
    }
}

在这个构造函数有个strTime属性，是要传入的结束时间字符串。

下面是构造函数的一个原型链方法fillZero，这个函数从名字上就知道是作用，就是
在不足长度的字符串的前面添加0，有两个参数，第一个是要传入补零的参数，第二个是补
零后的字符串长度，代码如下：

/*
* @method fillZero 类的方法 倒计时的辅助函数，对时间格式化，不足位数填零(如:8:12:5--->08:12:05)
* @paran { Number } 传入要格式的时间
* @return { String } 返回格式的时间字符串
*/

TimeCountDown.prototype.fillZero = function( num, digit ) {
    var str = '' + num;
    digit = digit || 2;
    while ( str.length < digit ) {
        str = '0' + str; 
    }
    return str;
}

现在是倒计时的关键代码，先看代码：

/*
* @method time 类的方法 倒计时的核心功能函数
* @return { Object || null } 返回时间,传入的时间结束啦则返回null
*/
TimeCountDown.prototype.time = function() {
    var aTimes = [],
        oResult = {},
        oDateEnd = null,
        oDateNow = null,
        iTimes = 0;
        
    aTimes = this.strTime.split(/[-:]|\s/g);
    
    oDateEnd = new Date( aTimes[0], aTimes[1] - 1, aTimes[2] || 1, aTimes[3] || 0, 

aTimes[4] || 0, aTimes[5] || 0 );
    oDateNow = new Date();
    
    iTimes = ( oDateEnd.getTime() - oDateNow.getTime() ) / 1000;  // 总的秒数
    
    oDateNow = oDateEnd = null;
    
    if ( iTimes < 0 ) {
        return null;
    }
    
    oResult.nowDays = parseInt( iTimes / 86400 ); // 天

    iTimes = iTimes % 86400;
    
    oResult.nowHours = parseInt( iTimes / 3600 ); // 时
    iTimes = iTimes % 3600;
    
    oResult.nowMinutes = parseInt( iTimes / 60 ); // 时
    iTimes = iTimes % 60
    
    oResult.nowSeConds = parseInt( iTimes ); // 秒

    return oResult;
        
}

这个代码里处理的时间格式比较单一，如“2013-11-22”，
“2013-11-22 12:1:45”，如果传入的时间是结束了就返回null，如果有就返回一个对象

 倒计时的运用一 希望时间格式为 xxx-xx-xx-xx 就是用实例化的fillZero方法，默认为填充两位

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title> 倒计时 </title>
    <style type="text/css">
    * {margin:0; padding:0;}
    #clock {margin:50px; text-align:center; font:700 40px "Microsoft Yahei"}
    </style>
</head>
<body>
<div id="clock">
    <span id="days">0</span> :
    <span id="hours">0</span> :
    <span id="minutes">0</span> :
    <span id="seconds">0</span> 
</div>
<script type="text/javascript">
function $( id ) {
    return typeof id === 'string' ? document.getElementById( id ) : id;
}

var oDays = $('days');
var oHours = $('hours');
var oMinutes = $('minutes');
var oSeconds = $('seconds');

function autoPlay() {
    var showTime = new TimeCountDown('2013-11-22');
    var timeId = setInterval(function(){
        var t = showTime.time();
        if (t) {
            oDays.innerHTML = showTime.fillZero( t.nowDays, 3 );
            oHours.innerHTML = showTime.fillZero( t.nowHours );
            oMinutes.innerHTML = showTime.fillZero( t.nowMinutes );
            oSeconds.innerHTML = showTime.fillZero( t.nowSeConds );
        }else {
            showTime = null;
            clearInterval( timeId );
            oDays.style.color = 'red';
        }
    }, 1000);
}
autoPlay();
</script>
</body>
</html>
View Code

 倒计时的运用二 希望时间格式为 xxx-xx-xx-xx 就是用实例化的fillZero方法，默认为填充两位；却希望每个时间数为各位，只需要将返回的时间用原生split函数进行分割处理
 这样就可以利用图片作为时间数值进行时间显示。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title> 倒计时 </title>
    <style type="text/css">
    * {margin:0; padding:0;}
    #clock {margin:50px; text-align:center; font:700 40px "Microsoft Yahei"}
    </style>
</head>
<body>
<div id="clock">
    <span id="days">0</span> :
    <span id="hours">0</span> :
    <span id="minutes">0</span> :
    <span id="seconds">0</span> 
</div>
<script type="text/javascript">
function $( id ) {
    return typeof id === 'string' ? document.getElementById( id ) : id;
}

var oDays = $('days');
var oHours = $('hours');
var oMinutes = $('minutes');
var oSeconds = $('seconds');
function autoPlay() {
    var showTime = new TimeCountDown('2013-11-22');
    var timeId = setInterval(function(){
        var t = showTime.time();
        if (t) {
            oDays.innerHTML = showTime.fillZero( t.nowDays, 3 ).split('');
            oHours.innerHTML = showTime.fillZero( t.nowHours ).split('');
            oMinutes.innerHTML = showTime.fillZero( t.nowMinutes ).split('');
            oSeconds.innerHTML = showTime.fillZero( t.nowSeConds ).split('');
        }else {
            showTime = null;
            clearInterval( timeId );
        }
    }, 1000);
}
autoPlay();
</script>
</body>
</html>
View Code

 以上就是倒计时的实现，功能上是有些单一，但是很是方便灵活。

 

 posted on 2013-11-23 12:09  琦恒  阅读(1384)  评论(8)  编辑  收藏  举报