javascript毫秒计时器_JS制作计时器毫秒
1、需要一个放置计时器的容器以及控制按钮
这里我使用一个input框:
1
开始、暂停、重置三个按钮
开始
暂停
重置
2、js实现(不依赖任何插件)
//初始化变量
var hour,minute,second;//时 分 秒
hour=minute=second=0;//初始化
var millisecond=0;//毫秒
var int;
//重置函数
function Reset()
{
window.clearInterval(int);
millisecond=hour=minute=second=0;
document.getElementById('timetext').value='00时00分00秒000毫秒';
}
//开始函数
function start()
{
int=setInterval(timer,50);//每隔50毫秒执行一次timer函数
}
//计时函数
function timer()
{
millisecond=millisecond+50;
if(millisecond>=1000)
{
millisecond=0;
second=second+1;
}
if(second>=60)
{
second=0;
minute=minute+1;
}
if(minute>=60)
{
minute=0;
hour=hour+1;
}
document.getElementById('timetext').value=hour+'时'+minute+'分'+second+'秒'+millisecond+'毫秒';
}
//暂停函数
function stop()
{
window.clearInterval(int);
}
document.getElementById('timetext').innerHTML = minute + '分'
+ second + '秒' + millisecond / 10 + '毫秒'; 直接输出到页面上 不需要input
高手到此为止,有疑问的继续
除了按钮触发的函数外,上面涉及到JavaScript两个很重要的函数:
setInterval函数方法可按照指定的周期(以毫秒计)来调用函数或计算表达式
上述代码中setInterval(timer,50)表示以50毫秒的间隔周期性的执行timer函数,也就是每隔50毫秒执行一次timer函数,一直继续。
当我们开始计时就调用setInterval(timer,50)函数来不停的执行timer函数,那么如何暂停呢?
clearInterval(id_of_setinterval)函数用来暂停setInterval的周期性执行,参数为setInterval(timer,50)函数返回的ID,即上述代码中的int
实际效果为:
当然了,可以根据需要应用到不同地方。
javascript毫秒计时器_JS制作计时器毫秒相关推荐
- html5script计时器,javascript实现秒表计时器的制作方法
本文实例为大家分享了js秒表计时器的制作代码,供大家参考,具体内容如下 具体代码: Document div{margin-top:40px;margin-left:25px;margin-botto ...
- 【java多种方式实现计时器】时分秒毫秒,附带代码+运行截图
计时器 方式一:Duration 方式二:currentTimeMillis 方式三:StopWatch 方式一:Duration 方式二:currentTimeMillis 方式三:StopWatc ...
- android 倒计时跳过,倒计时器跳过一些毫秒
正如您可以看到最后一次呼叫onTick正在发生2秒钟,然后接下来的呼叫将近2秒钟后.倒计时器跳过一些毫秒 @Override public void onCreate(Bundle savedInst ...
- 微信小程序使用 setInterval 制作计时器后台延迟问题
微信小程序使用 setInterval 制作计时器后台延迟问题 之前参加2020年微信小程序应用开发大赛的时候写了一个用于校园足球的微信小程序--踢在浙大. 在小程序的设计过程中出现了一个裁判工具的功 ...
- micro:bit用蜂鸣器制作计时器
micro:bit小主板一般初学Python和图形编程的人都很喜欢,其中还有很多插件,声呐等. 今天我来教大家micro:bit连接蜂鸣器制作计时器. 1.蜂鸣器的连接方法. 打开micro:bit的 ...
- 服务器计时器、Windows 计时器和线程计时器
原文地址:MSDN Visual Studio 和 .NET Framework 中包含三个计时器控件: 可添加到"工具箱"中的基于服务器的计时器 始终位于"工具箱&qu ...
- HTML——js设置计时器和清除计时器的方法
js中的计时器 1.setTimeout计时器 setTimeout(要执行的方法,时间单位 (毫秒)) 这里的执行方法通常是匿名函数(函数=方法) setTimeout(function () {c ...
- 【Arduino计时器】Arduino计时器使用TM1637显示时间
Arduino计时器使用TM1637显示时间 本文介绍如何使用Arduino制作计时器,并使用TM1637显示时间.计时器使用2个GPIO接口作为启动计时和停止计时的按键,并要求计时精度达到0.01秒 ...
- HTML5期末大作业:在线电影网站设计——电影从你的全世界路过(4页) HTML+CSS+JavaScript 大学生电影网页制作教程 学生HTML电影网页设计作业成品 简单网页制作代码 学生影视
HTML5期末大作业:在线电影网站设计--电影从你的全世界路过(4页) HTML+CSS+JavaScript 大学生电影网页制作教程 学生HTML电影网页设计作业成品 简单网页制作代码 学生影视网页 ...
- mysql时间转成毫秒_mysql时间字段转换为毫秒格式
下面是转载的关于MySQL毫秒.微秒精度时间处理的两段篇章,留给自己和供大家参考~~ 一.MySQL 获得毫秒.微秒及对毫秒.微秒的处理 MySQL 较新的版本中(MySQL 6.0.5),也还没有产 ...
最新文章
- 前端那些事之layui篇---实现栅格功能
- java什么时候可能产生内存溢出_哪些场景会产生OOM?怎么解决?
- element ui后台html_GitHub上10个开源且优秀的后台管理系统UI面板
- sql server常用函数、常用语句
- python 类和对象 经常用吗_python基础教程之对象和类的实际运用
- c++ 获取文件夹创建时间_手把手教学免费创建个人网站
- [转载] Java获取泛型T的类型 T.class
- 单元格填充为0的html,Excel如何在数据信息表中把空单元格填写为数字“0”
- 商汤物语:全球最大AI独角兽的雄心与优雅
- 编译原理(陈火旺)-中国大学慕课05 语法分析——自下而上分析5 第2次单元测试
- fps透视基础-d3d绘制-绘制文字-绘制方框-绘制连线
- Pandas 重置索引深度总结
- 打造高可用iOS进度条
- BurningStudioPortable刻录CD步骤
- CSDN周赛第32期:赢图书《金融级IT架构:数字银行的云原生架构解密》 和定制周边
- 关于apple watch(苹果表)
- 完全弹性碰撞公式推导
- BC26 OPEN开发之--LWM2M连接分析
- VisualC++开发GIS系统
- 勾股定理的证明(转载)