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     <script type="text/javascript">
     7         window.onload = function(){
     8             var oDiv = document.getElementById('div1');
     9 
    10             function fnclock(){
    11                 // 在实际开发中,这个时间通过ajax从后台服务器传入,避免用户修改本地时间造成错误
    12                 var iNow = new Date();
    13                 // 未来时间:4月30日晚24点
    14                 var iFutrue = new Date(2020,3,30,24,0,0);
    15                 var iLeft = parseInt((iFutrue - iNow)/1000);
    16                 // 剩下多少天
    17                 var iDay = parseInt(iLeft/86400);
    18                 // 剩下多少个小时
    19                 var iHour = parseInt((iLeft%86400)/3600);
    20                 var iMinute = parseInt(((iLeft%86400)%3600)/60);
    21                 var iSecond = parseInt((((iLeft%86400)%3600)%60)%60);
    22                 var sTr = '距秒杀还有:' + fnTime(iDay) + '' + " " + fnTime(iHour) + ":" + fnTime(iMinute) + ':' + fnTime(iSecond);
    23                 oDiv.innerHTML = sTr;
    24             }
    25             fnclock();
    26             var temer = setInterval(fnclock,1000);
    27             function fnTime(n){
    28                 if (n<10) {
    29                     return '0' + n;
    30                 }
    31                 else{
    32                     return n;
    33                 }
    34             }
    35 
    36         }
    37     </script>
    38     <style type="text/css">
    39         div{
    40             width: 1000px;
    41             height: 300px;
    42             background-color: gold;
    43             text-align: center;
    44             margin: 100px auto 0;
    45             font-size: 30px;
    46             line-height: 300px;
    47             font-family: 'Microsoft Yahei';
    48             color: red;
    49         }
    50     </style>
    51 </head>
    52 <body>
    53     <div id="div1"></div>
    54 </body>
    55 </html>
  • 相关阅读:
    Spring Controller参数为空串的处理方式
    netstat用法
    zookeeper的配置项
    C++ Lambda表达式用法
    java命令行运行jar里的main类
    Random的nextInt用法
    【JAVA】删除某个目录及目录下的所有子目录和文件
    Centos7设置keepAlived开机自启动
    linux设置nginx开机自启动
    window.open()方法
  • 原文地址:https://www.cnblogs.com/kogmaw/p/12493068.html
Copyright © 2011-2022 走看看