一個很好用的js倒計時

gxfw 9年前發布 | 1K 次閱讀 PHP

一個很好用的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>  </pre>
 本文由用戶 gxfw 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！