初学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. 玩转Web之servlet(五)---- 怎样解决servlet的线程安全问题

    servlet默认是存在线程安全问题的,但是说白了,servlet的线程安全问题实际上就是多线程的线程安全问题,因为servlet恰巧是一个多线程才会出现安全性问题. 浏览器每次通过http协议去提交 ...

  2. javascript焦点图（能够自己主动切换 ）

    /* 思路总结: 1.实现图片滚动的function.鼠标经时候获取当前li的index.设置ndex自己主动递增的函数.实现淡入淡出效果的函数 2.整个实现效果一传递index为主线 3.我的编写代 ...

  3. UVA 12103 - Leonardo&#39;s Notebook(数论置换群)

    UVA 12103 - Leonardo's Notebook 题目链接 题意:给定一个字母置换B.求是否存在A使得A^2=B 思路:随意一个长为 L 的置换的k次幂,会把自己分裂成gcd(L,k) ...

  4. ehcache.xml设置（转）

    <ehcache xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLoc ...

  5. RH033读书笔记(2)-Lab 3 Getting Help with Commands

    Lab 3 Getting Help with Commands Sequence 1: Using the Help Tools 1. man -f keyword whatis keyword l ...

  6. MATLAB描绘极坐标图像——polar

    polar可用于描绘极坐标图像. 最简单而经常使用的命令格式:POLAR(THETA, RHO)  当中,THETA是用弧度制表示的角度,RHO是相应的半径. 例: a=-2*pi:.001:2*pi ...

  7. JS弄ASP.NET(C#)在页GridView信息选择行

    做web发展还是新手我,为了之前获得Gridview中间值,它是通过服务器端控件通过第一Gridview将数据保存到服务器,当一个服务器,然后绑定的隐藏字段,在通过的js阅读隐藏字段值,如今,这种方法 ...

  8. 使用 svn+maven+jenkins(hudson)+Publish Over SSH plugins 构建持续集成及自动远程发布体系(转)

    1.安装jenkins 2.浏览器访问jenkins主页 http://192.168.0.1:8080/,点击“系统管理” 3.在插件管理中,安装Publish Over SSH插件 4.在系统设置 ...

  9. Cocos2d-x 3.x plist+png 做动画

    ***************************************转载请注明出处:http://blog.csdn.net/lttree************************** ...

  10. jsp、Servlet相关知识介绍(转)

    1.servlet生命周期 所谓生命周期,指的是servlet容器如何创建servlet实例.分配其资源.调用其方法.并销毁其实例的整个过程. 阶段一: 实例化(就是创建servlet对象,调用构造器 ...