Heim > Artikel > Web-Frontend > Erstellen Sie eine einfache Stoppuhr mit Javascript
Erstellen Sie eine einfache Stoppuhr mit Javascript
- 怪我咯Original
- 2017-06-29 10:48:451749Durchsuche
In diesem Artikel wird hauptsächlich Javascript zum Entwerfen eines einfachen Stoppuhr-Timers vorgestellt. Die Stoppuhr enthält zwei Schaltflächen und ein Textfeld zum Anzeigen der Startzeit Die Mindesteinheit beträgt 0,01 Sekunden. Das Textfeld zeigt die verstrichene Zeit an.
Dieser Artikel beschreibt das Design eine einfache Stoppuhr-Zeitmessung mit JavaScript. Der Implementierungscode des Geräts. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Der Screenshot des Laufeffekts lautet wie folgt:
Der spezifische Code lautet wie folgt:
<html>
<head>
<title> New Document </title>
</head>
<body>
<form action="somepage.asp">
<input type="text" value="0" name="txt1"/>
<input type="button" value="开始" name="btnStart"/>
<input type="button" value="重置" name="btnReset"/>
</form>
</body>
</html>
<script language="JavaScript" type="text/javascript">
<!--
//获取表单中的表单域
var txt=document.forms[0].elements["txt1"];
var btnStart=document.forms[0].elements["btnStart"];
var btnReset=document.forms[0].elements["btnReset"]
//定义定时器的id
var id;
//每10毫秒该值增加1
var seed=0;
btnStart.onclick=function(){
//根据按钮文本来判断当前操作
if(this.value=="开始"){
//使按钮文本变为停止
this.value="停止";
//使重置按钮不可用
btnReset.disabled=true;
//设置定时器，每0.01s跳一次
id=window.setInterval(tip,10);
}else{
//使按钮文本变为开始
this.value="开始";
//使重置按钮可用
btnReset.disabled=false;
//取消定时
window.clearInterval(id);
}
}
//重置按钮
btnReset.onclick=function(){
seed=0;
}
//让秒表跳一格
function tip(){
seed++;
txt.value=seed/100;
}
//-->
</script>Das obige ist der detaillierte Inhalt vonErstellen Sie eine einfache Stoppuhr mit Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!