zoukankan      html  css  js  c++  java
  • javascript 体验倒计时:距离国庆还有多长时间

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Document</title>
     6     <style>
     7         div {
     8             width: 1210px;
     9             margin: 200px auto;
    10             color: orange;
    11             text-align: center;
    12             font: 600 30px/30px "simSun";
    13         }
    14     </style>
    15 </head>
    16 <body>
    17     <div></div>
    18 
    19     <script>
    20         var div = document.getElementsByTagName("div")[0];
    21         var timer = setInterval(fn,500);
    22 
    23         function fn(){
    24             var nowtime = new Date();
    25             var future = new Date("2018/10/01 10:10:10");
    26             var timeSum = future.getTime() - nowtime.getTime();
    27             var day = parseInt(timeSum/1000/60/60/24);
    28             var hour = parseInt(timeSum/1000/60/60%24);
    29             var minu = parseInt(timeSum/1000/60%60);
    30             var sec = parseInt(timeSum/1000%60);
    31             // var millsec = parseInt(timeSum%1000);
    32 
    33             day = day < 10? "0"+day:day;
    34             hour = hour < 10? "0"+hour:hour;
    35             minu = minu < 10? "0"+minu:minu;
    36             sec = sec < 10? "0"+sec:sec;
    37             // if (millsec < 10) {
    38             //     millsec = "00"+millsec;
    39             // }else if (millsec < 100) {
    40             //     millsec = "0"+millsec;
    41             // }
    42 
    43             if (timeSum < 0) {
    44                 div.innerHTML = "距离国庆节还有00天00小时00分00秒";
    45                 clearInterval(timer);
    46                 return;
    47             }
    48             div.innerHTML = "距离国庆节还有"+day+""+hour+"小时"+minu+""+sec+"";
    49         }
    50     </script>
    51 </body>
    52 </html>
    你必须穷尽一生磨练技能,这就是成功的秘诀,也是让人家敬重的关键。
  • 相关阅读:
    新浪微博数据抓取(java实现)
    在Tomcat下配置Solr 4.x 版本
    使用AWT组件实现验证码功能
    css自动换行
    CentOS6.5把MySQL从5.1升级到5.6后,MySQL不能启动
    centos绑定多个域名
    Centos下Yum安装PHP5.5,5.6,7.0
    CSS总结
    覆盖物
    高德地图插件
  • 原文地址:https://www.cnblogs.com/knuzy/p/8836687.html
Copyright © 2011-2022 走看看