• javascript


    计数时:

     

     

    结束时:

     

    示例:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 
     4 <head>
     5     <meta charset="UTF-8">
     6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     7     <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome">
     8     <title>活动倒计时示例</title>
     9 </head>
    10 
    11 <body>
    12     <div class="time">
    13         <span id="day">00</span>
    14         <span id="hour">00</span>
    15         <span id="month">00</span>
    16         <span id="second">00</span>
    17     </div>
    18     <script type="text/javascript">
    19         (function () {
    20             // 页面加载完
    21             window.onload = function () {
    22                 countTime();
    23             }
    24             // 小于9则添加前缀:012....
    25             function checkTime(_zero) {
    26                 return _zero > 9 ? _zero : '0' + _zero;
    27             }
    28             function countTime() {
    29 
    30                 // 截止时间. 年、月、日 时、分、秒 - 设置结束时间后 - 自动关闭计时器.
    31                 var dateStr = "2018/8/14 08:00:00";
    32 
    33                 //获取当前时间  
    34                 var date = new Date();
    35                 var now = date.getTime();
    36                 //设置截止时间  
    37                 var endDate = new Date(dateStr);
    38                 var end = endDate.getTime();
    39                 //时间差  
    40                 var leftTime = end - now;
    41                 //定义变量 d,h,m,s保存倒计时的时间  
    42                 var d, h, m, s;
    43                 if (leftTime >= 0) {
    44                     // 计天、时、分、秒
    45                     d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
    46                     h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
    47                     m = Math.floor(leftTime / 1000 / 60 % 60);
    48                     s = Math.floor(leftTime / 1000 % 60);
    49                     //将倒计时赋值到div中  
    50                     document.getElementById("day").innerHTML = d > 9 ? d + '' : checkTime(d) + "";
    51                     document.getElementById("hour").innerHTML = h > 9 ? h + '' : checkTime(h) + "";
    52                     document.getElementById("month").innerHTML = m > 9 ? m + '' : checkTime(m) + "";
    53                     document.getElementById("second").innerHTML = s > 9 ? s + '' : checkTime(s) + "";
    54                     //递归每秒调用countTime方法,显示动态时间效果  
    55                     setTimeout(countTime, 1000);
    56                 } else {
    57                     document.getElementById("day").innerHTML = "00天";
    58                     document.getElementById("hour").innerHTML = "00时";
    59                     document.getElementById("month").innerHTML = "00分";
    60                     document.getElementById("second").innerHTML = "00秒";
    61                 }
    62             }
    63         })();
    64 
    65     </script>
    66 </body>
    67 
    68 
    69 </html>
  • 相关阅读:
    eclipse自动部署问题
    eclipse下遇到 无法解析类型 javax.servlet.http.HttpServletRequest
    Spring MVC学习笔记——POJO和DispatcherServlet
    JavaWeb学习笔记——Tomcat数据源
    JavaWeb学习笔记——表达式语言
    Bootstrap学习笔记
    ubuntu下git安装及使用
    JavaWeb学习笔记——jsp基础语法
    Java数据结构——容器总结
    Linux下htop的使用
  • 原文地址:https://www.cnblogs.com/cisum/p/9472306.html
Copyright © 2020-2023  润新知