JS倒计时

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <title> JS Timer </title>  
  5. <meta name="author" content="caikanxp" />  
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  7. <style type="text/css">  
  8.     * {font-family: 宋体;}   
  9. </style>  
  10. <script type="text/javascript">  
  11. <!--   
  12. (function() {   
  13.     var Timer = function(destTime, interval, onTimeCount, onTimeUp) {   
  14.         this.destTime = destTime || new Date();   
  15.         this.interval = interval || 100;   
  16.         this.onTimeCount = onTimeCount;   
  17.         this.onTimeUp = onTimeUp;   
  18.     };   
  19.     Timer.prototype.run = function(interval) {   
  20.         var intervalinterval = interval || this.interval;   
  21.         var timer = this;   
  22.         if (!this.intervalId) {   
  23.             this.intervalId = window.setInterval(function() {   
  24.                 var now = new Date();   
  25.                 var time = timer.destTime - now;   
  26.                 var remainder = new Remainder(time);   
  27.                 if (typeof timer.onTimeCount == 'function') {   
  28.                     timer.onTimeCount(timer, remainder);   
  29.                 }   
  30.                 if (time <= 0 && !timer.timeUp) {   
  31.                     timer.timeUp = true;   
  32.                     if (typeof timer.onTimeUp == 'function') {   
  33.                         timer.onTimeUp(timer, remainder);   
  34.                     }   
  35.                 } else if (time > 0) {   
  36.                     timer.timeUp = false;   
  37.                 }   
  38.             }, interval);   
  39.         }   
  40.     };   
  41.     Timer.prototype.stop = function() {   
  42.         if (this.intervalId) {   
  43.             window.clearInterval(this.intervalId);   
  44.             delete this.intervalId;   
  45.         }   
  46.     };   
  47.     var Remainder = function(time) {   
  48.         this.time = time;   
  49.         thisthis.negative = this.time < 0;   
  50.         thisthis.N = this.negative && '-' || ' ';   
  51.         thisthis.n = this.negative && '-' || '';   
  52.         this.I = Math.abs(time);   
  53.         thisthis.i = this.I % 1000;   
  54.         this.S = (this.I - this.i) / 1000;   
  55.         thisthis.s = this.S % 60;   
  56.         this.M = (this.S - this.s) / 60;   
  57.         thisthis.m = this.M % 60;   
  58.         this.H = (this.M - this.m) / 60;   
  59.         thisthis.h = this.H % 24;   
  60.         this.D = (this.H - this.h) / 24;   
  61.         thisthis.d = this.D % 7   
  62.         this.W = (this.D - this.d) / 7;   
  63.         thisthis.w = this.W;   
  64.     }   
  65.     Remainder.prototype.format = function(pattern) {   
  66.         var THIS = this;   
  67.         var isPattern = true;   
  68.         return pattern.replace(/''|'|n|N|w+|W+|d+|D+|h+|H+|m+|M+|s+|S+|i+|I+/g, function($0) {   
  69.             if ("''" == $0) {   
  70.                 return "'";   
  71.             } else if ("'" == $0) {   
  72.                 isPattern = !isPattern;   
  73.                 return '';   
  74.             } else if (/n|N/.test($0)) {   
  75.                 return THIS[$0];   
  76.             } else if (isPattern) {   
  77.                 var v = new String(THIS[$0.charAt(0)]);   
  78.                 var p = $0.length + 1 - v.length;   
  79.                 pp = p > 1 ? new Array(p).join(0) : '';   
  80.                 return p + v;   
  81.             } else {   
  82.                 return $0;   
  83.             }   
  84.         });   
  85.     }   
  86.     window.Timer = Timer;   
  87. })();   
  88.   
  89. function $(id){return document.getElementById(id);};   
  90. function changeDest() {   
  91.     var dest;   
  92.     try {   
  93.         var m = parseInt(eval($('type').value));   
  94.         var n = parseFloat($('dest').value);   
  95.         nn = n * m;   
  96.         if (!isNaN(n)) {   
  97.             dest = new Date(new Date().getTime() + n);   
  98.         }   
  99.     } catch (e) {   
  100.         dest = new Date($('dest').value);   
  101.     }   
  102.     if (!isNaN(dest)) {   
  103.         myTimer.destTime = dest;   
  104.     }   
  105. }   
  106. window.onload = function() {   
  107.     window.myTimer = new Timer(null, 10, function(timer, remainder) {   
  108.         var dest = timer.destTime;   
  109.         var pattern = [];   
  110.         pattern.push("'离 " + dest.toString() + "'");   
  111.         pattern.push("'离 " + dest.toLocaleString() + "'");   
  112.         pattern.push("还有:NW 周 d 天 h 时 m 分 s 秒 i 毫秒");   
  113.         pattern.push("还有:ND 天 hh 时 mm 分 ss 秒");   
  114.         pattern.push("还有:nHH:mm:ss.iii");   
  115.         pattern.push("还有:nI 'ms'");   
  116.         $('output').innerHTML = remainder.format(pattern.join('<br />'));   
  117.     });   
  118.     myTimer.run();   
  119. };   
  120. //-->  
  121. </script>  
  122. </head>  
  123. <body>  
  124. <form onsubmit="changeDest(); return false;">  
  125.     <input type="submit" value="更改目标时间为" />  
  126.     <input type="text" id="dest" value="0.1" />  
  127.     <select id="type">  
  128.         <option value="1">毫秒之后</option>  
  129.         <option value="1000">秒之后</option>  
  130.         <option value="1000*60" selected="selected">分钟之后</option>  
  131.         <option value="1000*60*60">小时之后</option>  
  132.         <option value="1000*60*60*24">天之后</option>  
  133.         <option value="1000*60*60*24*7">周之后</option>  
  134.         <option value="date string">(指定时间 yyyy/MM/dd hh:mm:ss)</option>  
  135.     </select>  
  136. </form>  
  137. <input type="button" value="运行" onclick="myTimer.run();" />  
  138. <input type="button" value="停止" onclick="myTimer.stop();" />  
  139. <label for="autostop">  
  140. <input type="checkbox" id="autostop" onclick="myTimer.onTimeUp = this.checked && function() {this.stop();} || null;" />到时后自动停止   
  141. </label>  
  142. <h1 id="output"></h1>  
  143. </body>  
  144. </html>  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值