Home > Article > Web Front-end > js implements countdown animation effect through Date object example sharing

js implements countdown animation effect through Date object example sharing

小云云Original: 2018-01-20 11:12:131637browse

This article mainly introduces the countdown animation effect of js through Date object in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

js implements the countdown effect through Date object, the specific content is as follows

<!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>

Related recommendations:

html5+ css3 progress bar countdown animation special effects code [recommended]_html5 tutorial skills

How to operate the date object in Js

Summary of the Date object in JavaScript

The above is the detailed content of js implements countdown animation effect through Date object example sharing. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of WeChat applet input input examplesNext article：Detailed explanation of WeChat applet input input examples

See more

js implements countdown animation effect through Date object example sharing

Related articles