一个很好用的js倒计时

2018-07-20 来源：open-open

一个很好用的js倒计时！网页适时倒计时，精确到秒级，和天数倒计时原理一样。js倒计时一般用于商城网站团购，特卖，很多地方都可用到

    <!DOCTYPE html>  
    <html>  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
        <style type="text/css">    
       .leave_time_font{margin-left:35%;}  
       #fo{margin-left:32%;}  
        </style>   
    <title>WoYaoNi.CN-倒计时</title>  
    </head>  
    <body>  
    <h1>WoYaoNi.CN    </h1>  
    <script src="./jquery.js"></script>  
    <script type="text/javascript">  
    $(document).ready(function(e) {  
    var _countSeconds = 0;  
     function _countDown(){  
      _countSeconds ++;  
      $('input.surplustime').each(function(index, element) {  
       var $this = $(this);  
       var _totalTime = Number($this.val()) - _countSeconds;  
       var _day = parseInt(_totalTime/86400);  
       var _hours = parseInt(_totalTime%86400/3600);  
       var _minutes = parseInt(_totalTime%86400%3600/60);  
       var _seconds = parseInt(_totalTime%86400%3600%60);  
       var _strLite = '<span class="day">'+_day+'</span>天<span class="hour">'+_hours+'</span>小时<span class="minutes">'+_minutes+'</span>分<span class="seconds">'+_seconds+'</span>秒';  
       var _str = '倒计时：'+_strLite;  
       if($this.next('p.daojishi').length > 0){  
        $this.next('p.daojishi').html(_str);  
       }else if($this.next('p.leave_time_font').length > 0){  
        $this.next('p.leave_time_font').html(_strLite);  
       }  
      });  
     }  
     setInterval(_countDown, 1000);  
    })  
    </script>  
    </head>  
    <body>  
    <?php  
    ini_set('date.timezone','Asia/Shanghai');  
    $currenttime = time();  
    $a = strtotime('2014-2-14 00:00');  
    $b = $a-$currenttime;  
    ?>  
      
    <div id="djs">  
    <div id="fo">小伙伴们距离情人节只剩：</div>  
    <input type="hidden" name="surplustime" class="surplustime" value="<?php echo $b; ?>" />  
     <p class="leave_time_font"><span class="day">0</span>天<span class="hour">0</span>小时<span class="minutes">0</span>分<span class="seconds">0</span>秒</p>  
    </div>  
    </body>   
    </html>

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。

上一篇:C# 计算文件MD5值

下一篇: 每天自动备份mysql脚本

最新资讯

热门推荐