`
yangtao309
  • 浏览: 64882 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

js倒计时

prototypejQueryXHTMLHTML 
阅读更多
要用Js写一个倒计时功能
在Js里面用好window.setTimeOut和clearInterval即可
简单应用是可以写出来的
如何写成一个通用的timer类呢
下面是一位js达人贡献的(- ^ -)
---初版 

<!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 interval = 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;
		this.negative = this.time < 0;
		this.N = this.negative && '-' || ' ';
		this.n = this.negative && '-' || '';
		this.I = Math.abs(time);
		this.i = this.I % 1000;
		this.S = (this.I - this.i) / 1000;
		this.s = this.S % 60;
		this.M = (this.S - this.s) / 60;
		this.m = this.M % 60;
		this.H = (this.M - this.m) / 60;
		this.h = this.H % 24;
		this.D = (this.H - this.h) / 24;
		this.d = this.D % 7
		this.W = (this.D - this.d) / 7;
		this.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;
				p = 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);
		n = 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>


希望可以一起学习加以改进适合在自己的应用中

下面带有附近---
还在整理加强版本中......
分享到：
| ictclas linux开发注意事项
评论
7 楼 blackbat 2010-06-03  
javaTo 写道
遇到alter就杯具了

确实如此，之前做一个考试系统也是，倒计时，结果弹了个警告框，时间停止了。。。
后面全改用层来显示提示信息。。
6 楼 學會☆～Snow 2010-06-01  
不行。没用处
5 楼 chenzixin 2010-06-01  
如果你的站点用到jQuery，还是推荐用JQ插件实现倒计时吧！
4 楼 javaTo 2010-06-01  
遇到alter就杯具了
3 楼 ping2010 2010-05-31  
  写个东西也不好好的写！！不要误会我不是怀疑你的能力，是怀疑的习惯很人品！
2 楼 yangtao309 2010-05-31  
这个是je的代码模板问题所致
thisthis 就是this而已
还有intervalinterval是interval
1 楼 birdbiena 2010-05-31  
好像不太好用，thisthis这个变量是什么
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics