javascript倒计时功能实现代码
javascript倒计时功能实现代码
发布时间:2016-12-30 来源:查字典编辑
摘要:代码如下:复制代码代码如下:/***倒计时**@authorWadeYu*@date2012-04-2017:40*@copyrightbo...

代码如下:

复制代码 代码如下:

/**

* 倒计时

*

* @author WadeYu

* @date 2012-04-20 17:40

* @copyright boyaa.com

*/

var TimeCountDown = function( initTime ){

var day = 0;

var hour = 0;

var minute = 0;

var second = 0;

var timerId = 0;

var self = this;

var fixInitTime = function(){

initTime = parseInt(initTime);

if ( isNaN(initTime) || initTime < 0 ){

initTime = 0;

}

};

var fixZero = function(num){

return num < 10 ? ('0'+num) : num;

};

var calc = function(){

showCallback.call(self, [fixZero(day), fixZero(hour), fixZero(minute), fixZero(second)]);

if ( day === 0 && hour === 0 && minute === 0 && second === 0){

self.stop();

} else {

if (hour === 0 && day > 0){

hour = 24;

day--;

}

if (minute === 0 && hour > 0){

minute = 60;

hour--;

}

if (second === 0 && minute > 0){

second = 59;

minute--;

} else {

second--;

}

timerId = window.setTimeout(function(){

calc();

}, 1000);

}

};

var showCallback = function(){

alert('Please set show callback functions!');

};

var init = function(){

fixInitTime();

if ( initTime > 0 ){

day = Math.floor( (initTime / (24*60*60)) );

initTime -= day * 24*60*60;

hour = Math.floor( initTime / (60*60) );

initTime -= hour * 60*60;

minute = Math.floor( initTime / 60 );

second = initTime - minute * 60;

}

};

this.start = function(){

calc();

};

this.stop = function(){

timerId && window.clearTimeout(timerId);

};

this.setShowCallback = function(fn){

typeof(fn) === 'function' ? (showCallback = fn) : '';

};

init();

};

示例如下:

复制代码 代码如下:

<body>

<div id="timeCon"></div>

<script type="text/javascript">

var timeCountDown = new TimeCountDown(3 * 24 * 60 * 60);

timeCountDown.setShowCallback(function( obj ){ // [天, 小时, 分, 秒]

document.getElementById('timeCon').innerHTML = obj[0] + ":" + obj[1] + ":" + obj[2] + ':' + obj[3];

});

timeCountDown.start();

</script>

</body>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类