javascript小實例，在頁面中輸出當前客戶端時間

時間對象（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+1)+'月'+time.day+'日 '+Week(time.week)+' '+time.hour+':'+twoNum(time.minute)+':'+twoNum(time.second);
        }

特別注意：（感謝 lazi0121的提醒）當前獲取的月份是從0開始的（即0-11），如果要顯示出我們熟悉的月份格式（1-12），則需要在獲取值上加一，即：time.month+1

 

特別感謝  z5337 提供的方法，下面將優化后的代碼貼出來，供大家參考學習：

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 twoNum(num){
		return num = num<10 ? '0'+num : num; 
	}
	obj.innerHTML = time.year+'年'+time.month+'月'+time.day+'日 '+'星期' + '日一二三四五六'.charAt(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+1)+'月'+time.day+'日 '+Week(time.week)+' '+time.hour+':'+twoNum(time.minute)+':'+twoNum(time.second);
        }

里面用到的幾處三元運算和取反等操作，請好好的揣摩領悟一下！

到這里，你以為就這樣就結束了嗎？當然。。。不是，說到顯示時間，這只是時間對象應用的九牛一毛，更多的應用應該是倒計時的應用，比如說團購網站，比如說驗證碼的倒計時等等，但是今天時間有限，這次就不在這里細說倒計時的功能了，我會單獨開

一片博客講解倒計時的一些應用方法，供大家參考學習，我覺得還是有必要說說的，好了，今天就到這里！

行文倉促！有理解的不正確的或者是遺漏的東西，萬望批評指正！不勝感激！