Heim > Web-Frontend > js-Tutorial > Hauptteil

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

小云云
Freigeben: 2018-01-20 11:12:13
Original
1666 Leute haben es durchsucht

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage