Teilen Sie einen js-Schlüsselcode, um den Countdown zu implementieren

In diesem Artikel wird hauptsächlich der Schlüsselcode von js zur Implementierung des Countdowns im Detail vorgestellt. Er hat einen bestimmten Referenzwert.

Wir diskutieren ihn häufig Flash-Sale-Countdowns und Double 11-Countdowns auf einigen E-Commerce-Websites Der Countdown-Effekt ist tatsächlich sehr einfach umzusetzen und nicht kompliziert.

Zunächst müssen Sie Ihre Ideen klären, bevor Sie mit dem Schreiben beginnen. Es wird viel einfacher sein, es unten zu schreiben:

1. Holen Sie sich die aktuelle Zeit und definieren Sie die Endzeit.

2 die aktuelle Zeitdifferenz und ermitteln Sie die Stunden, Minuten und Sekunden

3. Stellen Sie den Timer so ein, dass die Zeit jede Sekunde verringert wird

var p = document.getElementsByTagName("p")[0];
      var timer = setInterval(timers, 1000);
      function timers() {
        //获取现在的时间
        var now = new Date();
        //获取你想要的未来时间
        var future = new Date("2017/05/10");
        var time = future.getTime() - now.getTime();
        //获取距离的天数
        var day = parseInt(time / 24 / 60 / 60 / 1000);
        //获取距离的小时
        var hour = parseInt(time / 1000 / 60 / 60 % 24);
        //获取分
        var minute = parseInt(time / 1000 / 60 % 60);
        //获取秒
        var sec = parseInt(time / 1000 % 60);
        if(time < 0) {
          p.innerHTML = "距离苹果发布会还有00天00小时00分00秒000毫秒";
          clearInterval(timer);
          return;
        }
        //注意点:当时间小于10的时候,要在前面补0
        p.innerHTML = "距离结束时间还有" + (day < 10 ? ("0" + day) : day) + "天" + (hour < 10 ? ("0" + hour) : hour) + "小时" + (minute < 10 ? ("0" + minute) : minute) + "分" + (sec < 10 ? ("0" + sec) : sec) + "秒";
      }

[Ähnliche Empfehlungen ]

1. Kostenloses JS-Online-Video-Tutorial

2. JavaScript-Referenzhandbuch für Chinesisch

3 .cn Dugu Jiujian (3) – JavaScript-Video-Tutorial

Das obige ist der detaillierte Inhalt vonTeilen Sie einen js-Schlüsselcode, um den Countdown zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!