初学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. Asp.net MVC4 +EF6开发

    Asp.net MVC4 +EF6开发的个人网站源码和介绍(仅供新手学习) 本项目是我去年利用业余时间开发的,采用的是asp.net mvc 4 +EF6+三层架构,适合新手进行学习,高手就没有什么价 ...

  2. 创建Oracle的用户 create user scott identified by tiger;

    在命令行里sqlplus 以system身份登录,password是自己设的system C:\Users\Administrator>sqlplus SQL*Plus: Release 10. ...

  3. Android新建项目后src下没有自动生成文件

    最近开始学Android了,按照教材新建了一个项目,发现src下没有自动生成文件,怎么回事呢? 出现这种可能的原因很可能是ADT与SDK版本不同,造成不兼容. 在ADT(或者eclipse)中的hel ...

  4. .NET应用架构设计—工作单位模式（摆脱程序代码的重要思想，反击DDD）

    阅读文件夹: 1.背景介绍 2.过程式代码的真正困境 3.工作单元模式的简单演示样例 4.总结 1.背景介绍 一直都在谈论面向对象开发.可是开发企业应用系统时.使用面向对象开发最大的问题就是在于,多个 ...

  5. 一个可以跑的Hadoop的WordCount程序

    搭个新环境时总要折腾一下,于是干脆记下来. 程序: package com.my; import java.io.IOException; import java.util.Iterator; imp ...

  6. 第四-generation音频：互联网智能声音会火

    我把声音分成四个年龄:传统的立体声插头线-蓝牙音响-wifi发出声音-智能声音. 传统的立体声插头线:传统的声音,您必须使用电缆和其他输入源.这样的声音是现在市场上最流行的音频上. 蓝牙音响:蓝牙无线 ...

  7. 基于nodejs 的微信 JS-SDK 简单应用

    2015 是 Hybrid App 崛起之年 ,Web App 和 Native App 各有其强大之处,也有着致命的缺点,人们一边追求native流畅的用户体验,一边同时期望产品能够快速的迭代更新, ...

  8. POJ 3126 Prime Path(BFS 数字处理)

    意甲冠军  给你两个4位质数a, b  每次你可以改变a个位数,但仍然需要素数的变化  乞讨a有多少次的能力,至少修改成b 基础的bfs  注意数的处理即可了  出队一个数  然后入队全部能够由这个素 ...

  9. 一步一步学习ASP.NET 5 (三）- 认识新的Web结构

    编者语 : 今天微软的两大盛事,早上有久违的Microsoft HEC 2015 晚上有DotnetConf 2015.假若你做微软的技术怎么能够错过呢?说说我的连载吧,前两篇分别介绍了ASP.NET ...

  10. Visual Studio Team Services使用教程--默认团队checkin权限修改