-
-
Save xiaojue/d42e69117b6d53ace81d56e454ce5141 to your computer and use it in GitHub Desktop.
countdown
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* @author xiaojue | |
* @date 20160420 | |
* @fileoverview 倒计时 | |
*/ | |
(function() { | |
function timer(delay) { | |
this._queue = []; | |
this.stop = false; | |
this._createTimer(delay); | |
} | |
timer.prototype = { | |
constructor: timer, | |
_createTimer: function(delay) { | |
var self = this; | |
var first = true; | |
(function() { | |
var s = new Date(); | |
for (var i = 0; i < self._queue.length; i++) { | |
self._queue[i](); | |
} | |
if (!self.stop) { | |
var cost = new Date() - s; | |
delay = first ? delay : ((cost > delay) ? cost - delay : delay); | |
setTimeout(arguments.callee, delay); | |
} | |
})(); | |
first = false; | |
}, | |
add: function(cb) { | |
this._queue.push(cb); | |
this.stop = false; | |
return this._queue.length - 1; | |
}, | |
remove: function(index) { | |
this._queue.splice(index, 1); | |
if(!this._queue.length){ | |
this.stop = true; | |
} | |
} | |
}; | |
function TimePool(){ | |
this._pool = {}; | |
} | |
TimePool.prototype = { | |
constructor:TimePool, | |
getTimer:function(delayTime){ | |
var t = this._pool[delayTime]; | |
return t ? t : (this._pool[delayTime] = new timer(delayTime)); | |
}, | |
removeTimer:function(delayTime){ | |
if(this._pool[delayTime]){ | |
delete this._pool[delayTime]; | |
} | |
} | |
}; | |
var delayTime = 1000; | |
var msInterval = new TimePool().getTimer(delayTime); | |
function countDown(config) { | |
var defaultOptions = { | |
fixNow: 3 * 1000, | |
fixNowDate: false, | |
now: new Date().valueOf(), | |
template: '{d}:{h}:{m}:{s}', | |
render: function(outstring) { | |
console.log(outstring); | |
}, | |
end: function() { | |
console.log('the end!'); | |
}, | |
endTime: new Date().valueOf() + 5 * 1000 * 60 | |
}; | |
for (var i in defaultOptions) { | |
if (defaultOptions.hasOwnProperty(i)) { | |
this[i] = config[i] || defaultOptions[i]; | |
} | |
} | |
this.init(); | |
} | |
countDown.prototype = { | |
constructor: countDown, | |
init: function() { | |
var self = this; | |
if (this.fixNowDate) { | |
var fix = new timer(this.fixNow); | |
fix.add(function() { | |
self.getNowTime(function(now) { | |
self.now = now; | |
}); | |
}); | |
} | |
var index = msInterval.add(function() { | |
self.now += delayTime; | |
if (self.now >= self.endTime) { | |
msInterval.remove(index); | |
self.end(); | |
} else { | |
self.render(self.getOutString()); | |
} | |
}); | |
}, | |
getBetween: function() { | |
return _formatTime(this.endTime - this.now); | |
}, | |
getOutString: function() { | |
var between = this.getBetween(); | |
return this.template.replace(/{(\w*)}/g, function(m, key) { | |
return between.hasOwnProperty(key) ? between[key] : ""; | |
}); | |
}, | |
getNowTime: function(cb) { | |
var xhr = new XMLHttpRequest(); | |
xhr.open('get', '/', true); | |
xhr.onreadystatechange = function() { | |
if (xhr.readyState === 3) { | |
var now = xhr.getResponseHeader('Date'); | |
cb(new Date(now).valueOf()); | |
} | |
}; | |
xhr.send(null); | |
} | |
}; | |
function _cover(num) { | |
var n = parseInt(num, 10); | |
return n < 10 ? '0' + n : n; | |
} | |
function _formatTime(ms) { | |
var s = ms / 1000, | |
m = s / 60; | |
return { | |
d: _cover(m / 60 / 24), | |
h: _cover(m / 60 % 24), | |
m: _cover(m % 60), | |
s: _cover(s % 60) | |
}; | |
} | |
var now = Date.now(); | |
new countDown({}); | |
new countDown({ | |
endTime: now + 8 * 1000 | |
}); | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
没有提供 添加不同的delayTime的接口。默认是delay 1s。可以在countDown的config里,添加delayTime的配置项吧~