Cet article décrit la méthode de mise en œuvre de la minute de compte JavaScript et du deuxième compte à rebours. Partagez-le pour votre référence. L'analyse spécifique est la suivante:
1. Objectifs de base
Concevez une minuterie à compte à rebours minute et deuxième en JavaScript, et une fois l'heure terminée, le bouton devient inclicable.
L'effet spécifique est comme indiqué dans la figure ci-dessous. Pour illustrer le problème, il est ajusté pour sauter la table toutes les 50 millisecondes, c'est-à-dire chaque 0,05.
Lorsque vous l'utilisez réellement, ajustez simplement le setInterval ("Clock.move ()", 50); dans window.onload = function () {...} de 50 à 1000.
Le bouton peut toujours être cliqué avant que l'heure ne s'éteint.
Une fois le temps utilisé, le bouton ne peut pas être cliqué.
2. Processus de production
Copiez le code comme suit: <! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> Temps restant </TITAL>
</ head>
<! - La partie HTML est très simple. Le texte de ligne et les boutons de soumission qui doivent être contrôlés par JavaScript sont tous écrits avec ID ->
<body>
Temps restant: <span id = "Timer"> </span>
<input id = "go" type = "soumi" value = "go" />
</docy>
</html>
<cript>
/ * La fonction à utiliser par la fonction principale, le déclare * / /
var horloge = new Clock ();
/ * Pointeur vers la minuterie * /
var temporisateur;
window.onload = function () {
/ * La fonction principale appelle simplement la méthode de déplacement dans la fonction horloge une fois toutes les 50 secondes * /
Timer = setInterval ("Clock.move ()", 50);
}
fonction horloge () {
/ * s est une variable dans Clock (), une variable globale qui n'est pas un VAR, représentant les secondes restantes * /
this.s = 140;
this.move = function () {
/ * Avant la sortie, appelez la fonction d'échange pour convertir des secondes à minute en seconde, car l'échange n'est pas utilisé dans la fenêtre de fonction principale.
document.getElementById ("Timer"). InnerHtml = Exchange (this.s);
/ * Chaque fois qu'il est appelé, les secondes restantes seront réduites seule * /
this.s = this.s-1;
/ * Si le temps s'épuise, la fenêtre contextuelle rend le bouton indisponible, arrêtez d'appeler Move () dans la fonction d'horloge * /
if (this.s <0) {
alerte ("le temps est écoulé");
document.getElementById ("Go"). Disabled = true;
ClearTimeout (temporisateur);
}
}
}
Fonction Exchange (Time) {
/ * La division de JavaScript est une division de points flottants, et il doit utiliser Math.floor pour prendre sa partie entière * /
this.m = math.floor (heure / 60);
/ * Il y a une opération résiduelle * /
this.s = (Time% 60);
this.text = this.m + "minute" + this.s + "second";
/ * Ne l'utilisez pas pour le temps de paramètre formel passé, tandis que les variables restantes utilisées dans cette fonction doivent utiliser ce * /
retourner this.text;
}
</cript>
J'espère que cet article sera utile à la programmation JavaScript de tous.