js網(wǎng)頁實時倒計時精確到秒級
更新時間：2014年02月10日 11:05:32 作者：
網(wǎng)頁實時倒計時，精確到秒級，和天數(shù)倒計時原理一樣,需要的朋友可以參考下
一個很好用的js倒計時！網(wǎng)頁實時倒計時，精確到秒級，和天數(shù)倒計時原理一樣。js倒計時一般用于商城網(wǎng)站團購，特賣，很多地方都可用到！希望能夠給大家?guī)韼椭?
效果如下：
<!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">小伙伴們距離情人節(jié)只剩：</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>
效果如下：
復(fù)制代碼 代碼如下:
<!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">小伙伴們距離情人節(jié)只剩：</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>
相關(guān)文章
這篇文章主要介紹了JS判斷客服QQ號在線還是離線狀態(tài)的方法,可實現(xiàn)完整的判斷QQ在線及對話的功能,是非常實用的技巧,需要的朋友可以參考下2015-01-01
使用layui實現(xiàn)樹形結(jié)構(gòu)的方法
今天小編就為大家分享一篇使用layui實現(xiàn)樹形結(jié)構(gòu)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
網(wǎng)頁源代碼保護(禁止右鍵、復(fù)制、另存為、查看源文件)
網(wǎng)頁源代碼保護(禁止右鍵、復(fù)制、另存為、查看源文件)，只能起一些簡單的防護2012-05-05
本文主要介紹了JavaScript中的堆棧與拷貝，能更好的幫助你理解JS的內(nèi)存機制，感興趣的同學(xué)，一定要認真看下2021-06-06
javaScript功能描述：本程序?qū)崿F(xiàn)在同意某某協(xié)議頁面對同意按鈕進行十秒鐘的禁用，同時在按鈕的Value顯示倒計時。2011-01-01
這篇文章主要給大家介紹了關(guān)于原生微信小程序中封裝一個模擬select下拉框組件的相關(guān)資料,文中介紹了如何在小程序中創(chuàng)建和使用自定義組件van-select,包括組件的創(chuàng)建步驟和在頁面中的應(yīng)用方法,需要的朋友可以參考下2024-11-11
微信小程序開發(fā)報:“app.json未找到”錯誤的原因與解決方法
這篇文章主要介紹了微信小程序開發(fā)中常見的“app.json文件內(nèi)容錯誤”及其解決方案,錯誤通常由核心文件路徑錯誤或配置問題引起,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-03-03
這篇文章主要給大家介紹了關(guān)于echart中tooltip自動展示的相關(guān)資料,ECharts是一款基于JavaScript的數(shù)據(jù)可視化圖表庫,提供直觀，生動,可交互,可個性化定制的數(shù)據(jù)可視化圖表,需要的朋友可以參考下2023-09-09
本篇文章主要介紹了Webpack執(zhí)行命令參數(shù)詳解 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了JS數(shù)組方法reverse()用法,結(jié)合實例形式分析了JS數(shù)組reverse()方法基本功能、用法與操作注意事項,需要的朋友可以參考下2020-01-01