初学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. 检验身份证的正确性(Golang版本)

    // CheckID_card project main.go package main /* * ai -> a1 , a2, a3, a4, a5, a6... a17 (a18 是校验码) ...

  2. 【原创】一个基于简单剪枝的DFS解数独程序

    问题来源:leetCode Sudoku Solver Write a program to solve aSudoku puzzle by filling the empty cells. Empt ...

  3. 水声通信（传声）于iOS、Android在情景-depth分析（包括一些声通信源）

    最近的水声通信非常热,特别是,非常嵌入式设备备受瞩目使用,前段时间公布了声通信部分源代码(iOS和Android版本号.下载源的最新版本:点击打开链接 http://download.csdn.net ...

  4. WPF 绑定

    WPF里分三种Binding:Binding, PriorityBinding, MultiBinding,这三种Binding的基类都是BindingBase,而BindingBase又继承于Mar ...

  5. android studio 怎样正确导入jar

    近期又開始做android,使用android studio中遇到导入jar没有反应的问题,查了下资料实践攻克了,现特地写一下博客.希望对刚刚的使用的android studio的朋友有帮助. 1.先 ...

  6. SP2010 3D标签云Web部分--很酷的效果，强烈推荐！！

    SP2010 3D标签云Web部分--很酷的效果.强烈推荐! ! 项目描述叙事         基于简单Flash的3D标签云Web部件.SP Server 2010使用. 建立在内置标签云Web部件 ...

  7. java编程规范之java命名规范

    想要成为一个优秀的程序员,首先要培养良好的编程习惯,为了提高代码的可读性,必须有好的命名规范. 这篇文章是小编结合网上的很多资料整理出来的,若有不当或错误的地方,欢迎大家指正 在文章开始前,为方便阅读 ...

  8. Linux Kernel(Android) 加密算法汇总（三）-应用程序调用内核加密算法接口

    于Linux Kernel(Android) 加密算法总结(cipher.compress.digest)文章中.介绍了怎样在内核中增加三种不同类型的内核加密算法, 并给出了在内核模块中怎样调用他们的 ...

  9. 江湖急救篇：slave 复制错误

    这样的事情是,我们DBA的一个暂时表,导致复制出错 老大给力,江湖救急. 关于该參数.淘宝丁奇写了篇文章还不错:MySQL小误区:关于set global sql_slave_skip_counter ...

  10. 妈蛋：kinMaxShow旋转木马异常，WebUploader图片上传坑爹，图像被压缩

    今天晚上在改造轮播图. 原来的代码是这种: <div> <img src="${static}/image/index/banner/`.jpg" /> & ...