Heim > Artikel > Web-Frontend > So implementieren Sie einen Minuten-Countdown in JS (Beispiel für einen Countdown von zehn Minuten)

So implementieren Sie einen Minuten-Countdown in JS (Beispiel für einen Countdown von zehn Minuten)

yuliaOriginal: 2018-10-17 17:20:3020997Durchsuche

Bei der Arbeit müssen wir oft einen Countdown auf der Seite festlegen. Wissen Sie also, wie man einen Minuten-Countdown in JS implementiert? Dieser Artikel teilt Ihnen einen JS-Zehn-Minuten-Countdown-Code mit. Es ist sehr einfach und praktisch. Interessierte können einen Blick darauf werfen.

Das Schreiben von JS-Countdown-Code erfordert viele JavaScript-Kenntnisse, z. B. if-Funktion, Math.floor, Timer setInterval usw. Wenn Sie sich nicht sicher sind, können Sie die entsprechenden Artikel auf der chinesischen PHP-Website lesen , oder besuchen Sie das JavaScript-Video-Tutorial.

Beispiel: 10-minütiger Prüfungscountdown. Wenn nur noch fünf Minuten übrig sind, werden Sie daran erinnert, dass nur noch 5 Minuten übrig sind. Der spezifische Code lautet wie folgt:

HTML-Teil:

<body>
  <div id="timer"></div>
  <div id="warring"></div>
</body>

JavaScript-Teil:

<script type="text/javascript">
  var maxtime = 10 * 60; //  
            function CountDown() {
                if (maxtime >= 0) {
                    minutes = Math.floor(maxtime / 60);
                    seconds = Math.floor(maxtime % 60);
                    msg = "距离结束还有" + minutes + "分" + seconds + "秒";
                    document.all["timer"].innerHTML = msg;
                    if (maxtime == 5 * 60)alert("距离结束仅剩5分钟");
                        --maxtime;
                } else{
                    clearInterval(timer);
                    alert("时间到，结束!");
                }
            }
            timer = setInterval("CountDown()", 1000);     
 </script>

Die spezifischen Schritte des JS-Zehn-Minuten-Countdown-Codes:

1. Stellen Sie die Prüfungsdauer auf 10 * 60 Sekunden ein, also auf 10 Minuten.

2. Beurteilen Sie die verbleibenden Minuten und Sekunden, wenn die maximale Zeit größer oder gleich Null ist

3. Benutzen Sie die if-Funktion, um erneut zu beurteilen. Wenn nur noch 5 Minuten übrig sind, erscheint eine Meldung: Es sind nur noch 5 Minuten bis zum Ende

4. Wenn Die Zeit ist abgelaufen, der Timer wird gelöscht und die Meldung: Ende

Der Effekt ist wie im Bild gezeigt:

So implementieren Sie einen Minuten-Countdown in JS (Beispiel für einen Countdown von zehn Minuten)

Das Obige hat einen JS-Countdown-Code für zehn Minuten mitgeteilt. Die Schritte sind sehr detailliert und leicht zu verstehen, um zu sehen, ob sie den Countdown-Effekt erzielen können . Ich hoffe, dieser Artikel wird Ihnen hilfreich sein!

【Empfohlene Tutorials】

1. JavaScript-Referenzhandbuch für Chinesisch
2. JavaScript-Video-Tutorial
3 Bootstrap-Tutorial

Das obige ist der detaillierte Inhalt vonSo implementieren Sie einen Minuten-Countdown in JS (Beispiel für einen Countdown von zehn Minuten). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Verwenden Sie JavaScript, um den größten identischen Teilstring zweier Strings zu finden (Codebeispiel)Nächster Artikel：Verwenden Sie JavaScript, um den größten identischen Teilstring zweier Strings zu finden (Codebeispiel)

In Verbindung stehende Artikel

Mehr sehen