suchen

Heim  >  Artikel  >  Web-Frontend  >  js implementiert den Countdown-Animationseffekt durch die gemeinsame Nutzung von Date-Objektbeispielen

js implementiert den Countdown-Animationseffekt durch die gemeinsame Nutzung von Date-Objektbeispielen

小云云
小云云Original
2018-01-20 11:12:131663Durchsuche

Dieser Artikel stellt hauptsächlich den durch js erzielten Countdown-Animationseffekt vor. Er hat einen gewissen Referenzwert. Ich hoffe, er kann jedem helfen.

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:

HTML5+CSS3-Fortschrittsbalken-Countdown-Animations-Spezialeffektcode [empfohlen]_HTML5-Tutorial-Fähigkeiten

Wie Js Datumsobjekte verwaltet

Zusammenfassung von Datumsobjekte in JavaScript

Das obige ist der detaillierte Inhalt vonjs implementiert den Countdown-Animationseffekt durch die gemeinsame Nutzung von Date-Objektbeispielen. 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：Detaillierte Erläuterung des Eingabebeispiels für das WeChat-AppletNächster Artikel：Detaillierte Erläuterung des Eingabebeispiels für das WeChat-Applet

In Verbindung stehende Artikel

Mehr sehen