Heim > Artikel > Web-Frontend > Teilen Sie den einfachsten JavaScript-Countdown-Code (vollständiger Code im Anhang)

Teilen Sie den einfachsten JavaScript-Countdown-Code (vollständiger Code im Anhang)

yuliaOriginal: 2018-10-15 10:30:5422874Durchsuche

Bei der Arbeit müssen wir oft einen Countdown auf der Seite einstellen. Wissen Sie, wie man JS-Countdown-Code schreibt? In diesem Artikel werden Ihnen der einfachste JS-Countdown-Code und die detaillierten Countdown-JS-Code-Ideen vorgestellt. Er hat einen gewissen Referenzwert und interessierte Freunde können einen Blick darauf werfen.

Beispiel: Legen Sie eine Frist fest und zeigen Sie die verbleibende Zeit an. Double Eleven kommt beispielsweise bald und Händler veranstalten Aktivitäten. Mithilfe des JS-Countdowns können sie anzeigen, wie lange es bis zum Ende der Aktivität dauert. Der spezifische Code lautet wie folgt:

HTML-Teil:

<body onload = "countTime()">
  <div>
         <span id="day"></span>
         <span id="hour"></span>
         <span id="minute"></span>
         <span id="second"></span>
    </div>
 </body>

gibt vier -Tags zur Anzeige der verbleibenden Tage, Stunden, Minuten und Sekunden

JavaScript-Teil:

<script type="text/javascript">
  function countTime() {
            //获取当前时间
            var date = new Date();
            var now = date.getTime();
            //设置截止时间
            var endDate = new Date("2018-10-31 0:0:0");
            var end = endDate.getTime();
            //获取截止时间和当前时间的时间差
            var leftTime = end-now;
            //定义变量 d,h,m,s分别保存天数，小时，分钟，秒
            var d,h,m,s;
            //判断剩余天数，时，分，秒
            if (leftTime>=0) {
                d = Math.floor(leftTime/1000/60/60/24);
                h = Math.floor(leftTime/1000/60/60%24);
                m = Math.floor(leftTime/1000/60%60);
                s = Math.floor(leftTime/1000%60);                   
            }
            //将时间赋值到div中
            document.getElementById("day").innerHTML = d+"天";
            document.getElementById("hour").innerHTML = h+"时";
            document.getElementById("minute").innerHTML = m+"分";
            document.getElementById("second").innerHTML = s+"秒";
            //递归每秒调用countTime方法，显示动态时间效果
            setTimeout(countTime,1000);
 
        }
 </script>

Die Idee des Countdown-JS-Codes:

1. Verwenden Sie date = new Date(), um die aktuelle Uhrzeit zu erhalten

2 endDate = new Date( "2018-10-31 0:0:0")

3 Ermitteln Sie den Zeitunterschied leftTime = end-now

4. Definieren Sie die Variablen d, h, m , s und verwenden Sie die if-Funktion, um die verbleibenden Tage, Stunden, Minuten und Sekunden zu beurteilen.

5. Verwenden Sie innerHTML, um die Zeit dem Div zuzuweisen.

6. Rufen Sie die countTime-Funktion rekursiv jede Sekunde auf um den dynamischen Zeiteffekt anzuzeigen

Wie im Bild gezeigt:

Teilen Sie den einfachsten JavaScript-Countdown-Code (vollständiger Code im Anhang)

Das Obige hat einen einfachen JS-Countdown-Code mit Ihnen geteilt und die Idee davon erklärt Der JS-Countdown-Code im Detail kann direkt bei der Arbeit verwendet werden. Anfänger können ihn selbst ausprobieren und sehen, ob dieser Artikel für Sie hilfreich ist.

Empfohlene verwandte Video-Tutorials: JavaScript-Video-Tutorial

Das obige ist der detaillierte Inhalt vonTeilen Sie den einfachsten JavaScript-Countdown-Code (vollständiger Code im Anhang). 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：Was ist der Unterschied zwischen Bootstrap und JQuery? Vergleich der Unterschiede zwischen Bootstrap und JQueryNächster Artikel：Was ist der Unterschied zwischen Bootstrap und JQuery? Vergleich der Unterschiede zwischen Bootstrap und JQuery

In Verbindung stehende Artikel

Mehr sehen