Récemment, nous faisons le projet de loterie d'arrangement cinq. Chaque période a une période d'achat de loterie. Autrement dit, lorsque l'utilisateur ouvrira cet arrangement de cinq pages, un temps de cheminée sera envoyé à partir du serveur (le temps restant avant la fin de cette période de loterie), puis cette fois sera présenté à l'utilisateur du côté client, permettant à l'utilisateur d'obtenir le temps restant de cette période de loterie.
Le principe de mise en œuvre est assez simple. Je n'entrerai pas dans les détails ici. Exécutez le code suivant pour afficher la démo:
<! doctype html> <html> <éadf> <meta http-equiv = "contenu-type" contenu = "text / html; charset = gbk" /> <t titre> index </ title> <style type = "text / css"> em {colore: # f00;} </ style> </ad> <pody> <dody> <vy> <vad id = "ref00;} </ style> </ad> <pody> <dody> <div id =" rementime "> </ </ style> </adg> <pody> <dody> <vody> <vad> <div id =" remerwew 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 conteneur = that.connainer = document.getElementById (obj.container); contener.innerhtml = '<em> </em> hour <em> </em> minute <em> </em> secondes'; var henspace = that.hourspace = contener.getElementsByTagName ('em') [0]; var minutespace = that.minutespace = contener.getElementsByTagName ('em') [1]; var secondeSpace = that.secondSpace = contener.getElementsByTagName ('em') [2]; if (obj.remaintime == 0) {that.resettime (); retour; } 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 = {// conteneur est le conteneur d'ID du nœud Dom: obj.contiver || «conteneur», reste: numéro (obj.remaintime) || 0, // Rappel après le compte à rebours terminé: obj.callback || nouvelle fonction}; retour 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--; }}} // en veille if (that.hours == 0 && that.minutes == 0 && that.seconds == 0) {// exécuter le 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; que.Minutespace.innerhtml = _Minute; that.secondspace.innerhtml = _second; }, // Pour le traitement des bits, assurez-vous de renvoyer un nombre à deux chiffres Bithandle: fonction (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', // Le temps restant renvoyé par le serveur, l'unité est des secondes restantes: 10000, // Callback Lorsque le compte à rebours est terminé: function () {Document.getElementById ('Remaintime'). InnerHtml = 'Deadline';}}); </ / script>