최근에, 우리는 배열 5의 복권 프로젝트를 수행하고 있습니다. 각 기간에는 복권 구매 기간이 있습니다. 즉, 사용자 가이 배열 5 페이지를 엽니다면 서버에서 기억이 나옵니다 (이 복권 기간이 끝나기 전 남은 시간), 이번에는 클라이언트 측의 사용자에게 제시되어 사용자 가이 복권 기간의 나머지 시간을 얻을 수 있습니다.
구현 원리는 매우 간단합니다. 나는 여기서 세부 사항으로 들어 가지 않을 것입니다. 데모를보기 위해 다음 코드를 실행하십시오.
<! docType html> <html> <head> <meta http-equiv = "content-type"content = "text/html; charset = gbk"/> <title> index </title> <style type = "text/css"> css "> css"> css "> css"> css "> css"> em {f00;} 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> 시간 <em> </em> 분 <em> </em> 초'; var hourspace = that.hourspace = container.getElementsByTagName ( 'em') [0]; var mindspace = that.minutespace = container.getElementsByTagName ( 'em') [1]; var SecondSpace = that.secondspace = container.getElementsByTagName ( '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); that.seconds = that._remainder1 % 60; var timer = that.timer = setInterval (function () {that.rendertime.apply (that);}, 1000); }, buildParam : function (obj) {obj = {// 컨테이너는 dom 노드의 ID 컨테이너입니다 : obj.container || '컨테이너', 잔해 : 숫자 (obj.remaintime) || 0, // 카운트 다운이 완료된 후 콜백 콜백 : obj.callback || 새로운 기능}; 반환 obj; }, restime : function () {var that = this; that.container.innerhtml = "Deadlined"; }, // 새로 고침 시간 렌더 타임 : function () {// 디버거; 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-; }}} // 대기 if (that.hours == 0 && that.minutes == 0 && that.seconds == 0) {// 콜백을 실행 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; }, // 비트 처리를 위해, 2 자리 숫자 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 ({// 컨테이너 ID 컨테이너 : 'Remaintime', // 서버에서 남은 시간은 서버에서 반환됩니다. 단위는 몇 초 남았습니다.