Heim > Artikel > Web-Frontend > js implementiert Beispielcode für Countdown-Animationseffekte über das Date-Objekt

js implementiert Beispielcode für Countdown-Animationseffekte über das Date-Objekt

小云云Original: 2018-01-02 09:22:201554Durchsuche

Dieser Artikel stellt hauptsächlich den durch js erzielten Countdown-Animationseffekt vor. Ich hoffe, dass er jedem helfen kann.

js implementiert den Countdown-Effekt über das Date-Objekt, der spezifische Inhalt ist wie folgt

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>倒计时动画</title>
  <style>
    p{
      text-align:center;
      height:100px;
      line-height:100px;
    }
  </style>
  <script>
    window.onload = function(){
      setInterval(FreeTime,1000);
    }
    function FreeTime(){
      var curTime = Date.now();
      var endTime = new Date("2017-10-26 16:00:00");
      var allFreeSeconds = (endTime-curTime)/1000;
      if(allFreeSeconds>0){
        var freeDay = Math.floor(allFreeSeconds/(24*60*60));
        var freeHour = Math.floor(allFreeSeconds/(60*60) % 24);
        var freeMinute = Math.floor(allFreeSeconds/60 % 60);
        var freeSecond = Math.floor(allFreeSeconds%60);
        document.getElementById("nowTime").innerHTML = "剩余"+freeDay+"天"+freeHour+"时"+freeMinute+"分"+freeSecond+"秒";
      }
      else{
        document.getElementById("nowTime").innerHTML = "已结束";
      }
    }
  </script>
</head>
<body>
<p>
  <span id="nowTime"></span>
</p>
</body>
</html>

Verwandte Empfehlungen:

Technologieaustausch der simulierten Explosions-Countdown-Funktion von jQuery

Implementierung der jQuery-Timer- und Countdown-Funktion

Drei Arten von js und jQuery zur Implementierung Benutzerregistrierungs-Countdown-Funktion Methode

Das obige ist der detaillierte Inhalt vonjs implementiert Beispielcode für Countdown-Animationseffekte über das Date-Objekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

jquery date JS 对象

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：WeChat-Applet-Eingabe und dynamische EinstellungsschaltflächenmethodeNächster Artikel：WeChat-Applet-Eingabe und dynamische Einstellungsschaltflächenmethode

In Verbindung stehende Artikel

Mehr sehen