js實(shí)現(xiàn)網(wǎng)頁(yè)倒計(jì)時(shí)、網(wǎng)站已運(yùn)行時(shí)間功能的代碼3例
1、jQuery.countdown插件
顯示格式:50 周 01 天 07 小時(shí) 18 分 41 秒(秒為跑秒)
一個(gè)頁(yè)面可以有多個(gè)倒計(jì)時(shí)實(shí)例,可以停止和開(kāi)始,它沒(méi)有提供太多的功能,但時(shí)間格式和輸出的尺寸都可以自定義。
目前最新版v2.0.2,官方地址http://hilios.github.io/jQuery.countdown/
例如:
<div id="getting-started"></div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="http://hilios.github.io/jQuery.countdown/javascripts/jquery.countdown.min.js"></script>
<script type="text/javascript">
$('#getting-started').countdown('2016/01/01 00:00', function(event) {
$(this).html(event.strftime('%w 周 %d 天 %H:%M:%S'));
});
</script>
輸出結(jié)果:50 周 01 天 07 小時(shí) 18 分 41 秒
注意:如果需要一共還有多少天數(shù)用%D,參數(shù)說(shuō)明:
Y: "years"
m: "months"
w: "weeks"
d: "days"
D: "totalDays"
H: "hours"
M: "minutes"
S: "seconds"
2、顯示格式:距離結(jié)束時(shí)間還有:00天05小時(shí)25分30秒(秒為跑秒)
<div id="time" class="time"></div>
<script language=javascript>
function show_date_time(){
window.setTimeout("show_date_time()", 1000);
target=new Date(2014,0,15,17,0,0); //注意:表示月份的參數(shù)介于 0 到 11 之間。也就是說(shuō),如果希望把月設(shè)置為8月,則參數(shù)應(yīng)該是7。
today=new Date();
timeold=(target.getTime()-today.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(e_daysold-daysold)*24;
hrsold=Math.floor(e_hrsold);
e_minsold=(e_hrsold-hrsold)*60;
minsold=Math.floor((e_hrsold-hrsold)*60);
seconds=Math.floor((e_minsold-minsold)*60);
if (daysold<0) {
document.getElementById("time").innerHTML="逾期,倒計(jì)時(shí)已經(jīng)失效";
}
else{
if (daysold<10) {daysold="0"+daysold}
if (hrsold<10) {hrsold="0"+hrsold}
if (minsold<10) {minsold="0"+minsold}
if (seconds<10) {seconds="0"+seconds}
if (daysold>0) {
document.getElementById("time").innerHTML="距離結(jié)束時(shí)間還有:"+daysold+"天"+hrsold+"小時(shí)"+minsold+"分"+seconds+"秒";
}
else
document.getElementById("time").innerHTML="<font color=red>距離結(jié)束時(shí)間還有:"+daysold+"天"+hrsold+"小時(shí)"+minsold+"分"+seconds+"秒</font>"; //結(jié)束時(shí)間小于1天,字體呈紅色提醒
}
}
show_date_time();
</script>
3、 顯示格式:已運(yùn)行0 年 1 天 0 小時(shí) 4 分鐘 35 秒(秒為跑秒)
<span id="sitetime"></span>
<script language=javascript>
function siteTime(){
window.setTimeout("siteTime()", 1000);
var seconds = 1000
var minutes = seconds * 60
var hours = minutes * 60
var days = hours * 24
var years = days * 365
var today = new Date()
var todayYear = today.getFullYear()
var todayMonth = today.getMonth()
var todayDate = today.getDate()
var todayHour = today.getHours()
var todayMinute = today.getMinutes()
var todaySecond = today.getSeconds()
/* Date.UTC() -- 返回date對(duì)象距世界標(biāo)準(zhǔn)時(shí)間(UTC)1970年1月1日午夜之間的毫秒數(shù)(時(shí)間戳)
year - 作為date對(duì)象的年份,為4位年份值
month - 0-11之間的整數(shù),做為date對(duì)象的月份
day - 1-31之間的整數(shù),做為date對(duì)象的天數(shù)
hours - 0(午夜24點(diǎn))-23之間的整數(shù),做為date對(duì)象的小時(shí)數(shù)
minutes - 0-59之間的整數(shù),做為date對(duì)象的分鐘數(shù)
seconds - 0-59之間的整數(shù),做為date對(duì)象的秒數(shù)
microseconds - 0-999之間的整數(shù),做為date對(duì)象的毫秒數(shù) */
var t1 = Date.UTC(2014,0,14,11,19,00)
var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond)
var diff = t2-t1
var diffYears = Math.floor(diff/years)
var diffDays = Math.floor((diff/days)-diffYears*365)
var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours)
var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes)
var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds)
document.getElementById("sitetime").innerHTML=" 已運(yùn)行"+diffYears+" 年 "+diffDays+" 天 "+diffHours+" 小時(shí) "+diffMinutes+" 分鐘 "+diffSeconds+" 秒"
}
siteTime()
</script>
- JS實(shí)現(xiàn)倒計(jì)時(shí)(天數(shù)、時(shí)、分、秒)
- js代碼實(shí)現(xiàn)點(diǎn)擊按鈕出現(xiàn)60秒倒計(jì)時(shí)
- 2種簡(jiǎn)單的js倒計(jì)時(shí)方式
- js實(shí)現(xiàn)點(diǎn)擊獲取驗(yàn)證碼倒計(jì)時(shí)效果
- 一個(gè)不錯(cuò)的js html頁(yè)面倒計(jì)時(shí)可精確到秒
- Javascript實(shí)現(xiàn)商品秒殺倒計(jì)時(shí)(時(shí)間與服務(wù)器時(shí)間同步)
- 原生JS實(shí)現(xiàn)簡(jiǎn)單的倒計(jì)時(shí)功能示例
- javascript秒數(shù)倒計(jì)時(shí)自動(dòng)跳轉(zhuǎn)代碼
- JS/jQ實(shí)現(xiàn)免費(fèi)獲取手機(jī)驗(yàn)證碼倒計(jì)時(shí)效果
- 團(tuán)購(gòu)、定時(shí)搶購(gòu)倒計(jì)時(shí)js版
- JavaScript頁(yè)面倒計(jì)時(shí)功能完整示例
相關(guān)文章
擴(kuò)展js對(duì)象數(shù)組的OrderByAsc和OrderByDesc方法實(shí)現(xiàn)思路
js的擴(kuò)展方法是基于原型的,如Array.prototype.XXXX就是給Array擴(kuò)展XXX方法,然后數(shù)組都能使用這個(gè)方法了,在對(duì)象數(shù)組里面經(jīng)常有根據(jù)屬性來(lái)進(jìn)行排序的,升序,降序的,下面與大家分享自己寫(xiě)的一個(gè)2013-05-05使用JS中的exec()方法構(gòu)造正則表達(dá)式驗(yàn)證
這篇文章主要介紹了使用JS中的exec()方法構(gòu)造正則表達(dá)式驗(yàn)證的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08javascript下function聲明一些小結(jié)
function聲明一些東西,我們都知道function和var一樣是預(yù)處理的在js里面,但是到底什么是函數(shù)聲明呢,我們來(lái)看幾個(gè)例子2007-12-12JavaScript String 對(duì)象常用方法總結(jié)
下面小編就為大家?guī)?lái)一篇JavaScript String 對(duì)象常用方法總結(jié)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考2016-04-04JavaScript設(shè)計(jì)模式之單體模式全面解析
單體模式可以說(shuō)是javascript中最基本也是最有用的模式之一,接下來(lái)通過(guò)本文給大家解析js設(shè)計(jì)模式之單體模式,非常不錯(cuò),感興趣的朋友一起看看吧2016-09-09從階乘函數(shù)對(duì)比Javascript和C#的異同
今天學(xué)習(xí)Javascript函數(shù),發(fā)現(xiàn)這完全是一個(gè)神奇的東西。跟我們平常所見(jiàn)強(qiáng)類(lèi)型語(yǔ)言中的函數(shù)有好多不同。下面我們就從C#和JavaScript的兩個(gè)計(jì)算階乘的函數(shù)中比較兩者的異同2012-05-05用原生js做個(gè)簡(jiǎn)單的滑動(dòng)效果的回到頂部
很多網(wǎng)頁(yè)在下方都會(huì)放置一個(gè)“返回頂部”按鈕,這樣可以幫助訪客重新找到導(dǎo)航或者重溫一遍廣告,于是將返回頂部功能做成了滑動(dòng)效果2014-10-10