15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > 可以详细的讲一下平时网页上做活动时的倒计时是怎么实现的吗?

可以详细的讲一下平时网页上做活动时的倒计时是怎么实现的吗?

时间:2023-12-10 05:18:01 | 来源:网站运营

时间:2023-12-10 05:18:01 来源:网站运营

可以详细的讲一下平时网页上做活动时的倒计时是怎么实现的吗?:@李力的回答挺好的,就是代码撸的有点不具体,花了半小时,撸了一个包含上面所说的内容的具体实现。

(function() { function timer(delay) { var self = this; this._queue = []; setInterval(function() { for (var i = 0; i < self._queue.length; i++) { self._queue[i](); } }, delay); } timer.prototype = { constructor: timer, add: function(cb) { this._queue.push(cb); return this._queue.length - 1; }, remove: function(index) { this._queue.splice(index, 1); } }; var delayTime = 1000; var msInterval = new timer(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) { 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 });})();
可以在node下跑也可以在web下跑,不依赖任何东东,扩展性也还不错,支持配置定时与服务器对表,简易模板替换,结束时回调,公用定时器等优化与功能,不爱写注释,应该看代码很直观就能懂啦。

XD。







设置了同步时间机制,就请求的当前域首页,更新当前时间就ok了,可以把代码直接拷贝到控制台看效果。。。

当然你还可以继续丰富代码,比如还能随时关闭同步,随时替换模板样式和内容等等等等。。尽情的撸吧。。

关键词:活动,实现,详细,平时

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭