時間對象(Date())比較簡單,本文旨在為初學者入門使用,大牛可略過!
本文承接基礎知識實例,說一下實例的要求:
在頁面中輸出當前客戶端時間(2015年1月1日星期一10:10:10這樣的格式),每過一秒中頁面不刷新,但是時間自動更新(用兩種定時器方法都可以實現),鼠標點擊時間,如果原先運動則停止,如果停止則繼續運動;
要求基本上可分為2部分:一是不刷新自動更新時間,二是點擊時間停止或更新時間
好,那我們還是老規矩,一步一步來,既然是時間,那就會用到時間對象 new Date();
var nowDate = new Date(); var time = { year : nowDate.getFullYear(), month : nowDate.getMonth(), day : nowDate.getDate(), week : nowDate.getDay(), hour : nowDate.getHours(), minute : nowDate.getMinutes(), second : nowDate.getSeconds() };
獲取時間對象我是用對象的方式來獲取的,這樣方便調用,結構也比較清晰,不必一個個定義,比較推薦這種寫法,得到相應的值也很方便,比如獲取年份:time.year;
得到我們需要獲取的數據之後,然後要處理的是星期問題,因為現在獲取的星期的值還是1,2,3,4,5,6,7,這裡我們需要轉換一下,將它變為我們看得到的文字信息,這裡我們用一個函數包起來:
function Week(num){ switch(num){ case 1 : return '星期一'; break; case 2 : return '星期二'; break; case 3 : return '星期三'; break; case 4 : return '星期四'; break; case 5 : return '星期五'; break; case 6 : return '星期六'; break; case 7 : return '星期日'; break; }; }
這裡我用的是swicth case組合,這個判斷條件特別適合做類似於星期這樣的判斷,這裡就不多說了,當然,你也可以用if else組合來判斷,看個人習慣問題,還有一個需要解決的問題就是,現在獲取的分和秒在0-9的時候,是顯示的0-9的數字,
不是我們常見的00-09這樣的顯示,為了將這樣的時間變成我們熟悉的樣子,我們同樣可以寫一個函數,將它轉換一下:
function twoNum(num){ return num = num<10 ? '0'+num : num; }
這裡我用的是三元運算,如果對三元運算不是很了解的,看下面的代碼,是一個意思:
function twoNum(num){ if(num<10){ num = '0'+num; } return num; }
好萬事俱備,只欠東風了,我們先把這些代碼整合起來,這樣更方便使用:
function Timer(obj){ var nowDate = new Date(); var time = { year : nowDate.getFullYear(), month : nowDate.getMonth(), day : nowDate.getDate(), week : nowDate.getDay(), hour : nowDate.getHours(), minute : nowDate.getMinutes(), second : nowDate.getSeconds() }; function Week(num){ switch(num){ case 1 : return '星期一'; break; case 2 : return '星期二'; break; case 3 : return '星期三'; break; case 4 : return '星期四'; break; case 5 : return '星期五'; break; case 6 : return '星期六'; break; case 7 : return '星期日'; break; }; } function twoNum(num){ return num = num<10 ? '0'+num : num; } obj.innerHTML = time.year+'年'+time.month+'月'+time.day+'日 '+Week(time.week)+' '+time.hour+':'+twoNum(time.minute)+':'+twoNum(time.second); }
這個函數應該能懂吧,傳一個obj對象是為了能把時間在這個對象裡面輸出,但此時輸出的時間還只是一個靜態時間,頁面不刷新,根本不會走,所以,我們接下來就來實現自動更新時間的功能,首先我們先給一個容器:
<div id="box"></div>
要實現時間自動更新,就需要使用定時器(setInterval() 或setTimeout()),這兩個方法有點不一樣,第一個是一直執行,除非清除定時器,第二個是只執行一次就不執行了,如果想要它一直執行,可以考慮用遞歸調用的方法,此方法就不在這裡寫了
我們選擇用第一種:
var oBox = document.getElementById("box"); //獲取元素 Timer(oBox); //這裡需要先執行一下,因為如果不先執行,定時器會有一個延遲1秒執行,看上去就感覺慢了一秒出來一樣 oBox.timer = setInterval(function(){ //oBox.timer這種寫法是為了減少外面全局變量對定時器的影響,用元素的自定義屬性還可以避免命名沖突 Timer(oBox); },1000);
到這裡,一個在頁面上顯示的時間就可以自動更新顯示了,但是我們還有一個要求,就是點擊時間,時間要停止,再點擊,時間又恢復更新,那這怎麼做呢?為了便於理解,我給大家舉個例子,應該就能明白,比如說一個燈,我按開關的時候,燈就亮了,我再按開關,燈就滅了,是不是跟我們的要求很像,所以我們設一個開關就能實現我們要的效果:
var offOn = true; oBox.onclick = function(){ if(offOn){ clearInterval(oBox.timer); offOn=false; }else{ oBox.timer = setInterval(function(){ Timer(oBox); },1000); offOn = true; } }
到這裡,所以的功能就都實現了,你以為就這樣就結束了嗎?當然。。。不是,出於我們程序猿對代碼的嚴謹態度,很多地方都是可以做優化的,所有的代碼整理優化如下:
var oBox = document.getElementById("box"); var offOn = true; Timer(oBox); function showTime(){ oBox.timer = setInterval(function(){ Timer(oBox); },1000); } showTime(); oBox.onclick = function(){ offOn ? clearInterval(oBox.timer) : showTime(); offOn=!offOn; } function Timer(obj){ var nowDate = new Date(); var time = { year : nowDate.getFullYear(), month : nowDate.getMonth(), day : nowDate.getDate(), week : nowDate.getDay(), hour : nowDate.getHours(), minute : nowDate.getMinutes(), second : nowDate.getSeconds() }; function Week(num){ switch(num){ case 1 : return '星期一'; break; case 2 : return '星期二'; break; case 3 : return '星期三'; break; case 4 : return '星期四'; break; case 5 : return '星期五'; break; case 6 : return '星期六'; break; case 7 : return '星期日'; break; }; } function twoNum(num){ return num = num<10 ? '0'+num : num; } obj.innerHTML = time.year+'年'+time.month+'月'+time.day+'日 '+Week(time.week)+' '+time.hour+':'+twoNum(time.minute)+':'+twoNum(time.second); }
裡面用到的幾處三元運算和取反等操作,請好好的揣摩領悟一下!
到這裡,你以為就這樣就結束了嗎?當然。。。不是,說到顯示時間,這只是時間對象應用的九牛一毛,更多的應用應該是倒計時的應用,比如說團購網站,比如說驗證碼的倒計時等等,但是今天時間有限,這次就不在這裡細說倒計時的功能了,我會單獨開一片博客講解倒計時的一些應用方法,供大家參考學習,我覺得還是有必要說說的,好了,今天就到這裡!
關於在頁面中輸出當前客戶端時間javascript實例代碼的相關知識就給大家介紹多,希望對大家有所幫助!