Implementierungsmethode für JavaScript-Minuten- und Sekunden-Countdown-Timer_Javascript-Kenntnisse

Das Beispiel in diesem Artikel beschreibt die Implementierungsmethode des JavaScript-Countdown-Timers. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

1. Grundlegende Ziele

Entwerfen Sie einen Countdown-Timer in JavaScript, der die Schaltfläche nicht mehr anklickbar macht, sobald die Zeit abgelaufen ist

Der spezifische Effekt ist wie folgt: Um das Problem zu veranschaulichen, wird die Tabelle so angepasst, dass sie alle 50 Millisekunden, also alle 0,05, springt

Wenn Sie es tatsächlich verwenden, passen Sie einfach setInterval("clock.move()",50); in window.onload=function(){...} von 50 auf 1000 an.

Der Button kann noch vor Ablauf der Zeit angeklickt werden.

Nach Ablauf der Zeit kann die Schaltfläche nicht mehr angeklickt werden.

2. Produktionsprozess

Code kopieren Der Code lautet wie folgt:

Verbleibende Zeit: <script> /*Deklarieren Sie die Funktion, die von der Hauptfunktion verwendet werden soll*/ <br> var clock=new clock(); <br> /*Zeiger auf Timer*/ <br> var timer; <br> window.onload=function(){ <br> /*Die Hauptfunktion ruft nur alle 50 Sekunden die Move-Methode in der Uhrfunktion auf*/ <br> Timer=setInterval("clock.move()",50); }  <br> Funktion clock(){ <br> /*s ist eine Variable in clock(), keine globale Variable wie var, die die verbleibenden Sekunden darstellt*/ <br> This.s=140; <br> This.move=function(){ <br> ​​​​/*Rufen Sie die Exchange-Funktion auf, um Sekunden vor der Ausgabe in Minuten umzuwandeln. Da Exchange in der Hauptfunktion window.onload nicht verwendet wird, ist es nicht erforderlich, sie zu deklarieren*/ <br>           document.getElementById("timer").innerHTML=exchange(this.s); ​ ​ ​ /*Bei jedem Aufruf werden die verbleibenden Sekunden dekrementiert*/  <br> This.s=this.s-1; <br>                                                           If(this.s<0){ <br /> alarm("Die Zeit ist abgelaufen"); <br />                document.getElementById("go").disabled=true;                                                                                   ,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,                                                                                                                                                                                                                                }  <br /> Funktion Austausch(Zeit){ <br /> /*Die Division von Javascript ist eine Gleitkommadivision und Math.floor muss verwendet werden, um den ganzzahligen Teil zu erhalten*/ <br /> This.m=Math.floor(time/60);               /*Es gibt eine Restoperation*/ <br /> This.s=(time`); <br /> This.text=this.m „Minuten“ this.s „Sekunden“;                       /*Verwenden Sie dies nicht für den übergebenen formalen Parameter time, und andere in dieser Funktion verwendete Variablen müssen dies verwenden*/ <br />            return this.text;                                   } <br /> </script>


Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.