這個(gè)效果的實(shí)現(xiàn)關(guān)鍵是對(duì)Date對(duì)象和setTimeout的使用。
一共有三個(gè)例子，HTML結(jié)構(gòu)如下，就不添加CSS樣式了。
<body>
當(dāng)前時(shí)間：<p id="p1"></p>
高考倒計(jì)時(shí)：<p id="p2"></p>
限時(shí)搶購(gòu)：<p id="p3"></p>
</body>
主要體會(huì)javascript的實(shí)現(xiàn)
window.onload=function () {
var p1=document.getElementById("p1"),
p2=document.getElementById("p2");
p3=document.getElementById("p3");
showtime1();
showtime2();
showtime3();
}
1.簡(jiǎn)單的實(shí)現(xiàn)當(dāng)前時(shí)間的顯示
function showtime1() {
var nowdate=new Date();//創(chuàng)建Date對(duì)象nowdate,以獲取當(dāng)前時(shí)間
var year=nowdate.getFullYear(),//獲取年份
month=nowdate.getMonth()+1,//獲取月份，getMonth()得到的是0-11，需要加1
date=nowdate.getDate(),//獲取日份
day=nowdate.getDay(),//獲取一周中的某一天，getDay()得到的是0-6
week=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],
h=nowdate.getHours(),
m=nowdate.getMinutes(),
s=nowdate.getSeconds(),
h=checkTime(h),//函數(shù)checkTime用于格式化時(shí)，分，秒
m=checkTime(m),
s=checkTime(s);
p1.innerHTML=year+"年"+month+"月"+date+"日"+week[day]+h+"："+m+"："+s;
setTimeout(showtime1, 1000);//反復(fù)執(zhí)行函數(shù)本身
}
其中的checkTime函數(shù)如下：
function checkTime(i) {
if (i<10) {
i="0"+i;
}
return i;
}
因?yàn)槠綍r(shí)看到的時(shí)間格式一般是00:00:01,而getHours，getMinutes，getSeconds得到格式是0到9，不是00到09這樣的格式。所以在從9變成10的過程中，有一位數(shù)，變成兩位數(shù)，同樣在充59秒變?yōu)?秒或者59分變?yōu)?分或者23時(shí)變?yōu)?時(shí)。
比如 23:59:59 再下一秒 應(yīng)該變?yōu)?0:00:00；若未使用checkTime函數(shù)進(jìn)行處理，則會(huì)變?yōu)?:0:0，這樣格式上就有點(diǎn)不統(tǒng)一，而且視覺上也有字?jǐn)?shù)增加或減少的突變。(后面兩個(gè)例子就不用checkTime函數(shù)對(duì)時(shí)分秒進(jìn)行處理了?。?！)
2.高考倒計(jì)時(shí)效果實(shí)現(xiàn)
function showTime2() {
var nowtime=new Date(),//獲取當(dāng)前時(shí)間
endtime=new Date("2017/6/6");//定義結(jié)束時(shí)間
var lefttime=endtime.getTime()-nowtime.getTime(),//距離結(jié)束時(shí)間的毫秒數(shù)
leftd=Math.floor(lefttime/(1000*60*60*24)),//計(jì)算天數(shù)
lefth=Math.floor(lefttime/(1000*60*60)%24),//計(jì)算小時(shí)數(shù)
leftm=Math.floor(lefttime/(1000*60)%60),//計(jì)算分鐘數(shù)
lefts=Math.floor(lefttime/1000%60);//計(jì)算秒數(shù)
p2.innerHTML=leftd+"天"+lefth+":"+leftm+":"+lefts;
setTimeout(showTime2, 1000);
}
其中比較重要的幾點(diǎn)：
① 定義結(jié)束的時(shí)間endtime=new Date("2017/6/6")是通過new一個(gè)帶有參數(shù)的Date對(duì)象，直接 new Date()則是直接獲取到當(dāng)前的時(shí)間；
② getTime()方法得到的是距離1970 年 1 月 1 日的毫秒數(shù)。
③天數(shù)，小時(shí)數(shù)，分鐘數(shù)和秒數(shù)的計(jì)算，%（取模運(yùn)算）。得到距離結(jié)束時(shí)間的毫秒數(shù)（剩余毫秒數(shù)），除以1000得到剩余秒數(shù)，再除以60得到剩余分鐘數(shù)，再除以60得到剩余小時(shí)數(shù)。除以24得到剩余天數(shù)。剩余秒數(shù) lefttime/1000 模60得到秒數(shù)，剩余分鐘數(shù) lefttime/(1000*60) 模60得到分鐘數(shù)，剩余小時(shí)數(shù)模 lefttime/(1000*60*60) 模24得到小時(shí)數(shù)。
3.限時(shí)搶購(gòu)倒計(jì)時(shí)效果
function showtime3() {
var nowtime=new Date(),
endtime=new Date("2020/1/1,00:00:00"),//設(shè)置結(jié)束時(shí)間
lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000),
d=Math.floor(lefttime/(60*60*24)),
h=Math.floor(lefttime/(60*60)%24),
m=Math.floor(lefttime/60%60),
s=Math.floor(lefttime%60);
p3.innerHTML=d+"天"+h+"小時(shí)"+m+"分"+s+"秒";
setTimeout(showtime3, 1000);
}
其實(shí)和第二個(gè)例子大同小異，區(qū)別是結(jié)束時(shí)間的設(shè)置 new Date("2020/1/1,00:00:00")
下面是完整的代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒計(jì)時(shí)效果</title>
<script type="text/javascript">
function checkTime(i) {
if (i<10) {
i="0"+i;
}
return i;
}
window.onload=function () {
var p1=document.getElementById("p1"),
p2=document.getElementById("p2");
showtime1();
showtime2();
showtime3();
}
function showtime1() {
var nowdate=new Date();
var year=nowdate.getFullYear(),//年份
month=nowdate.getMonth()+1,//月份
date=nowdate.getDate(),//日
week=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],
day=nowdate.getDay(),//getDay獲取0-6
h=nowdate.getHours(),
h=checkTime(h),
m=nowdate.getMinutes(),
m=checkTime(m),
s=nowdate.getSeconds(),
s=checkTime(s);
p1.innerHTML=year+"年"+month+"月"+date+"日"+week[day]+h+"："+m+"："+s;
setTimeout(showtime1, 1000);
}
function showtime2() {
var nowtime=new Date(),
endtime=new Date("2017/6/6");
var lefttime=endtime.getTime()-nowtime.getTime(),
leftd=Math.floor(lefttime/(1000*60*60*24)),
lefth=Math.floor(lefttime/(1000*60*60)%24),
leftm=Math.floor(lefttime/(1000*60)%60),
lefts=Math.floor(lefttime/1000%60);
p2.innerHTML=leftd+"天"+lefth+":"+leftm+":"+lefts;
setTimeout(showtime2, 1000);
}
function showtime3() {
var nowtime=new Date(),
endtime=new Date("2020/1/1,00:00:00"),
lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000),
d=Math.floor(lefttime/(60*60*24)),
h=Math.floor(lefttime/(60*60)%24),
m=Math.floor(lefttime/60%60),
s=Math.floor(lefttime%60);
p3.innerHTML=d+"天"+h+"小時(shí)"+m+"分"+s+"秒";
setTimeout(showtime3, 1000);
}
</script>
</head>
<body>
當(dāng)前時(shí)間：<p id="p1"></p>
高考倒計(jì)時(shí)：<p id="p2"></p>
限時(shí)搶購(gòu)：<p id="p3"></p>
</body>
</html>
以上這篇javascript特效實(shí)現(xiàn)——當(dāng)前時(shí)間和倒計(jì)時(shí)效果的簡(jiǎn)單實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考
公眾號(hào)
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試