如何使用html实现在线秒表,使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)...
效果图展示,感觉不错可以参考实例代码。
具体代码如下所示:
Document
开始
暂停
继续
重置
//定义一个变量,根据定时器每秒执行一次,每次执行++自增操作,变量存储的数值,就会每秒+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);
}
ps:下面看下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++;
}
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;
}
00 时
00 分
00 秒
00 毫秒
开始计时
总结
到此这篇关于使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)的文章就介绍到这了,更多相关js 网页秒表内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
如何使用html实现在线秒表,使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)...相关推荐
- html计时器重置,使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)...
效果图展示,感觉不错可以参考实例代码. 具体代码如下所示: Document 00:00:00:00 开始 暂停 继续 重置 //定义一个变量,根据定时器每秒执行一次,每次执行++自增操作,变量存储的 ...
- web课程设计网页规划与设计 :网页设计——在线书店(12个页面) HTML+CSS+JavaScript 学生网页课程设计期末作业...
web课程设计网页规划与设计 :网页设计--在线书店(12个页面) HTML+CSS+JavaScript 学生网页课程设计期末作业 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头 ...
- B10HTML5期末大作业:漫画在线网站设计——奇恩动漫(1页) HTML+CSS+JavaScript 本网页作业为一个展示产品类型的漫画设计作业作品成品
HTML5期末大作业:漫画在线网站设计--奇恩动漫(1页) HTML+CSS+JavaScript 本网页作业为一个展示产品类型的漫画设计作业作品成品 常见网页设计作业题材有 个人. 美食. 公司. ...
- HTML5期末大作业:漫画在线网站设计——奇恩动漫(1页) HTML+CSS+JavaScript 本网页作业为一个展示产品类型的漫画设计作业作品成品
HTML5期末大作业:漫画在线网站设计--奇恩动漫(1页) HTML+CSS+JavaScript 本网页作业为一个展示产品类型的漫画设计作业作品成品 常见网页设计作业题材有 个人. 美食. 公司. ...
- web课程设计网页规划与设计 :网页设计——在线书店(12个页面) HTML+CSS+JavaScript 学生网页课程设计期末作业
web课程设计网页规划与设计 :网页设计--在线书店(12个页面) HTML+CSS+JavaScript 学生网页课程设计期末作业 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头 ...
- HTML网页设计期末课程大作业 :汽车网页——宝马轿车 6页 带背景音乐 学生网页设计作业HTML+CSS+JavaScript学生网页课程设计期末作业下载
HTML网页设计期末课程大作业 :汽车网页--宝马轿车 6页 带背景音乐 学生网页设计作业HTML+CSS+JavaScript学生网页课程设计期末作业下载 临近期末, 你还在为HTML网页设计结课作 ...
- HTML5期末大作业:运动系列——NBA篮球主题学生网页设计(7个页面) HTML+CSS+JavaScript 体育网页设计HTML代码 学生网页课程设计期末作业下载 大学生网页设计制作成
HTML5期末大作业:运动系列--NBA篮球主题学生网页设计(7个页面) HTML+CSS+JavaScript 体育网页设计HTML代码 学生网页课程设计期末作业下载 大学生网页设计制作成 临近期末 ...
- 网页设计作业`京东网站设计——仿2016版京东首页(1页) HTML+CSS+JavaScript 大学生网页作品 电商网页设计作业模板 学生网页制作源代码下载
HTML5期末大作业:京东网站设计--仿京东首页(1页) HTML+CSS+JavaScript 大学生网页作品 电商网页设计作业模板 学生网页制作源代码下载 文章目录 HTML5期末大作业:京东网站 ...
- web前端期末大作业 ~我的家乡-绿城之都html+css+javascript旅游网页设计实例
web前端期末大作业 ~ 我的家乡-绿城之都html+css+javascript旅游网页设计实例 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页 ...
最新文章
- 调用微信高级群发接口--视频群发接口出问题(微信官方文档错误纠正)
- oracle 递归应用(挺复杂的)
- SOPC第三课---同时点亮4个LED灯闪烁
- spring mvc使用的一些注意事项
- OpenSAP Fiori Elements 公开课第四单元视频的中文字幕
- Policy-Based Reinforcement Learning
- 源码编译搭建LAMP环境
- ECshop sina
- JavaScript操作Cookies
- maven如何添加404页面
- 中间件(一):订单系统整体架构
- DNS劫持新方法(“侧信道攻击“攻破“端口随机化“的研究)
- 【C语言进阶】C语言实现通讯录(简易版)
- 泰坦尼克号-决策树模型
- 吕梁云计算机中心,吕梁云计算中心综合实力全国排第三
- 3运输层 - 可靠数据传输的原理rdt
- 图的单源最短路径算法
- Mozi僵尸网络(P2P僵尸网络Mozi)
- 远程办公:通过cpolar内网穿透,远程桌面控制家里公司内网电脑
- 求一个数组的全排列(java)