• 技术文章 >web前端 >js教程

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

    小云云小云云2018-01-02 09:22:20原创745
    本文主要为大家详细介绍了js通过Date对象实现倒计时动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。

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


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

    相关推荐:

    jQuery模拟爆炸倒计时功能技术分享

    jQuery计时器功能和倒计时功能的实现

    三种js与jQuery实现用户注册倒计时功能的方法

    以上就是js通过Date对象实现倒计时动画效果实例代码的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:javascript Date 倒计时
    上一篇:微信小程序input输入及动态设置按钮方法 下一篇:vue-cli + sass 的正确打开方式
    php培训_php实战培训【立即报名】-php中文网第20期

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 一文搞定JavaScript字符串对象基本知识• JavaScript弱映射与弱集合知识详解• 一篇搞定JavaScript DOM详细操作• 深入聊聊JavaScript• javascript web页面刷新的方法收集_javascript技巧
    1/1

    PHP中文网