快捷導(dǎo)航

在頁面中輸出當(dāng)前客戶端時(shí)間javascript實(shí)例代碼

更新時(shí)間：2016年03月02日 09:32:30 作者：凌云之翼

這篇文章主要介紹了在頁面中輸出當(dāng)前客戶端時(shí)間javascript實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下

時(shí)間對象（Date（））比較簡單，本文旨在為初學(xué)者入門使用，大?？陕赃^！

本文承接基礎(chǔ)知識實(shí)例，說一下實(shí)例的要求：

在頁面中輸出當(dāng)前客戶端時(shí)間（2015年1月1日星期一10:10:10這樣的格式），每過一秒中頁面不刷新，但是時(shí)間自動(dòng)更新（用兩種定時(shí)器方法都可以實(shí)現(xiàn)），鼠標(biāo)點(diǎn)擊時(shí)間，如果原先運(yùn)動(dòng)則停止，如果停止則繼續(xù)運(yùn)動(dòng)；

要求基本上可分為2部分：一是不刷新自動(dòng)更新時(shí)間，二是點(diǎn)擊時(shí)間停止或更新時(shí)間

好，那我們還是老規(guī)矩，一步一步來，既然是時(shí)間，那就會用到時(shí)間對象 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()
};

獲取時(shí)間對象我是用對象的方式來獲取的，這樣方便調(diào)用，結(jié)構(gòu)也比較清晰，不必一個(gè)個(gè)定義，比較推薦這種寫法，得到相應(yīng)的值也很方便，比如獲取年份：time.year;

得到我們需要獲取的數(shù)據(jù)之后，然后要處理的是星期問題，因?yàn)楝F(xiàn)在獲取的星期的值還是1,2,3,4,5,6,7，這里我們需要轉(zhuǎn)換一下，將它變?yōu)槲覀兛吹玫降奈淖中畔ⅲ@里我們用一個(gè)函數(shù)包起來：

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組合，這個(gè)判斷條件特別適合做類似于星期這樣的判斷，這里就不多說了，當(dāng)然，你也可以用if else組合來判斷，看個(gè)人習(xí)慣問題，還有一個(gè)需要解決的問題就是，現(xiàn)在獲取的分和秒在0-9的時(shí)候，是顯示的0-9的數(shù)字，

不是我們常見的00-09這樣的顯示，為了將這樣的時(shí)間變成我們熟悉的樣子，我們同樣可以寫一個(gè)函數(shù)，將它轉(zhuǎn)換一下:

function twoNum(num){
return num = num<10 ? '0'+num : num; 
}

這里我用的是三元運(yùn)算，如果對三元運(yùn)算不是很了解的，看下面的代碼，是一個(gè)意思：

function twoNum(num){
if(num<10){
num = '0'+num; 
}
return num; 
}

好萬事俱備，只欠東風(fēng)了，我們先把這些代碼整合起來，這樣更方便使用：

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

這個(gè)函數(shù)應(yīng)該能懂吧，傳一個(gè)obj對象是為了能把時(shí)間在這個(gè)對象里面輸出，但此時(shí)輸出的時(shí)間還只是一個(gè)靜態(tài)時(shí)間，頁面不刷新，根本不會走，所以，我們接下來就來實(shí)現(xiàn)自動(dòng)更新時(shí)間的功能，首先我們先給一個(gè)容器：

<div id="box"></div>

要實(shí)現(xiàn)時(shí)間自動(dòng)更新，就需要使用定時(shí)器（setInterval() 或setTimeout()），這兩個(gè)方法有點(diǎn)不一樣，第一個(gè)是一直執(zhí)行，除非清除定時(shí)器，第二個(gè)是只執(zhí)行一次就不執(zhí)行了，如果想要它一直執(zhí)行，可以考慮用遞歸調(diào)用的方法，此方法就不在這里寫了

我們選擇用第一種：

var oBox = document.getElementById("box"); //獲取元素
Timer(oBox); //這里需要先執(zhí)行一下，因?yàn)槿绻幌葓?zhí)行，定時(shí)器會有一個(gè)延遲1秒執(zhí)行，看上去就感覺慢了一秒出來一樣
oBox.timer = setInterval(function(){ //oBox.timer這種寫法是為了減少外面全局變量對定時(shí)器的影響，用元素的自定義屬性還可以避免命名沖突
Timer(oBox);
},1000);

到這里，一個(gè)在頁面上顯示的時(shí)間就可以自動(dòng)更新顯示了，但是我們還有一個(gè)要求，就是點(diǎn)擊時(shí)間，時(shí)間要停止，再點(diǎn)擊，時(shí)間又恢復(fù)更新，那這怎么做呢？為了便于理解，我給大家舉個(gè)例子，應(yīng)該就能明白，比如說一個(gè)燈，我按開關(guān)的時(shí)候，燈就亮了，我再按開關(guān)，燈就滅了，是不是跟我們的要求很像，所以我們設(shè)一個(gè)開關(guān)就能實(shí)現(xiàn)我們要的效果：

var offOn = true;
oBox.onclick = function(){
if(offOn){
clearInterval(oBox.timer);
offOn=false;
}else{
oBox.timer = setInterval(function(){
Timer(oBox);
},1000);
offOn = true;
}
}

到這里，所以的功能就都實(shí)現(xiàn)了，你以為就這樣就結(jié)束了嗎？當(dāng)然。。。不是，出于我們程序猿對代碼的嚴(yán)謹(jǐn)態(tài)度，很多地方都是可以做優(yōu)化的，所有的代碼整理優(yōu)化如下：

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

里面用到的幾處三元運(yùn)算和取反等操作，請好好的揣摩領(lǐng)悟一下！

到這里，你以為就這樣就結(jié)束了嗎？當(dāng)然。。。不是，說到顯示時(shí)間，這只是時(shí)間對象應(yīng)用的九牛一毛，更多的應(yīng)用應(yīng)該是倒計(jì)時(shí)的應(yīng)用，比如說團(tuán)購網(wǎng)站，比如說驗(yàn)證碼的倒計(jì)時(shí)等等，但是今天時(shí)間有限，這次就不在這里細(xì)說倒計(jì)時(shí)的功能了，我會單獨(dú)開一片博客講解倒計(jì)時(shí)的一些應(yīng)用方法，供大家參考學(xué)習(xí)，我覺得還是有必要說說的，好了，今天就到這里！

關(guān)于在頁面中輸出當(dāng)前客戶端時(shí)間javascript實(shí)例代碼的相關(guān)知識就給大家介紹多，希望對大家有所幫助！

您可能感興趣的文章: