zoukankan      html  css  js  c++  java
  • Javascript倒计时 支持自定义样式 TC

    在上版本改进的,这样控制样式更加灵活。

    JS脚本:

      1 <script language="javascript" type="text/javascript">

     2         var interval = 1000;
     3         function ShowCountDown(year, month, day, divname) {
     4             var now = new Date();
     5             //new Date(年,月,日,时,分,秒)
     6             var endDate = new Date(year, month - 1, day, 1730);
     7             var leftTime = endDate.getTime() - now.getTime();
     8             var leftsecond = parseInt(leftTime / 1000);
     9             var day1 = Math.floor(leftsecond / (60 * 60 * 24));
    10             var hour1 = Math.floor((leftsecond - day1 * 24 * 60 * 60/ 3600);
    11             var hour = Math.floor((leftsecond - 60 * 60/ 3600);
    12             //小时如果不大于0 显示为0
    13             if (hour > 0) {
    14             }
    15             else {
    16                 hour = 0;
    17             }
    18             if (day1 < 0) {
    19                 hour = hour1
    20             }
    21             var minute = Math.floor((leftsecond - day1 * 24 * 60 * 60 - hour1 * 3600/ 60);
    22             var second = Math.floor(leftsecond - day1 * 24 * 60 * 60 - hour1 * 3600 - minute * 60);
    23             var cc = document.getElementById(divname);
    24             //判断是否到活动时间 如果到活动时间 全部默认显示00:00:00
    25             if (leftTime > 0) {
    26                 document.getElementById("daoYear").innerHTML = year + "";
    27                 document.getElementById("daoMonth").innerHTML = month + "";
    28                 document.getElementById("daoDay").innerHTML = day + "";
    29                 document.getElementById("daoji_s").innerHTML = hour + "";
    30                 document.getElementById("daoji_f").innerHTML = minute + "";
    31                 document.getElementById("daoji_m").innerHTML = second + "";
    32             }
    33             else {
    34                 document.getElementById("daoYear").innerHTML = "0000" + "";
    35                 document.getElementById("daoMonth").innerHTML = "00" + "";
    36                 document.getElementById("daoDay").innerHTML = "00" + "";
    37                 document.getElementById("daoji_s").innerHTML = "00" + "";
    38                 document.getElementById("daoji_f").innerHTML = "00" + "";
    39                 document.getElementById("daoji_m").innerHTML = "00" + "";
    40             }
    41         }
    42         //showCountDown(年、月、日,Div ID)
    43         window.setInterval(function () { ShowCountDown(20100813'showData'); }, interval); 
    44     </script>

    Html:

     1  <div id="showData">
     2             <table>
     3                 <tr>
     4                     <td>
     5                         还有:
     6                     </td>
     7                     <td>
     8                         <div id="daoYear">
     9                             0000</div>
    10                     </td>
    11                     <td>
    12                         <div id="daoMonth">
    13                             00</div>
    14                     </td>
    15                     <td>
    16                         <div id="daoDay">
    17                             00</div>
    18                     </td>
    19                     <td>
    20                         <div id="daoji_s">
    21                             00</div>
    22                     </td>
    23                     <td>
    24                         <div id="daoji_f">
    25                             00</div>
    26                     </td>
    27                     <td>
    28                         <div id="daoji_m">
    29                             00</div>
    30                     </td>
    31                 </tr>
    32             </table>
    33         </div>

    作者:Mr S.R Lee
    出处:http://www.cnblogs.com/LeeYongze
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利.

  • 相关阅读:
    使用 jsPlumb 绘制拓扑图 —— 异步加载与绘制的实现
    改善记忆力的二十种记忆方法,随便你挑!
    怎样完成一次比较漂亮的晋升面试演讲
    产品运维的思考与总结
    Jtester+unitils+testng:DAO单元测试文件模板自动生成
    生活、工作和理想
    推荐《需求:缔造伟大商业传奇的根本力量》
    星光之旅
    谈读书
    生命之反思
  • 原文地址:https://www.cnblogs.com/LeeYongze/p/1797847.html
Copyright © 2011-2022 走看看