免费亚洲婷婷,精品国产31久久久久久,αv一区二区三区

當前位置：首頁 > 范文|應用文 > IT技術專欄 > 網絡編程

javascript特效實現--當前時間和倒計時效果的簡單實例

來源：易賢網閱讀：1275 次日期：2016-08-01 14:00:36

溫馨提示：易賢網小編為您整理了“javascript特效實現--當前時間和倒計時效果的簡單實例”,方便廣大網友查閱！

這個效果的實現關鍵是對Date對象和setTimeout的使用。

一共有三個例子，HTML結構如下，就不添加CSS樣式了。

<body>

當前時間：

高考倒計時：

限時搶購：

</body>

主要體會javascript的實現

window.onload=function () {

var p1=document.getElementById("p1"),

p2=document.getElementById("p2");

p3=document.getElementById("p3");

showtime1();

showtime2();

showtime3();

}

1.簡單的實現當前時間的顯示

function showtime1() {

var nowdate=new Date();//創建Date對象nowdate,以獲取當前時間

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),//函數checkTime用于格式化時，分，秒

m=checkTime(m),

s=checkTime(s);

p1.innerHTML=year+"年"+month+"月"+date+"日"+week[day]+h+"："+m+"："+s;

setTimeout(showtime1, 1000);//反復執行函數本身

}

其中的checkTime函數如下：

function checkTime(i) {

if (i<10) {

i="0"+i;

}

return i;

}

因為平時看到的時間格式一般是00:00:01,而getHours，getMinutes，getSeconds得到格式是0到9，不是00到09這樣的格式。所以在從9變成10的過程中，有一位數，變成兩位數，同樣在充59秒變為0秒或者59分變為0分或者23時變為0時。

比如 23:59:59 再下一秒應該變為00:00:00；若未使用checkTime函數進行處理，則會變為0:0:0，這樣格式上就有點不統一，而且視覺上也有字數增加或減少的突變。(后面兩個例子就不用checkTime函數對時分秒進行處理了！！！)

2.高考倒計時效果實現

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);

}

其中比較重要的幾點：

① 定義結束的時間endtime=new Date("2017/6/6")是通過new一個帶有參數的Date對象，直接 new Date()則是直接獲取到當前的時間；

② getTime()方法得到的是距離1970 年 1 月 1 日的毫秒數。

③天數，小時數，分鐘數和秒數的計算，%（取模運算）。得到距離結束時間的毫秒數（剩余毫秒數），除以1000得到剩余秒數，再除以60得到剩余分鐘數，再除以60得到剩余小時數。除以24得到剩余天數。剩余秒數 lefttime/1000 模60得到秒數，剩余分鐘數 lefttime/(1000*60) 模60得到分鐘數，剩余小時數模 lefttime/(1000*60*60) 模24得到小時數。

3.限時搶購倒計時效果

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+"小時"+m+"分"+s+"秒";

　　setTimeout(showtime3, 1000);

}