JS制作计时器(毫秒级),简单、易懂
2017-11-02 15:35
621 查看
惯例,我会以最简单,最有条理,最快速的方式让各位了解计时器的原理
开始、暂停、重置三个按钮
高手到此为止,有疑问的继续
除了按钮触发的函数外,上面涉及到JavaScript两个很重要的函数:
setInterval函数方法可按照指定的周期(以毫秒计)来调用函数或计算表达式
上述代码中setInterval(timer,50)表示以50毫秒的间隔周期性的执行timer函数,也就是每隔50毫秒执行一次timer函数,一直继续。
当我们开始计时就调用setInterval(timer,50)函数来不停的执行timer函数,那么如何暂停呢?
clearInterval(id_of_setinterval)函数用来暂停setInterval的周期性执行,参数为setInterval(timer,50)函数返回的ID,即上述代码中的int
实习效果为:
当然了,可以根据需要应用到不同地方。
1、需要一个放置计时器的容器以及控制按钮
这里我使用一个input框:<input type="text" id="timetext" value="00时00分00秒" readonly><br>
开始、暂停、重置三个按钮
<button type="button" onclick="start()">开始</button> <button type="button" onclick="stop()">暂停</button> <button type="button" onclick="Reset()">重置</button>
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); }
高手到此为止,有疑问的继续
除了按钮触发的函数外,上面涉及到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之——简单的带暂停计时器
- 利用js制作简单的时钟
- 用js制作简单的发布功能
- 自己用html、js、ajax、php制作的简单网页版计算器。
- JS简单的计时器
- 用vue写一个商城的上货组件(简单易懂版,50行js实现效果)
- js制作日历1----------简单的日历
- js制作简单的轮播图
- css+js制作简单的轮播图效果
- C#如何制作水晶报表简单易懂示例 转
- JS简单仿QQ聊天工具的制作
- JS的apply方法的作用解释,简单易懂
- 最简单易懂,什么是Node.js
- js 俄罗斯方块源码,简单易懂
- Js制作简单的选项卡
- 使用HTML+CSS+JS制作简单的网页菜单界面
- 一个能说明问题的js的原型 prototype的实例--简单易懂
- js简单时分秒毫秒倒计时
- css + js animation 简单模态框制作