【积淀】封装一个简单的倒计时组件

写在前面

电商网站经常会用到倒计时组件，不过很多JavaScript基础薄弱的前端工程师第一反应是去网上下载一个组件，我知道jQuery针对timer就有很多插件，但尽管是压缩后的版本，代码量也有几kb，而且没事使用就要引用进来，有必要吗？就这么简单的一个功能。看我50行搞定它。

上代码

html结构

<div>
    <span>剩余时间</span>
    <span id="operate-timer-hours"></span>
    :
    <span id="operate-timer-minutes"></span>
    :
    <span id="operate-timer-seconds"></span>
</div>

js代码段

熟悉我编码模式的你应该知道怎么用到你的项目里吧 ^_^

Module_Timer:function(){
    var _leaveTime, //设定的倒计时秒数
        _hours, //剩余的小时数
        _minutes, //剩余的分钟数
        _seconds, //剩余的秒数
        _myTimer, //定时器对象
        _hourWrap=document.getElementById('operate-timer-hours'),
        _minuteWrap=document.getElementById('operate-timer-minutes'),
        _secondWrap=document.getElementById('operate-timer-seconds');

    /*倒计时函数*/
    function timer(){
        _myTimer=window.setInterval(function(){
            _seconds--;
            if(_seconds===0){
                _seconds=59;
                _minutes--;
                if(_minutes<=0){
                    _minutes=59;
                    _hours--;
                    if(_hours<=0){
                        window.clearInterval(_myTimer);
                    }
                    _hourWrap.innerText=formatTimeNumber(_hours);
                }
                _minuteWrap.innerText=formatTimeNumber(_minutes);
            }
            _secondWrap.innerText=formatTimeNumber(_seconds);
        },1000);
    }
    /*格式化时间数字*/
    function formatTimeNumber(number){
        number=number*1;
        if(number<10){
            number="0"+number;
        }
        return number;
    }
    return{
        /*模块初始化*/
        init:function(opts){
            _leaveTime=opts.leaveTime || 24*3600;
            /*根据剩余的时间计算小时数*/
            _hours=_leaveTime/3600>>0;
            /*计算剩余的分钟数*/
            _minutes=(_leaveTime-3600*_hours)/60>>0;
            /*计算剩余的秒数*/
            _seconds=_leaveTime%60;
            /*初始赋值*/
            _hourWrap.innerText=formatTimeNumber(_hours);
            _minuteWrap.innerText=formatTimeNumber(_minutes);
            _secondWrap.innerText=formatTimeNumber(_seconds);
            /*启动计时器*/
            timer();
        }
    }
}

调用模块

var timer=new Module_Timer()
timer.init({
    leaveTime:(23*60*60+25)
});

样式什么自己爱怎么写就怎么写，我那个项目里是这样的：