如何用js设计一个秒表

发布网友发布时间：2022-04-29 07:40

我来回答

共4个回答

懂视网时间：2022-04-29 12:01

描述：

实现一个简单的秒表，点击启动按钮时开始计时，随后启动按钮变为暂停，

点击暂停暂停计时，点击复位回到最初始状态。

效果：

（推荐教程：javascript教程）

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 #showTime
 {
 width: 300px;
 height: 60px;
 font-size: 60px;
 line-height: 60px;
 }
 </style>
</head>
<body>
 <div>
 <div id="showTime">00:00:00</div>
 <button id="startBn">启动</button>
 <button id="restBn">复位</button>
 </div>
<script>
 //——————
 var time,showTime,startBn,restBn,pauseDate;
 //布尔开关
 var bool=false;
 //暂停的累计时间
 var pauseTime=0;
 
 init();
 function init() {
 showTime=document.getElementById("showTime");
 startBn=document.getElementById("startBn");
 restBn=document.getElementById("restBn");
 startBn.addEventListener("click",clickHandler);//开始按钮 ~ 暂停按钮
 restBn.addEventListener("click",clickHandler);//复位按钮
 setInterval(animation,16);
 }
 
 //转化时间函数
 function animation() {
 if(!bool) return;
 //前时间减去上次开启时间减去暂停累计时间
 var times=new Date().getTime()-time-pauseTime;
 var minutes=Math.floor(times/60000);//毫秒转化为分钟
 var seconds=Math.floor((times-minutes*60000)/1000);//已知分钟 
 将time减去分钟 除去1000得出 秒
 var ms=Math.floor((times-minutes*60000-seconds*1000)/10);//
 showTime.innerHTML=
 (minutes<10 ? "0" +minutes : minutes)+":"
 +(seconds<10 ? "0"+seconds :seconds)+":"
 +(ms<10 ? "0"+ms : ms);
 }
 
 //点击时的事件
 function clickHandler(e) {
 e= e || window.event;
 if(this===startBn){
 bool=!bool;
 if(bool){
 this.innerHTML="暂停";
 //如果我们上一次暂停时间是空，表示没有暂停过，因此，直接返回0
 //如果上次的暂停时间是有值得，用当前毫秒数减去上次的毫秒数，这样就会得到暂停时间
 pauseTime+=(!pauseDate ? 0 : new Date().getTime()-pauseDate);
 if(time) return;
 time=new Date().getTime();
 return;//是为bool判断跳出
 }
 
 this.innerHTML="启动";
 pauseDate=new Date().getTime();
 return;//是为this是否等于startBn判断跳出
 }
 startBn.innerHTML="启动";
 pauseTime=0;
 pauseDate=null;
 bool=false;
 time=0;
 showTime.innerHTML="00:00:00";
 }
 
</script>
</body>
</html>

相关视频教程分享：javascript视频教程

热心网友时间：2022-04-29 09:09

试试这个
<script language="javascript">
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("showtime").value=t;
ss+=1;

}
function startclock(){se=setInterval("second()",1);}
function pauseclock(){clearInterval(se);}
function stopclock(){clearInterval(se);ss=1;m=h=s=0;}
</script>
<input name="s" type="button" value="开始计时" onclick="startclock()">
<input name="s" type="button" value="暂停计时" onclick="pauseclock()">
<input name="s" type="button" value="停止计时" onclick="stopclock()">
<input name="showtime" style="color:#ff0000;width:200px;" id="showtime" type="text" value="0时0分0秒">

热心网友时间：2022-04-29 10:27

var s = 60;
function time() {
s--;
document.getElementById("emailBt").value = "获取验证码" + "(" + s + ")";
var t = setTimeout('time()', 1000);
if (s <= 0) {
s = 60;
document.getElementById("status").value = "1";
document.getElementById("emailBt").removeAttribute("disabled");
clearTimeout(t);
}

}

这是一个点击获取验证码倒计时60秒的示例。可以作为设计秒表的参考。

热心网友时间：2022-04-29 12:02

有点难度