zoukankan      html  css  js  c++  java
  • 使用javaScript实现简单倒计时功能

    效果如下:

    1 <div class="warp">
    2     <p id="txt">距离”十一“国庆放假还有:</p><br>
    3     <p id="time"></p>
    4 </div>

    javaScript源码:

     1 <script>
     2     $(document).ready(function(e) {
     3         
     4         function timer()
     5         {
     6             //获取系统当前时间
     7             var seconds;
     8             var minutes;
     9             var hours;
    10             var days;
    11             var year;
    12             var mouth;
    13             
    14             var date = new Date();
    15             seconds = date.getSeconds();
    16             minutes = date.getMinutes();
    17             hours = date.getHours();
    18             year = date.getFullYear();
    19             mouth = date.getMonth()+1;
    20             days = date.getDate();
    21             
    22             //因为Date获取的当前时间月份是0-11,少一个月,因此需先获取到各个时间后,重新定义当前时间
    23             var shiyi = new Date(2015,10,1,0,0,0);
    24             var nowDate = new Date(year,mouth,days,hours,minutes,seconds);
    25             
    26             var shiyiTime = shiyi.getTime();
    27             var nowTime = nowDate.getTime();
    28             
    29             var cTime = shiyiTime - nowTime;
    30             var cDD = checkTime(parseInt(cTime/(1000*60*60*24),10));
    31             var cHH = checkTime(parseInt(cTime/1000/60/60%24,10));
    32             var cMM = checkTime(parseInt(cTime/1000/60%60,10));
    33             var cSS = checkTime(parseInt(cTime/1000%60,10));
    34             
    35             function checkTime(i)
    36             {
    37                 if(i < 10)
    38                 {
    39                     i = "0" + i;    
    40                 }    
    41                 return i;
    42             }
    43             
    44             document.getElementById("time").innerHTML = cDD+"天"+cHH+"时"+cMM+"分"+cSS+"秒";
    45         }
    46         setInterval(timer,1000);
    47            
    48     });
    49 </script>
  • 相关阅读:
    ElasticSearch 2 (15)
    ElasticSearch 2 (14)
    ElasticSearch 2 (13)
    ElasticSearch 2 (12)
    浅谈 Comet、SSE、WebSocket
    js快速将字符串数组转化为数字数组(互换)
    如何给自己的vue组件做一个提示
    顶级域名和子级域名之间的cookie共享和相互修改、删除
    前端工程化
    数据校验工具 data-police
  • 原文地址:https://www.cnblogs.com/grnBlogs/p/4819000.html
Copyright © 2011-2022 走看看