使用JavaScript实现网页秒表功能（含开始、暂停、继续、重置功能）
效果图展示，感觉不错可以参考实例代码。
具体代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>00:00:00:00</div>
<button>开始</button>
<button disabled>暂停</button>
<button disabled>继续</button>
<button disabled>重置</button>
<script>
//定义一个变量，根据定时器每秒执行一次，每次执行++自增操作，变量存储的数值，就会每秒+1。现在需要的记录效果是每0.01秒，也就是10毫秒执行一次。根据累计的数值执行进位。如果毫秒达到100就是1秒，如果秒达到60就是1分钟，如果分钟达到60就是1小时
var ms = 0; // 毫秒
var s = 0; // 秒
var m = 0; // 分钟
var h = 0; // 小时
// 单独定义存储时、分、秒、毫秒的字符串的变量来存储累加时间的执行结果，因为如果直接在ms、s、m、h变量上进行拼接操作，会影响++操作的执行
var msStr = '';
var sStr = '';
var mStr = '';
var hStr = '';
// 因为定时器是定义在函数内部，必须定义一个全局变量来存储定时器，在函数外部可以调用终止定时器
var time = 0;
// 获取div标签对象
var oDiv = document.querySelector('div');
// 获取按钮的标签对象
var oStart = document.querySelectorAll('button')[0]; // 开始
var oPause = document.querySelectorAll('button')[1]; // 暂停
var oCont = document.querySelectorAll('button')[2]; //继续
var oReset = document.querySelectorAll('button')[3]; // 重置
// 给四个按钮添加点击事件效果
// 开始按钮
oStart.onclick = function(){
// 点击开始按钮执行函数，执行秒表计时
setTimeStr();
// 可以点暂停
oPause.disabled = false;
// 其他标签都不能点
oStart.disabled = true;
oCont.disabled = true;
oReset.disabled = true;
}
// 暂停按钮
oPause.onclick = function(){
// 点击暂停按钮,清除定时器,终止秒表执行
clearInterval(time);
// 暂停本身和开始不能点
oPause.disabled = true;
oStart.disabled = true;
// 继续和重置能点了
oCont.disabled = false;
oReset.disabled = false;
}
// 继续按钮
oCont.onclick = function(){
// 点击继续按钮，继续执行定时器
setTimeStr();
// 暂停可以点
oPause.disabled = false;
// 其他都不能点
oCont.disabled = true;
oReset.disabled = true;
oStart.disabled = true;
}
// 重置按钮
oReset.onclick = function(){
// 点击重置按钮,将所有的数据都恢复到0的状态
// 所有变量存储的数据都是0, div中的内容也恢复到0
// 定义所有存储时间的变量存储的数值为0
ms = 0; // 毫秒
s = 0; // 秒
m = 0; // 分钟
h = 0; // 小时
// 将div中的内容,设定为初始状态的00:00:00:00内容
oDiv.innerHTML = '00:00:00:00';
// 开始可以点
oStart.disabled = false;
// 其他都不能点
oPause.disabled = true;
oCont.disabled = true;
oReset.disabled = true;
}
// 每次点击开始按钮或者继续按钮都会调用执行函数，都会生成一个新的定时器。time中存储的是当前这个新的定时器，是整个程序中定时器的序号
// 例如点击开始按钮10次会生成10个定时，time中存储最后一个定时器的序号10
// 当点击暂停按钮时，清除的是time中存储的序号是10的这一个定时器，之前 1-9定时器仍然会执行
// 解决方法：点击开始按钮之后，在点击暂停按钮之前，禁止再次点击开始按钮。也就是在清除原有定时器之前，不允许生成新的定时器
// 定义函数，这个函数的作用就是记录执行的时间，有小时、分钟、秒、毫秒 4个部分。将记录的时间写入到div中，div中起始时默认都是0
function setTimeStr(){
// 赋值操作,将定时器,存储在全局作用域变量中
// 此处只是赋值操作
time = setInterval(function(){
ms++;
// 毫秒是10毫秒一增加
// ms存储的数值如果达到100，就是1秒种了
// 给秒单位进位 s++
// ms本身需要重新开始记录数值
// 0:0:0:99 ---> 0:0:1:00
if(ms == 100){
s++; // 秒进位
ms = 0; // ms本身清零,重新记录
}
if(s == 60){
m++; // 分钟进位
s = 0; // s秒 清零
}
if(m == 60){
h++; // 小时进位
m = 0; // m分钟 清零
}
// 小时记录可以每24小时清零一次，或者100小时清零一次，都可以
if(h == 100){
h = 0;
}
// 如果记录的时间小于0，要做补零操作
if(ms < 10){
msStr = '0' + ms;
}else{
msStr = ms;
}
if(s < 10){
sStr = '0' + s;
}else{
sStr = s;
}
if(m < 10){
mStr = '0' + m;
}else{
mStr = m;
}
if(h < 10){
hStr = '0' + h;
}else{
hStr = h;
}
// 每次执行返回一个记录时间的字符串，将这个字符串写入到div中
oDiv.innerHTML = `${hStr}:${mStr}:${sStr}:${msStr}`;
} , 10);
console.log(time);
}
</script>
</body>
</html>
ps：下面看下JavaScript实现计时器，一个按钮实现开始和停止的功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var intervalId;
var i = 0;
var count=0;
function startTime(){
var hour = document.getElementById("hour");
var minute = document.getElementById("minute");
var second = document.getElementById("second");
var ms = document.getElementById("ms");
var buttonEle = document.getElementById("start");
if(i%2==0){
buttonEle.innerHTML="暂停计时";
intervalId = setInterval(function(){
count += 1;
var thehour=parseInt(count/360000);
var theminute=parseInt(count/6000%60);
var thesecond=parseInt(count/100%60);
var thems = parseInt(count%100);
if(thehour>=10){
hour.innerHTML=thehour+" ";
}
else{
hour.innerHTML="0"+thehour+" ";
}
if(theminute>=10){
minute.innerHTML=theminute+" ";
}
else{
minute.innerHTML="0"+theminute+" ";
}
if(thesecond>=10){
second.innerHTML=thesecond+" ";
}
else{
second.innerHTML="0"+thesecond+" ";
}
if(thems>=10){
ms.innerHTML=thems+" ";
}
else{
ms.innerHTML="0"+thems+" ";
}
},10)
}
else{
buttonEle.innerHTML="开始计时";
clearInterval(intervalId);
}
i++;
}
</script>
<style type="text/css">
body,html{
background: violet;
/*position: relative;*/
}
#firstDiv{
height: 50%;
width:50% ;
position:absolute;
margin-left: 350px;
margin-top:150px;
background: #ffcccc;
}
#twoDiv{
height: 200px;
width:100%;
position: absolute;
margin-top: 130px;
margin-left: 130px;;
}
span{
font-size: 30px;
}
button{
font-size: 20px;
}
</style>
</head>
<body>
<div id="firstDiv">
<div id="twoDiv">
<span><span id="hour">00 </span>时</span>
<span><span id="minute">00 </span>分</span>
<span><span id="second">00 </span>秒</span>
<span><span id="ms">00 </span>毫秒</span>
<button id="start" οnclick="startTime()">开始计时</button>
</div>
</div>
</body>
</html>
总结
到此这篇关于使用JavaScript实现网页秒表功能（含开始、暂停、继续、重置功能）的文章就介绍到这了,更多相关js 网页秒表内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
魔方在线秒表javascript版
效果如下图所以,我发现了,本人最短时间为0.06秒,看大家的键盘与反应了.测试代码: 魔方小站秒表 Stopwatch for Rubik's Cube China td,input,div,th{font:9pt verdana} p {line-height:60%} var Max=25; var bestAve; var then; var nowDec; var nowBest; var nowWorst; var runing=0; var timeint; var i=0; var
-
javascript设计简单的秒表计时器
本文实例讲述了javascript设计简单的秒表计时器的实现代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <html> <head> <title> New Document </title> </head> <body> <form action="somepage.asp"> <input type="text" value="0&q
-
js实现简单的秒表走动的时钟特效
本文实例介绍了javascript实现简单的秒表走动的时钟特效.分享给大家供大家参考.具体如下: 运行效果图如下: 实现代码: <html> <head> <script type="text/javascript"> function startTime() { var today=new Date() var h=today.getHours() var m=today.getMinutes() var s=today.getSeconds(
-
javascript 秒表计时器实现代码
javascript 秒表计时器 实例代码: <html lang="en"> <head> <meta charset="UTF-8"> <title>js计时器</title> </head> <body> <input type="text" value="00:00"> <input type="button
-
原生js实现秒表计时器功能
本文实例为大家分享了带有开始.暂停.清除功能的js计时器,供大家参考,具体内容如下 效果图: 下面贴代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计时器</title> <script> var hour,minute,second;//时 分 秒 hour=minute=secon
-
原生js 秒表实现代码
html代码: 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <meta charset="gb2312"> <head> <style type="text/css"> #container { margin:0 auto; margin-top:10%; width:200px; } #t
-
js实现秒表计时器
本文实例为大家分享了js实现秒表计时器的具体代码,供大家参考,具体内容如下 秒表计时器的实现: 效果图如下: 附代码,已调试运行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=
-
使用JavaScript实现网页秒表功能（含开始、暂停、继续、重置功能）
效果图展示,感觉不错可以参考实例代码. 具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document
-
JavaScript实现网页对象拖放功能的方法
本文实例讲述了JavaScript实现网页对象拖放功能的方法.分享给大家供大家参考.具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Drag</title> <meta http-equiv=
-
JavaScript实现网页计算器功能
本文实例为大家分享了JavaScript实现网页计算器的具体代码,供大家参考,具体内容如下 要求:在网页上实现简单的计算器功能和界面 CSS样式代码: <style> * { margin: 0; padding: 0; } #panel { width: 202px; height: 252px; margin: 30px auto; border: 3px solid #ccc; } #screen { width: 134px; height: 40px; margin: 5px; di
-
JavaScript实现网页留言板功能
JavaScript(JS)网页–留言板,供大家参考,具体内容如下 在使用网页进行冲浪时,经常会发表自己的留言.发布留言的留言板是怎么做的呢? 制作一个简单的留言板. 首先需要一个textarea框,旁边放置一个按钮,然后需要一个ul标签,里面不需要放置li元素,用CSS加以简单的修饰. 紧接着获取元素,在点击按钮后,创建一个li,将文本框里面的赋值给li,将li插入到ul的第一个孩子的前面. <!DOCTYPE html> <html lang="zh-CN">
-
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
本文实例讲述了JavaScript实现的仿新浪微博原生态输入字数即时检查功能.分享给大家供大家参考,具体如下: 边在文本框输入字符边对输入的字数进行检查本来不难的,但是由于其中有些函数的使用方式大家容易混乱,很容易导致整个结果搞来搞去也没有搞出来,也容易出Bugs,注意这里不能再使用length函数了,因为这个东西英文算一个字符,汉字也算一个字符,不符合数据传递的形式.也不能用OnChange事件了,这事件要光标离开为文本框才会触发,必须改成更加即时的OnKeyUp. 一.基本目标 如下图,完成
-
javascript实现网页子页面遍历回调的方法（涉及 window.frames、递归函数、函数上下文）
本文实例讲述了javascript实现网页子页面遍历回调的方法(涉及 window.frames.递归函数.函数上下文).分享给大家供大家参考.具体如下: 提炼于本人手写的纯 JavaScript 工具程序,用于遍历当前网页的所有子页面 并执行迭代回调,且回调函数返回值可用于结果回传,有助于减少闭包变量~ 其特点在于 -- 递归遍历时只检索子页面的 Window 对象,不立即执行回调函数,而是在检索结束后在普通循环结构中回调.这样可以尽量减少 递归调用时的内存消耗,也简化了程序结构,易于维护 全
-
JavaScript驾驭网页-CSS与DOM
推荐阅读:JavaScript驾驭网页-DOM DOM是种符合万维网标准的HTML操纵方式,它能比innerHTML特性达成更多操控功能 这里有HTML代码与CSS代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> span.class
-
基于JavaScript实现网页倒计时自动跳转代码
用JS实现网页上的自动跳转功能,倒计时跳转至指定网页,倒计时间可自设,时间到则自动跳转到指定的网址,对于JS来说,实现该似乎挺简单哦,用IIS上的301也可实现跳转,以及mete标签也可以实现自动跳转,根据你自己的需要了. <title>JS倒计时网页自动跳转代码</title> <script language="JavaScript" type="text/javascript"> function delayURL(url)
-
JavaScript驾驭网页－DOM
一.DOM全称 文档对象模型(Document Object Model) 二.DOM是什么 DOM就是一个编程接口,就是一套API. DOM是针对HTML文档.XML等文档的一套API.就类似于JDBC是针对数据库的一套API一样. 三.DOM的用途 DOM 是用来访问或操作HTML文档.XHTML文档.XML文档中的节点元素. 现在基本上所有的浏览器都都执行了W3C发布的DOM规范,所以在浏览器上就可以用DOM的这些API. DOM提供对脚本友善的网页结构与内容的视图 DOM把网页视为节点构
-
JavaScript识别网页关键字并进行描红的方法
本文实例讲述了JavaScript识别网页关键字并进行描红的方法.分享给大家供大家参考,具体如下: 这里演示JavaScript智能识别网页关键字并加红显示出来,相信这个效果大家不陌生吧,用JS加红关键字要比程序控制输出好得多,必竟将一部分功能交给了客户浏览器,相应减轻了服务器的压力. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-keyword-show-red-color-codes/ 具体代码如下: <!DOCTYPE html P