Recently, we are doing the lottery project of Arrangement Five. Each period has a lottery purchase period. That is, when the user opens this Arrangement Five page, a remaintime will be sent from the server (the remaining time before the end of this lottery period), and then this time will be presented to the user on the client side, allowing the user to obtain the remaining time of this lottery period.
The implementation principle is quite simple. I won't go into details here. Run the following code to view the demo:
<!doctype html><html><head><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><title>index</title><style type="text/css">em{color:#f00;}</style></head><body><div id="remaintime"></div><script type="text/javascript">var TheTime = function(){ this.init.apply(this,arguments);};TheTime.prototype = { init: function(obj){ var that = this; obj = that.buildParam(obj); that.callback = obj.callback; var container = that.container = document.getElementById(obj.container); container.innerHTML = '<em></em>hour<em></em>minute<em></em>seconds'; var hourSpace = that.hourSpace = container.getElementsByTagName('em')[0]; var minuteSpace = that.minuteSpace = container.getElementsByTagName('em')[1]; var secondSpace = that.secondSpace = container.getElementsByTagName('em')[2]; if(obj.remaintime==0){ that.resetTime(); return; } that.hours = Math.floor(obj.remaintime/3600); that._remainder1 = obj.remaintime % 3600; that.minutes = Math.floor(that._remainder1/60); that.seconds = that._remainder1 % 60; var timer = that.timer = setInterval(function(){ that.renderTime.apply(that); },1000); }, buildParam: function(obj){ obj = { //Container is the id container of the dom node: obj.container || 'container', remains: Number(obj.remaintime) || 0, //Callback after countdown is completed callback: obj.callback || new Function }; return obj; }, resetTime: function(){ var that = this; that.container.innerHTML = "Deadlined"; }, //Refresh time renderTime: function(){ //debugger; var that = this; if(that.seconds>0){ that.seconds--; }else{ that.seconds = 59; if(that.minutes>0){ that.minutes--; }else{ that.minutes = 59; if(that.hours>0){ that.hours--; } } } //Standby if(that.hours==0 && that.minutes==0 && that.seconds==0){ //Execute callback that._callback(); } var bitHandle = that.bitHandle; var _hour = bitHandle(that.hours); var _minute = bitHandle(that.minutes); var _second = bitHandle(that.seconds); that.hourSpace.innerHTML = _hour; that.minuteSpace.innerHTML = _minute; that.secondSpace.innerHTML = _second; }, //For bit processing, make sure to return a two-digit number bitHandle: function(num){ var str = num.toString(); if(str.length<2){ str = 0 + str; } return str; }, _callback: function(){ var that = this; clearInterval(that.timer); that.callback(); }};new TheTime({ //Container id container: 'remaintime', //The remaining time returned by the server, unit is seconds remaining time: 10000, //Callback when countdown is completed callback: function(){ document.getElementById('remaintime').innerHTML = 'Deadline'; }});</script></body></html>