Maison > Article > interface Web > Créer un chronomètre simple avec javascript
Créer un chronomètre simple avec javascript
- 怪我咯original
- 2017-06-29 10:48:451749parcourir
Cet article présente principalement le javascript pour concevoir un chronomètre simple. Le chronomètre comprendra deux boutons et une zone de texte pour afficher l'heure à laquelle le chronomètre démarre lorsque le chronomètre démarre. le bouton est enfoncé. L'unité minimale est de 0,01 seconde. Un nouveau clic sur le bouton arrêtera le chronométrage. La zone de texte affiche le temps écoulé. Les amis qui en ont besoin peuvent se référer à
Cet article décrit l'exemple de conception d'un. Chronométrage simple du chronomètre à l'aide de JavaScript. Le code d'implémentation de l'appareil. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
La capture d'écran de l'effet en cours d'exécution est la suivante :
Le code spécifique est le suivant :
<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>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!