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>
  • 相关阅读:
    触发器
    数据库function和procedure
    java连接数据库
    单例模式
    python入门相关笔记
    ubuntu 系统备份到移动硬盘(tar) 还原到另一台电脑
    大白菜pe 通用pe 安装心得
    18 java 代理模式 (转)
    5 HBase 常用Shell命令
    1、shell 简介
  • 原文地址:https://www.cnblogs.com/kogmaw/p/12493068.html
Copyright © 2011-2022 走看看