码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript编写了一个计时器

时间:2015-01-06 11:47:20      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:

初学JavaScript,用JavaScript编写了一个计时器。

设计思想:

1、借助于Date()对象,来不断获取时间点;

2、然后用两次时间点的毫秒数相减,算出时间差;

3、累加时间差,这样就能把计时精确。


ps:

没在网上看到有这样的方法,一般都是用的setinterval,编程语言自带的延时,时间控制都有比較大的误差;

所以用系统时间相减的方法控制精准,并以本例显示三位毫秒的数字印证精确度,设置的是100毫秒,而Js本身会有误差;

这个程序能够避免不精确的问题。


本例互相交流用,并迫切希望得到的读者的想法及建议。


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var tFlag = 0;
			var tPass = 0;
			function timer(id) {
				if (tFlag != 0) {
					var tNew = new Date().getTime();
					tPass = tPass + (tNew - tFlag);
					tFlag = tNew;

				} else {
					tFlag = new Date().getTime();
				}
				setTimeout("timer('" + id + "')", 100);
				var ml = tPass % 1000;
				var sc = Math.floor((tPass / 1000) % 60);
				var mi = Math.floor((tPass / 1000 / 60) % 60);
				var hr = Math.floor((tPass / 1000 / 60 / 60) % 24);
				var dy = Math.floor(tPass / 1000 / 60 / 60 / 24);
				var info = dy + "天" + hr + "时" + mi + "分" + sc + "秒" + ml + "毫秒";
				document.getElementById(id).innerHTML = info;
			}
		</script>
	</head>
	<body>
		<button type="button" onclick="timer('ptime')">
			開始计时
		</button>
		<p id="ptime"></p>
	</body>
</html>


JavaScript编写了一个计时器

标签:

原文地址:http://www.cnblogs.com/mengfanrong/p/4205568.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!