- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title> JS Timer </title>
- <meta name="author" content="caikanxp" />
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <style type="text/css">
- * {font-family: 宋体;}
- </style>
- <script type="text/javascript">
- <!--
- (function() {
- var Timer = function(destTime, interval, onTimeCount, onTimeUp) {
- this.destTime = destTime || new Date();
- this.interval = interval || 100;
- this.onTimeCount = onTimeCount;
- this.onTimeUp = onTimeUp;
- };
- Timer.prototype.run = function(interval) {
- var intervalinterval = interval || this.interval;
- var timer = this;
- if (!this.intervalId) {
- this.intervalId = window.setInterval(function() {
- var now = new Date();
- var time = timer.destTime - now;
- var remainder = new Remainder(time);
- if (typeof timer.onTimeCount == 'function') {
- timer.onTimeCount(timer, remainder);
- }
- if (time <= 0 && !timer.timeUp) {
- timer.timeUp = true;
- if (typeof timer.onTimeUp == 'function') {
- timer.onTimeUp(timer, remainder);
- }
- } else if (time > 0) {
- timer.timeUp = false;
- }
- }, interval);
- }
- };
- Timer.prototype.stop = function() {
- if (this.intervalId) {
- window.clearInterval(this.intervalId);
- delete this.intervalId;
- }
- };
- var Remainder = function(time) {
- this.time = time;
- thisthis.negative = this.time < 0;
- thisthis.N = this.negative && '-' || ' ';
- thisthis.n = this.negative && '-' || '';
- this.I = Math.abs(time);
- thisthis.i = this.I % 1000;
- this.S = (this.I - this.i) / 1000;
- thisthis.s = this.S % 60;
- this.M = (this.S - this.s) / 60;
- thisthis.m = this.M % 60;
- this.H = (this.M - this.m) / 60;
- thisthis.h = this.H % 24;
- this.D = (this.H - this.h) / 24;
- thisthis.d = this.D % 7
- this.W = (this.D - this.d) / 7;
- thisthis.w = this.W;
- }
- Remainder.prototype.format = function(pattern) {
- var THIS = this;
- var isPattern = true;
- return pattern.replace(/''|'|n|N|w+|W+|d+|D+|h+|H+|m+|M+|s+|S+|i+|I+/g, function($0) {
- if ("''" == $0) {
- return "'";
- } else if ("'" == $0) {
- isPattern = !isPattern;
- return '';
- } else if (/n|N/.test($0)) {
- return THIS[$0];
- } else if (isPattern) {
- var v = new String(THIS[$0.charAt(0)]);
- var p = $0.length + 1 - v.length;
- pp = p > 1 ? new Array(p).join(0) : '';
- return p + v;
- } else {
- return $0;
- }
- });
- }
- window.Timer = Timer;
- })();
- function $(id){return document.getElementById(id);};
- function changeDest() {
- var dest;
- try {
- var m = parseInt(eval($('type').value));
- var n = parseFloat($('dest').value);
- nn = n * m;
- if (!isNaN(n)) {
- dest = new Date(new Date().getTime() + n);
- }
- } catch (e) {
- dest = new Date($('dest').value);
- }
- if (!isNaN(dest)) {
- myTimer.destTime = dest;
- }
- }
- window.onload = function() {
- window.myTimer = new Timer(null, 10, function(timer, remainder) {
- var dest = timer.destTime;
- var pattern = [];
- pattern.push("'离 " + dest.toString() + "'");
- pattern.push("'离 " + dest.toLocaleString() + "'");
- pattern.push("还有:NW 周 d 天 h 时 m 分 s 秒 i 毫秒");
- pattern.push("还有:ND 天 hh 时 mm 分 ss 秒");
- pattern.push("还有:nHH:mm:ss.iii");
- pattern.push("还有:nI 'ms'");
- $('output').innerHTML = remainder.format(pattern.join('<br />'));
- });
- myTimer.run();
- };
- //-->
- </script>
- </head>
- <body>
- <form onsubmit="changeDest(); return false;">
- <input type="submit" value="更改目标时间为" />
- <input type="text" id="dest" value="0.1" />
- <select id="type">
- <option value="1">毫秒之后</option>
- <option value="1000">秒之后</option>
- <option value="1000*60" selected="selected">分钟之后</option>
- <option value="1000*60*60">小时之后</option>
- <option value="1000*60*60*24">天之后</option>
- <option value="1000*60*60*24*7">周之后</option>
- <option value="date string">(指定时间 yyyy/MM/dd hh:mm:ss)</option>
- </select>
- </form>
- <input type="button" value="运行" onclick="myTimer.run();" />
- <input type="button" value="停止" onclick="myTimer.stop();" />
- <label for="autostop">
- <input type="checkbox" id="autostop" onclick="myTimer.onTimeUp = this.checked && function() {this.stop();} || null;" />到时后自动停止
- </label>
- <h1 id="output"></h1>
- </body>
- </html>
JS倒计时
最新推荐文章于 2023-12-25 11:55:05 发布