เมื่อเร็ว ๆ นี้เรากำลังทำโครงการลอตเตอรีของการจัดเรียงห้า แต่ละช่วงเวลามีระยะเวลาการซื้อลอตเตอรี นั่นคือเมื่อผู้ใช้เปิดการจัดเรียงนี้ห้าหน้าจะมีการส่งความอัปยศจากเซิร์ฟเวอร์ (เวลาที่เหลือก่อนสิ้นสุดระยะเวลาลอตเตอรีนี้) จากนั้นเวลานี้จะถูกนำเสนอต่อผู้ใช้ทางฝั่งไคลเอ็นต์ทำให้ผู้ใช้ได้รับเวลาที่เหลือของช่วงเวลาลอตเตอรีนี้
หลักการดำเนินการค่อนข้างง่าย ฉันจะไม่เข้าไปดูรายละเอียดที่นี่ เรียกใช้รหัสต่อไปนี้เพื่อดูการสาธิต:
<! doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = gbk"/> <title> ดัชนี </title> <style type = "text/css"> em {color:#f00; type = "text/javascript"> var thetime = function () {this.init.apply (สิ่งนี้, อาร์กิวเมนต์);}; thetime.prototype = {init: function (obj) {var that = this; obj = that.buildparam (obj); ที่ callback = obj.callback; var container = That.container = document.getElementById (obj.container); container.innerhtml = '<em> </em> ชั่วโมง <em> </em> นาที <em> </em> วินาที'; var hourspace = That.hourspace = container.getElementByTagname ('em') [0]; var minutespace = that.minutespace = container.getElementsByTagname ('em') [1]; var secondspace = that.secondspace = container.getElementByTagname ('em') [2]; if (obj.remaintime == 0) {that.resettime (); กลับ; } That.hours = math.floor (obj.remaintime/3600); That._remainder1 = obj.remaintime % 3600; that.minutes = math.floor (that._remainder1/60); นั่น Seconds = That._remainder1 % 60; var timer = That.timer = setInterval (function () {that.rendertime.apply (นั้น);}, 1,000); }, buildParam: ฟังก์ชัน (obj) {obj = {// container เป็น ID container ของ DOM Node: OBJ.Container || 'คอนเทนเนอร์', ยังคงอยู่: หมายเลข (obj.remaintime) || 0, // การโทรกลับหลังจากการนับถอยหลังเสร็จสิ้นการโทรกลับ: obj.callback || ฟังก์ชั่นใหม่}; คืน OBJ; }, ResetTime: function () {var that = this; นั่นคือ container.innerhtml = "Diedlined"; }, // 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 (นั่นคือ hours> 0) {That.hours--; }}} // สแตนด์บายถ้า (That.hours == 0 && that.minutes == 0 && that.seconds == 0) {// เรียกใช้การโทรกลับที่ _Callback (); } var bithandle = That.bithandle; var _hour = bithandle (that.hours); var _minute = bithandle (that.minutes); var _second = bithandle (นั่นวินาที); That.hourspace.innerhtml = _hour; That.minutespace.innerhtml = _minute; ที่ Secondspace.innerhtml = _Second; }, // สำหรับการประมวลผลบิตตรวจสอบให้แน่ใจว่าได้ส่งคืนตัวเลขสองหลัก Bithandle: ฟังก์ชั่น (num) {var str = num.toString (); if (str.length <2) {str = 0 + str; } return str; }, _callback: function () {var that = this; ClearInterval (that.timer); ที่ callback (); }}; thetime ใหม่ ({// container id container: 'remaintime', // เวลาที่เหลือกลับโดยเซิร์ฟเวอร์หน่วยคือวินาทีที่เหลือเวลา: 10,000, // การเรียกกลับเมื่อการนับถอยหลังเสร็จสมบูรณ์: function () {document.getElementId ('remaintime')