zoukankan      html  css  js  c++  java
  • js倒计时功能

    在学习的过程中做了一个倒计时功能,用到的主要知识点有new Date()函数和setInterval定时器功能,在这里记录一下

     1 <html>
     2     <head>
     3         <style>
     4            h1 {
     5                text-align: center;
     6            }
     7         </style>
     8     </head>
     9 
    10 <body>
    11     <h1>距离2019双十一还剩<span id="d"></span>天<span id="h"></span>时<span id="m"></span>分<span id="s"></span>秒</h1>
    12     <script>
    13         //xx天xx时xx分xx秒
    14         var endTime = new Date('2019/11/11'); //结束日期
    15         //setInterval clearInterval 这些是window提供的方法 
    16         //setTimeout clearTimeout
    17         var d = document.getElementById('d')
    18         var h = document.getElementById('h')
    19         var m = document.getElementById('m')
    20         var s = document.getElementById('s')
    21         setInterval(() => {
    22             var now = new Date(); // 现在
    23             //转换成秒计算  getTime() 
    24             var diff = endTime.getTime() - now.getTime(); //从1970年1月1日到现在的毫秒
    25             diff = parseInt(diff / 1000) //换成秒数
    26             var days = parseInt(diff / (24 * 3600)) //天数
    27             var hours = parseInt(diff % (24 * 3600) / 3600);//小时 多少天数剩下的
    28             var minites = parseInt(diff % 3600 / 60) //分 多少小时剩下的
    29             var seconds = diff % 60; //多少分钟剩下的
    30             var str = '距离2019双十一还剩' + days + '天' + hours + '天' + minites + '分' + seconds + '秒'
    31             d.innerHTML = days
    32             h.innerHTML = hours
    33             m.innerHTML = minites
    34             s.innerHTML = seconds
    35         }, 1000); //每隔一秒执行函数中的代码  
    36 51     </script>
    52 </body>
    53 
    54 </html>
    不积跬步无以至千里
  • 相关阅读:
    团队博客——Sprint计划会议1
    团队博客第一次(团队成员及团队作业说明)
    第一次冲刺-团队开发(第一天)
    cnblog评价以及团队软件的部分改善
    Sprint计划会议1
    团队开发--手机小游戏 需求分析
    团队博客和成员
    第一次冲刺01
    第二次冲刺——第二次总结
    团队开发——Alpha版总结会议
  • 原文地址:https://www.cnblogs.com/lyt0207/p/11820866.html
Copyright © 2011-2022 走看看