用JS实现的秒表和时钟

最新推荐文章于 2023-10-12 13:53:00 发布
最新推荐文章于 2023-10-12 13:53:00 发布
阅读量1.8k 收藏
点赞数
分类专栏： JavaScript 文章标签： function button javascript input date
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuiku008/article/details/4205167
版权

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>时钟&amp;&amp;秒表</title>
<script language="javascript">

<!------时钟------>
var time; //时钟的setTimeout控制变量
function showTime(){
var date = new Date();
var sec = date.getSeconds();
var minute=date.getMinutes();
var hour = date.getHours();
//var year = date.getFullYear();
var show = document.getElementById('time');
if(parseInt(sec)<10){
show.value = hour + "时" + minute + "分0" +sec +"秒";
}else{
show.value = hour + "时" + minute + "分" +sec +"秒";
}

time = setTimeout("showTime()",1000);
}

function doChange(){
var state = document.getElementById('control');
switch(state.value){
case "停表":
clearTimeout(time);
state.value = "走表"
break;
case "走表":
setTimeout("showTime()",1000);
state.value = "停表"
break;
}
}
<!------秒表------>
var isStop //控制秒表，暂停、开始
var ms =0; //毫秒
var sec=0; // 表
var minute = 0;//分钟
var hour = 0 ;小时
function  alter(){
var btn = document.getElementById('ctrl');
switch(btn.value){
case "暂停":
clearTimeout(isStop);
btn.value = "开始";
break;
case '开始':
setTimeout("showStWatch()",10);
btn.value = "暂停";
break;
}
}


function showStWatch(){
ms++;
var show = document.getElementById('stWatch');
if(parseInt(ms) == 100){
sec++;
ms = 0;
}
if(parseInt(sec)==60){
minute++;
sec = 0;
}
if(parseInt(minute==60)){
hour++;
minute =0;
}
if(parseInt(ms)<10){
ms ="0"+ms
}
if(sec < 10 )show.value =hour+":"+minute+":0"+sec+":"+ms+"";
if(minute <10)show.value =hour+":0"+minute+":"+sec+":"+ms+"";
if(sec<10 && minute <10)show.value =hour+":0"+minute+":0"+sec+":"+ms+"";
else show.value =hour+":"+minute+":"+sec+":"+ms+"";
isStop = setTimeout("showStWatch()",10)
}
<!-- 重置秒表-->
function doInitialze(){
ms =0; //毫秒
sec=0; // 表
minute = 0;//分钟
hour = 0 ;//小时
document.getElementById('stWatch').value ="0:00:00:00";
}
</script>
</head>
<body onLoad="showTime(); doInitialze();">
<p>
时钟：
<input type="text" id="time" name="time" readonly="true"/>
<input type="button" id="control" name="control" value="停表" onClick="doChange()"/>
</p>秒表：
<input type="text" id="stWatch" name="stWatch" readonly="true"/>
<input type="button" id="ctrl" name="ctrl" value="开始" onClick="alter()"/>&nbsp;<input type="button" id="clear" name="clear" value="归零" onClick="doInitialze();"/>
<p>
</p>
</body>
</html>

 

yuiku008
关注
专栏目录
js实现简单的秒表
10-15
主要为大家详细介绍了js实现简单的秒表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js实现秒表计时器
10-15
主要为大家详细介绍了js实现秒表计时器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS实现秒表
Hedia Pan的博客
08-25 494
<!DOCTYPE html> <html lang="zn"> <head> 　　<meta charset="UTF-8"> 　　<title>秒表</title> 　　<style> .contain{ width: 200px; height: 50px; background: #000; b.
JS简易秒表计时器
u012732371的专栏
04-11 536
原文超链接点击打开链接 html lang="en"> head> meta charset="UTF-8"> title>js计时器title> head> body> input type="text" value="00:00"> input type="button" value="开始"> input type="button" value="结束"> input type="butt
JS中秒表实现
qq_41039734的博客
06-10 420
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> <script> setInterval(function () { time = new Date(); year = time.getFullY...
js实现简单秒表走动的时钟特效
01-19
本文实例介绍了javascript实现简单的秒表走动的时钟特效,分享给大家供大家参考,具体如下： 运行效果图如下： 实现代码： <html> <head> [removed] function startTime() { var today=new Date() var h...
js实现简单的秒表走动的时钟特效
10-23
本文主要探讨了使用JavaScript语言实现一个简单秒表走动的时钟特效的方法。这个过程涉及到JavaScript中的Date对象、函数递归调用、定时器以及字符串操作等相关知识点。下面将详细介绍这些知识点在时钟特效实现中的...
javascript实现动态时钟的启动和停止
10-16
下面将详细解释如何使用JavaScript来实现动态时钟的启动和停止。 首先，我们需要一个HTML结构来展示时钟并包含启动和停止按钮。在这个例子中，HTML代码如下： ```html <!DOCTYPE html> 动态时钟的启动和停止 ...
使用javaScript或jquery实现页面时钟走动效果(包含秒表计时), 和系统时间同步
04-03
使用简单的十行左右代码就可以实现html页面计时效果, 同系统时间同步, 并带有秒表实时走动效果哦,感谢大家的支持
js实现手表表盘时钟与圆周运动
01-18
苹果手表表盘时钟与js圆周运动 实现结果 需求分析： 1、时钟时间按照北京时间进行显示; 2、时针、分针、秒针按照时钟运转标准进行运转； 3、小球跟随秒表围绕表盘进行圆周运动。 代码分析 1、html结构：时针、分针...
JS实现秒表操作
最新发布
houmanjunxi的专栏
10-12 220
【代码】JS实现秒表操作。
JS实现简易秒表
路漫漫其修远兮，吾将上下而求索
08-17 313
<!DOCTYPE html> <html> <head> <title>简易秒表</title> <style> body { text-align: center; } </style> </head> <body> <h1>JS实现简易秒表</h1> <h...
用JS实现一个秒表功能
wang_swa99er的博客
08-20 741
用JS实现一个秒表功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <styl
利用JS编写一个定时秒表
qq_40509841的博客
08-30 406
&lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="UTF-8"&gt;         &lt;title&gt;&lt;/title&gt;     &lt;/head&gt;     &lt;body&gt;         //定义按钮，以及表现格式
js秒表计时器
ninjya_luck的专栏
07-29 4423
var c=0 var t function timedCount() { var temptextmin=document.getElementById('txt'); hour = parseInt(c / 3600);// 小时数 min = parseInt(c / 60);// 分钟数 if(min>=60){ min=min%60 } la
用js做一个简单的秒表计时器
qq_40710210的博客
04-02 1734
用js做一个简单的秒表计时器 Document 00:00:000 开始 分割 重置 ` 这里是引用 ` 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdo...
原生JS实现秒表功能
Coollin
07-29 275
原生JS实现秒表功能 文章目录原生JS实现秒表功能前言一、先看效果？好的二、直接上代码？OK1.完整html代码如下总结 前言 秒表功能在某些业务场景中还是很常见的，在这里用原生写了一个供参考 一、先看效果？好的 二、直接上代码？OK 1.完整html代码如下 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="
js 秒表
02-29 603
var se,m=0,h=0,s=0,ss=1; function second(){ if((ss%100)==0){s+=1;ss=1;} if(s>0 && (s%60)==0){m+=1;s=0;} if(m>0 && (m%60)==0){h+=1;m=0;} t=h+"时"+m+"分"+s+"秒"+ss+"毫秒"; document.getElementById("sh
BOM系列：定时器实战：时钟、倒计时与秒表
本文档深入探讨了在JavaScript中使用定时器（Timer）实现时钟、倒计时、秒表以及闹钟的功能。首先，关于时钟的创建，作者介绍了一种简单的方法，即利用正则表达式`/\d\d:\d\d:\d\d/`从`new Date()`返回的时间字符串...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值