初学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. bash组织成树数据结构

    君子也非独占,善假于物!bash也因此.昨天晚上,今天早上世界杯很精彩.晚上醒来看到不断地居住的电话.早上没有喝的水开始赞赏在英国和意大利的对决.也TM精彩,最后生下了罗马文化.意大利伊特鲁里亚文化获 ...

  2. 2048 Puzzle游戏攻略

    2048 Puzzle这是目前手机游戏的很火. 在地铁上经常看到的人玩这个游戏. 首先,简介2048 Puzzle游戏. 游戏界面是4X4广场格,每一方格可以放置在数字. 有四种移动数字的方法,向左. ...

  3. yum使用总结（转）

    安装一个软件时yum -y install httpd安装多个相类似的软件时yum -y install httpd*安装多个非类似软件时yum -y install httpd php php-gd ...

  4. 原生javascript与jquery 的比较

    JavaScript的优点和缺点: 优点: 性能:由于JavaScript运行在客户端,节省了web服务器的请求时间和带宽 轻量级的脚本语言,比较容易学习 运行在用户机器上,运行结果和处理相对比较快. ...

  5. 数据结构 - 双链表（C++）

    // ------DoublyLinkedList.h------ template <class T> class DNode { private: // 指向左.右结点的指针 DNod ...

  6. HDU 5050 Divided Land(进制转换)

    题意  给你两个二进制数m,n   求他们的最大公约数  用二进制表示  0<m,n<2^1000 先把二进制转换为十进制  求出最大公约数  再把结果转换为二进制  数比較大要用到大数 ...

  7. USB OTG简要

    1 介绍 随着USB2.0发布版本号,USB更受欢迎.它已成为一种标准接口.现在,USB它支持三种速度:低速(1.5Mb/s).全速(12Mb/s)速(480Mb/s),四种传输类型:块传输.同步传输 ...

  8. Android - 数据存储 －存储键值对

    如果你有少量的键值数据需要存储,可以使用SharedPreferencesAPI.SharedPreferences对象指向一个包含键值对的文件并且提供了一些简单的方法来读取它们.每个SharedPr ...

  9. 【程序员小助手】Emacs，最强编辑器，没有之一

    内容简介 1.Emacs简介 2.Emacs三个平台的安装与配置 3.自动补全插件 4.小编的Emacs配置文件 5.常用快捷方式 6.和版本控制系统的配合(以SVN为例) [程序员小助手]系列 在这 ...

  10. struts开发步骤

    说来惭愧.这是一个简单的struts折腾了很长一段时间,几乎相同的时间量就花了三天时间来解决.下面的步骤总结一下我开发:(我使用的是MyEclipse); 1.新建一个Exercise3的web Pr ...