Recientemente, estamos haciendo el proyecto de lotería de Arreglo Five. Cada período tiene un período de compra de lotería. Es decir, cuando el usuario abre esta disposición de cinco páginas, se enviará una reminitación desde el servidor (el tiempo restante antes del final de este período de lotería), y luego este tiempo se presentará al usuario en el lado del cliente, lo que permite al usuario obtener el tiempo restante de este período de lotería.
El principio de implementación es bastante simple. No entraré en detalles aquí. Ejecute el siguiente código para ver la demostración:
<! Doctype html> <html> <fead> <meta http-equiv = "content-type" content = "text/html; charset = gbk"/> <title> index </title> <style type = "text/css"> em {color:#f00;} </syle> </head> <body> <viD = "RematiMe" type = "text/javascript"> var theTime = function () {this.init.apply (this, argumentos);}; thetime.prototype = {init: function (obj) {var that = this; obj = that.buildParam (obj); que.callback = obj.callback; var contenedor = that.container = document.getElementById (obj.container); contenedor.innerhtml = '<em> </em> hora <em> </em> minuto <em> </em> segundos'; var sougspace = that.hourSpace = Container.getElementsBytagName ('em') [0]; var minutespace = that.minutespace = contenedor.getElementsBytagName ('em') [1]; var SecondSpace = that.secondSpace = Container.getElementsBytagName ('em') [2]; if (obj.remaintime == 0) {that.resettime (); devolver; } that.hours = Math.floor (obj.remaintime/3600); eso. que.mines = Math.floor (que._remainder1/60); eso. var timer = that.timer = setInterval (function () {that.renderTime.apply (que);}, 1000); }, buildParam: function (obj) {obj = {// El contenedor es el contenedor de identificación del nodo DOM: obj.container || 'Container', restos: número (obj.remaintime) || 0, // devolución de llamada después de que se complete la cuenta regresiva: OBJ.Callback || nueva función}; regresar obj; }, resettime: function () {var that = this; que.container.innerhtml = "muerto"; }, // Actualización de tiempo renderTime: function () {// debugger; var que = esto; if (that.seconds> 0) {that.seconds--; } else {that.seconds = 59; if (that.mines> 0) {that.mines--; } else {that.minutes = 59; if (eso.hurs> 0) {that.hurss--; }}} // standby if (that.hours == 0 && that.minutes == 0 && that.seconds == 0) {// Ejecute Callback that._callback (); } var bithandle = that.bithandle; var _Hour = bithandle (que.hurss); var _minute = bithandle (que.mines); var _second = bithandle (que.seconds); que.hourspace.innerhtml = _Hour; que.minutespace.innerhtml = _minute; eso.secondspace.innerhtml = _second; }, // Para el procesamiento de bits, asegúrese de devolver un número de dos dígitos bithandle: function (num) {var str = num.ToString (); if (str.length <2) {str = 0 + str; } return str; }, _callback: function () {var que = this; ClearInterval (que.timer); que.callback (); }}; nuevo thetime ({// contenedor de identificación de contenedor: 'reminuta', // El tiempo restante devuelto por el servidor, la unidad es el tiempo restante de segundos: 10000, // Callback cuando la cuenta regresiva está completa: function () {document.getElementById ('remaintime'). Innerhtml = 'Waitline';}}}); </script> <body> </httml>