初学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编写了一个计时器的更多相关文章

  1. javascript编写的一个完整全方位轮播图效果

    1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...

  2. artDialog是一个基于javascript编写的对话框组件，它拥有精致的界面与友好的接口

    artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口 自适应内容 artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应 ...

  3. javascript编写一个简单的编译器(理解抽象语法树AST)

    javascript编写一个简单的编译器(理解抽象语法树AST) 编译器 是一种接收一段代码,然后把它转成一些其他一种机制.我们现在来做一个在一张纸上画出一条线,那么我们画出一条线需要定义的条件如下: ...

  4. 基于JQuery.timer插件实现一个计时器

    基于JQuery.timer插件实现一个计时器,需要的朋友可以参考下.   先去官网下载jQuery Timers插件 ,然后引用到html中.这里是1.2 version 复制代码代码如下: < ...

  5. 用Javascript编写Chrome浏览器插件

    原文:http://homepage.yesky.com/62/11206062.shtml 用Javascript编写Chrome浏览器插件 2010-04-12 07:30 来源:天极网软件频道 ...

  6. javascript 编写的贪吃蛇

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Laravel 项目中编写第一个 Vue 组件

    和 CSS 框架一样,Laravel 不强制你使用什么 JavaScript 客户端框架,但是开箱对 Vue.js 提供了良好的支持,如果你更熟悉 React 的话,也可以将默认的脚手架代码替换成 R ...

  8. canvas ：原生javascript编写动态时钟

    canvas :原生javascript编写动态时钟     此时针是以画布的中心为圆心: g.translate(width/2,width/2); 此函数是将画布的原点移到(width/2,wid ...

  9. JavaScript学习总结(十四)——JavaScript编写类的扩展方法

    在​J​a​v​a​S​c​r​i​p​t​中​可以使​用​类的p​r​o​t​o​t​y​p​e属性来​扩​展​类的属​性​和​方​法,在实际开发当中,当JavaScript内置的那些类所提供的动态 ...

随机推荐

  1. 设单链表中存放n个字符，试设计一个算法，使用栈推断该字符串是否中心对称

    转载请注明出处:http://blog.csdn.net/u012860063 问题:设单链表中存放n个字符.试设计一个算法,使用栈推断该字符串是否中心对称,如xyzzyx即为中心对称字符串. 代码例 ...

  2. ios-上拉电阻负载许多其他接口

    想尝试拉加载意识到有多少开始了他的研究之旅,我看了两天做出最终的界面. 之所以这么慢是由于,我不知道要将上拉出现的view放在哪.就能在scrollView拉究竟部的时候被拉出来.还有就是怎么拉出来之 ...

  3. Maven学习笔记(三) ：Maven使用入门

    编写POM:      Maven项目的核心是pom.xml.POM(Project Object Model,项目对象模型)定义了项目的基本信息,用于描写叙述项目怎样构建,声明项目依赖,等等.   ...

  4. 返璞归真 asp.net mvc (3) - Controller/Action

    原文:返璞归真 asp.net mvc (3) - Controller/Action [索引页] [源码下载] 返璞归真 asp.net mvc (3) - Controller/Action 作者 ...

  5. 认识node.js：express（一）

    express是node.js官方推荐的框架. 安装 npm install express -g 命令中的 “-g” 表示全局(global) 由于新版本(4.x.x)的express的命令集中到了 ...

  6. MongoDB时间处理问题

    MongoDB保存到数据库的时候,默认为UTC时间,在数据库保存时,会和当前时间有个间隔,差距为8小时. 在读取的时候,需要再次转换回来,比较麻烦. 其实,Mongo本身就已经提供了相应的处理方法,即 ...

  7. 七牛对用户使用webp图片格式的使用建议

    Qiniu 七牛问题解答 Chrome浏览器是可打开WebP格式的.可是并非全部的浏览器都支持webp格式,比如360.ie等浏览器是不支持的. WebP格式,谷歌(google)开发的一种旨在加快图 ...

  8. bzoj 3333: 排队计划 解决问题的方法

    [原标题] 3333: 排队计划 Time Limit: 20 Sec  Memory Limit: 128 MB Submit: 161  Solved: 71 [Submit][Status] D ...

  9. FireFox VS Chrome 之 调试篇

    一个完美的调试工具,FireBug! 精确跟踪每一步.仅仅要按下图所看到的,选择"脚本",然后在下方选择脚本所在的文件就可以对该文本的运行进行断点跟踪. 而且仅当一个线程运行结束后 ...

  10. windows下VC界面 DIY系列1----写给想要写界面的C++程序猿的话

    非常早就想写关于C++ UI开发的一系列博文,博客专栏刚审核通过,就立即開始刷博文,不能辜负自己的一番热血,我并非写界面的高手,仅仅想通过写博文提高我自己的技术积累,也顺便帮助大家解决界面开发的瓶颈. ...