JavaScript编写了一个计时器
初学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编写了一个计时器的更多相关文章
- javascript编写的一个完整全方位轮播图效果
1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...
- artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口
artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口 自适应内容 artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应 ...
- javascript编写一个简单的编译器(理解抽象语法树AST)
javascript编写一个简单的编译器(理解抽象语法树AST) 编译器 是一种接收一段代码,然后把它转成一些其他一种机制.我们现在来做一个在一张纸上画出一条线,那么我们画出一条线需要定义的条件如下: ...
- 基于JQuery.timer插件实现一个计时器
基于JQuery.timer插件实现一个计时器,需要的朋友可以参考下. 先去官网下载jQuery Timers插件 ,然后引用到html中.这里是1.2 version 复制代码代码如下: < ...
- 用Javascript编写Chrome浏览器插件
原文:http://homepage.yesky.com/62/11206062.shtml 用Javascript编写Chrome浏览器插件 2010-04-12 07:30 来源:天极网软件频道 ...
- javascript 编写的贪吃蛇
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Laravel 项目中编写第一个 Vue 组件
和 CSS 框架一样,Laravel 不强制你使用什么 JavaScript 客户端框架,但是开箱对 Vue.js 提供了良好的支持,如果你更熟悉 React 的话,也可以将默认的脚手架代码替换成 R ...
- canvas :原生javascript编写动态时钟
canvas :原生javascript编写动态时钟 此时针是以画布的中心为圆心: g.translate(width/2,width/2); 此函数是将画布的原点移到(width/2,wid ...
- JavaScript学习总结(十四)——JavaScript编写类的扩展方法
在JavaScript中可以使用类的prototype属性来扩展类的属性和方法,在实际开发当中,当JavaScript内置的那些类所提供的动态 ...
随机推荐
- A. Initial Bet(Codeforces Round #273)
A. Initial Bet time limit per test 1 second memory limit per test 256 megabytes input standard input ...
- ueditor文本编辑器的使用
1,头部引用 <link href="ueditor/themes/default/css/ueditor.css" rel="stylesheet" t ...
- unity简易小地图的实现(NGUI)
首先,我们在场景中添加一个摄像机叫做minimapCamera, 把上面的Audio Listener组件去掉,调整摄像机位置,将其置于角色正上方,如图 新建一个Texture我们叫做minimapT ...
- 国内外MD5在线解密网站
-http://www.cmd5.com/english.aspx (457,354,352,282) - http://www.md5crack.com - http://www.hashcheck ...
- Android - 用Fragments实现动态UI - 创建Fragment
你可以把fragment当作activity中的一个活动模块,它有自己的生命周期,自己接收输入消息,可以在activity运行的时候添加和删除(就像可以在其他activity中重用的"子ac ...
- 了解ASP.NET5 Web应用程序结构
本文参考ASP.NET5 官方文档 Understanding ASP.NET 5 Web Apps,加入了一些个人理解,理解不对的地方希望大家能指出,互相学习. ASP.NET 5 针对WEB编程引 ...
- 开源Math.NET基础数学类库使用(03)C#解析Matlab的mat格式
原文:[原创]开源Math.NET基础数学类库使用(03)C#解析Matlab的mat格式 开源Math.NET基础数学类库使用系列文章总目录: 1.开源.NET基础数学计算组件Math.NET( ...
- Windows在生产体系Android开关机动画
在Windows根据系统.办Android开关机动画,几个需要注意的问题: 1.压缩的选择 2.压缩的格式: 版权声明:本文博客原创文章,博客,未经同意,不得转载.
- Android ImageView分析并展开
版本号:1.0 日期:2014.6.11 2014.6.12 版权:© 2014 kince 转载注明出处 ImageView是开发中经常使用到的一个控件,也能够说是不可缺少的. 对于它的使用. ...
- HDU - 5186 - zhx's submissions (精密塔尔苏斯)
zhx's submissions Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others ...