Baru -baru ini, kami melakukan Proyek Lotere Pengaturan Lima. Setiap periode memiliki periode pembelian lotere. Artinya, ketika pengguna membuka pengaturan ini lima halaman, remaintime akan dikirim dari server (waktu yang tersisa sebelum akhir periode lotere ini), dan kemudian kali ini akan disajikan kepada pengguna di sisi klien, memungkinkan pengguna untuk mendapatkan waktu yang tersisa dari periode lotere ini.
Prinsip implementasi cukup sederhana. Saya tidak akan membahas detailnya di sini. Jalankan kode berikut untuk melihat demo:
<! Doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = gbk"/> <title> index </iteme> <style type = "text/css"> EM {color:#f00;} </style> </head> </css "> {color:#f00;} </style> </head> </css"> {color:#f00;} </style> </head> </css "> {color:#f00;} </style> </head> </css"> EM {f00; type = "text/javascript"> var thetime = function () {this.init.Apply (ini, argumen);}; 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> jam <em> </em> menit <em> </em> detik'; 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 (); kembali; } that.hours = math.floor (obj.remaintime/3600); itu._remainder1 = obj.remaintime % 3600; itu.minutes = math.floor (that._remainder1/60); that.seconds = that._remainder1 % 60; var timer = that.timer = setInterval (function () {that.rendertime.apply (itu);}, 1000); }, buildparam: function (obj) {obj = {// container adalah wadah id dari simpul dom: obj.container || 'Container', tetap: nomor (obj.remaintime) || 0, // Callback setelah hitungan mundur diselesaikan Callback: obj.callback || fungsi baru}; kembalikan obj; }, resettime: function () {var that = this; that.container.innerHtml = "buntu"; }, // Refresh Time Rendertime: function () {// debugger; var itu = ini; 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) {// Jalankan callback that._callback (); } var bithandle = that.bithandle; var _hour = bithandle (that.hours); var _minute = bithandle (that.minute); var _second = bithandle (that.seconds); that.hourspace.innerhtml = _hour; itu.minutespace.innerHtml = _minute; that.secondspace.innerhtml = _second; }, // Untuk pemrosesan bit, pastikan untuk mengembalikan bithandle nomor dua digit: 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 (); }}; thetime baru ({// wadah ID wadah: 'remaintime', // Waktu yang tersisa dikembalikan oleh server, unit adalah detik waktu yang tersisa: 10000, // panggilan balik ketika hitungan mundur diselesaikan callback: function () {document.getElementById ('remaintime'). InnerHtml = 'deadline';