欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js通过Date对象实现倒计时动画效果

程序员文章站 2022-07-06 20:56:28
js通过date对象实现倒计时效果,具体内容如下

js通过date对象实现倒计时效果,具体内容如下

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>倒计时动画</title>
  <style>
    div{
      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>
<div>
  <span id="nowtime"></span>
</div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。