communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > Concevoir un chronomètre simple avec des compétences javascript_javascript

Concevoir un chronomètre simple avec des compétences javascript_javascript

WBOY
Libérer： 2016-05-16 15:31:14
original
1109 Les gens l'ont consulté

L'exemple de cet article décrit le code d'implémentation d'un simple chronomètre conçu en JavaScript. 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>
Copier après la connexion

J'espère que cet article sera utile à tous ceux qui apprennent la programmation JavaScript.

Étiquettes associées：
javascript秒表计时器 js秒表计时器 javascript定时器
source：php.cn
Article précédent：Jquery sélectionne tout et inverse l'exemple de sélection code_jquery Article suivant：Apprenez la minuterie javascript grâce aux compétences me_javascript
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Moyen efficace de remplir les valeurs manquantes dans une carte non ordonnée à partir d'une table SQL (SQL/C++) Question Il existe actuellement un système qui lit les identifiants uniques (identifiants)...
Depuis 2024-04-04 11:47:44
0
1
345
La minuterie JavaScript ne se met pas à jour toutes les secondes Voici mon code pour afficher un compte à rebours pour otp, mais il n'affiche que des valeu...
Depuis 2024-04-02 19:04:44
0
1
359
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal