Home >Web Front-end >JS Tutorial >js implements countdown animation effect example code through Date object

js implements countdown animation effect example code through Date object

小云云Original: 2018-01-02 09:22:201577browse

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:

jQuery simulation Explosion countdown function technology sharing

JQuery timer function and countdown function implementation

Three js and jQuery methods to implement user registration countdown function

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

jquery date JS 对象

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：WeChat applet input input and dynamic setting button methodNext article：WeChat applet input input and dynamic setting button method

See more

js implements countdown animation effect example code through Date object

Related articles