js網(wǎng)頁(yè)實(shí)時(shí)倒計(jì)時(shí)精確到秒級(jí)
更新時(shí)間:2014年02月10日 11:05:32 作者:
網(wǎng)頁(yè)實(shí)時(shí)倒計(jì)時(shí),精確到秒級(jí),和天數(shù)倒計(jì)時(shí)原理一樣,需要的朋友可以參考下
一個(gè)很好用的js倒計(jì)時(shí)!網(wǎng)頁(yè)實(shí)時(shí)倒計(jì)時(shí),精確到秒級(jí),和天數(shù)倒計(jì)時(shí)原理一樣。js倒計(jì)時(shí)一般用于商城網(wǎng)站團(tuán)購(gòu),特賣(mài),很多地方都可用到!希望能夠給大家?guī)?lái)幫助!
效果如下:
<!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-倒計(jì)時(shí)</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>小時(shí)<span class="minutes">'+_minutes+'</span>分<span class="seconds">'+_seconds+'</span>秒';
var _str = '倒計(jì)時(shí):'+_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>小時(shí)<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-倒計(jì)時(shí)</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>小時(shí)<span class="minutes">'+_minutes+'</span>分<span class="seconds">'+_seconds+'</span>秒';
var _str = '倒計(jì)時(shí):'+_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>小時(shí)<span class="minutes">0</span>分<span class="seconds">0</span>秒</p>
</div>
</body>
</html>
您可能感興趣的文章:
- js實(shí)現(xiàn)點(diǎn)擊注冊(cè)按鈕開(kāi)始讀秒倒計(jì)時(shí)的小例子
- js幾秒以后倒計(jì)時(shí)跳轉(zhuǎn)示例
- js實(shí)現(xiàn)網(wǎng)頁(yè)倒計(jì)時(shí)、網(wǎng)站已運(yùn)行時(shí)間功能的代碼3例
- php+js實(shí)現(xiàn)倒計(jì)時(shí)功能
- 簡(jiǎn)單易用的倒計(jì)時(shí)js代碼
- 一個(gè)不錯(cuò)的js html頁(yè)面倒計(jì)時(shí)可精確到秒
- JS實(shí)現(xiàn)倒計(jì)時(shí)和文字滾動(dòng)的效果實(shí)例
- JS倒計(jì)時(shí)代碼匯總
- 基于javascript實(shí)現(xiàn)精確到毫秒的倒計(jì)時(shí)限時(shí)搶購(gòu)
相關(guān)文章
JavaScript實(shí)現(xiàn)拖拽簡(jiǎn)單效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)拖拽簡(jiǎn)單效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09js中調(diào)用微信的掃描二維碼功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了在js中調(diào)用微信的掃描二維碼功能的實(shí)現(xiàn)代碼,本文給大家分享了注意事項(xiàng)及常見(jiàn)問(wèn)題分析,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04js動(dòng)畫(huà)(animate)簡(jiǎn)單引擎代碼示例
仿照f(shuō)lash的動(dòng)畫(huà)原理,自己寫(xiě)了一個(gè)非常簡(jiǎn)單的js動(dòng)畫(huà)引擎。2012-12-12Javascript中查找不以XX字符結(jié)尾的單詞示例代碼
我在寫(xiě)這篇文章之前花了2個(gè)多小時(shí)在弄正則表達(dá)式,下為大家介紹下具體的實(shí)現(xiàn)思路,感興趣的朋友可以參考下2013-10-10小程序?qū)崿F(xiàn)左右來(lái)回滾動(dòng)字幕效果
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)左右來(lái)回滾動(dòng)字幕效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-12-12小程序短信驗(yàn)證碼頁(yè)面實(shí)現(xiàn)demo
這篇文章主要為大家介紹了小程序短信驗(yàn)證碼頁(yè)實(shí)現(xiàn)demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11Array數(shù)組對(duì)象中的forEach、map、filter及reduce詳析
這篇文章主要給大家介紹了關(guān)于Array數(shù)組對(duì)象中forEach、map、filter及reduce的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用array數(shù)據(jù)具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-08-08