初学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. A. Initial Bet(Codeforces Round #273)

    A. Initial Bet time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  2. ueditor文本编辑器的使用

    1,头部引用 <link href="ueditor/themes/default/css/ueditor.css" rel="stylesheet" t ...

  3. unity简易小地图的实现(NGUI)

    首先,我们在场景中添加一个摄像机叫做minimapCamera, 把上面的Audio Listener组件去掉,调整摄像机位置,将其置于角色正上方,如图 新建一个Texture我们叫做minimapT ...

  4. 国内外MD5在线解密网站

    -http://www.cmd5.com/english.aspx (457,354,352,282) - http://www.md5crack.com - http://www.hashcheck ...

  5. Android - 用Fragments实现动态UI - 创建Fragment

    你可以把fragment当作activity中的一个活动模块,它有自己的生命周期,自己接收输入消息,可以在activity运行的时候添加和删除(就像可以在其他activity中重用的"子ac ...

  6. 了解ASP.NET5 Web应用程序结构

    本文参考ASP.NET5 官方文档 Understanding ASP.NET 5 Web Apps,加入了一些个人理解,理解不对的地方希望大家能指出,互相学习. ASP.NET 5 针对WEB编程引 ...

  7. 开源Math.NET基础数学类库使用(03)C#解析Matlab的mat格式

    原文:[原创]开源Math.NET基础数学类库使用(03)C#解析Matlab的mat格式 开源Math.NET基础数学类库使用系列文章总目录:   1.开源.NET基础数学计算组件Math.NET( ...

  8. Windows在生产体系Android开关机动画

    在Windows根据系统.办Android开关机动画,几个需要注意的问题: 1.压缩的选择 2.压缩的格式: 版权声明:本文博客原创文章,博客,未经同意,不得转载.

  9. Android ImageView分析并展开

    版本号:1.0  日期:2014.6.11 2014.6.12 版权:© 2014 kince 转载注明出处   ImageView是开发中经常使用到的一个控件,也能够说是不可缺少的. 对于它的使用. ...

  10. HDU - 5186 - zhx&#39;s submissions (精密塔尔苏斯)

    zhx's submissions Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others ...