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内置的那些类所提供的动态 ...
随机推荐
- Storm具体的解释(二)、成为第一Storm申请书
在全面介绍Storm之前,我们首先通过简单的Demo让我们来看看什么是整体感觉Storm. Storm执行模式: 本地模式(Local Mode): 即Topology(相当于一个任务,兴许 ...
- 【iOS】文件上传小记
iOS由该系统提供API可以实现可以实现文件的上传和下载,有两种方法来. NSURLConnection与NSURLSession. 当中NSURLConnection是使用非常久的的一种方式.NSU ...
- malloc使用方法
malloc使用方法 须要包括头文件: #include 'stdlib.h' 函数声明(函数原型): void *malloc(int size); 说明:malloc 向系统申请分配指定size个 ...
- JavaFX它ListView使用
ListView它是通过同一控制非.在JavaFX在.ListView此外,它拥有非常丰富的功能.下列.让我们来看看如何使用ListView. ListView位于javafx.scene.contr ...
- JFileChooser
http://www.cnblogs.com/dyllove98/archive/2012/03/05/2461895.html package swing.choose; import java.a ...
- gerrit git使用
有关git的參考资料 pro git中文版, 最好的git书籍 http://git-scm.com/book/zh 图解git http://marklodato.github.com/visual ...
- * 类描写叙述:字符串工具类 类名称:String_U
/****************************************** * 类描写叙述:字符串工具类 类名称:String_U * ************************** ...
- 允许Ubuntu14.04"保存"屏幕亮度值
Ubuntu / Debian 该系统有一个共同的问题,也就是说,每个引导.系统会打开你的屏幕亮度调至最高值. 我很奇怪,为什么14.04这一问题的版本号依然不动. 但是,我们可以做一个脚本Ubunt ...
- Freemarker详细解释
A概念 最经常使用的概念 1. scalars:存储单值 字符串:简单文本由单或双引號括起来. 数字:直接使用数值. 日期:通常从数据模型获得 布尔值:true或false,通常在<#if -& ...
- Android EventBus源代码解析 带你深入理解EventBus
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40920453,本文出自:[张鸿洋的博客] 上一篇带大家初步了解了EventBus ...