JavaScript是一種廣泛應(yīng)用于Web編程的腳本語(yǔ)言，其強(qiáng)大的操作能力使得許多網(wǎng)站都采用了它來(lái)構(gòu)建動(dòng)態(tài)頁(yè)面。在JavaScript中，顯示時(shí)間是一項(xiàng)基本功能，它讓我們可以在網(wǎng)頁(yè)上方便地展示當(dāng)前時(shí)間，也方便了用戶(hù)的使用。

我們先來(lái)看一個(gè)簡(jiǎn)單的JavaScript代碼，這里使用了Date對(duì)象獲取當(dāng)前時(shí)間，再使用JavaScript的Document對(duì)象輸出到頁(yè)面中：

var myDate = new Date();
document.write(myDate.toLocaleString());

上述代碼中，new Date()就是創(chuàng)建了一個(gè)Date對(duì)象，這個(gè)對(duì)象中包含了當(dāng)前時(shí)間的各種屬性（年份、月份、日期、時(shí)分秒等）。我們調(diào)用myDate.toLocaleString()方法，就可以把這些屬性轉(zhuǎn)化為本地的字符串形式輸出到頁(yè)面上。

但是，我們會(huì)發(fā)現(xiàn)這種輸出的方式不是很美觀，我們通常希望形式化一些，讓它看起來(lái)更加好看。下面就給大家介紹幾種修改、美化輸出時(shí)間的方法。

方法一：使用字符串拼接

var myDate = new Date();
var year = myDate.getFullYear();
var month = myDate.getMonth()+1;
var date = myDate.getDate();
var hour = myDate.getHours();
var minute = myDate.getMinutes();
var second = myDate.getSeconds();
var timeString = year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;
document.write(timeString);

上述代碼中，我們把日期的各個(gè)屬性分別提取出來(lái)，用字符串拼接的方式輸出。這樣輸出的時(shí)間格式就更加清晰明了了。

方法二：使用JavaScript函數(shù)庫(kù)

除了手寫(xiě)代碼，我們也可以使用現(xiàn)成的JavaScript函數(shù)庫(kù)來(lái)方便地輸出時(shí)間。其中比較流行的是moment.js庫(kù)，這個(gè)庫(kù)可以在網(wǎng)上免費(fèi)下載，并且使用極其簡(jiǎn)單。

var curTime = moment().format('YYYY-MM-DD hh:mm:ss');
document.write(curTime);

上述代碼中，我們調(diào)用moment()函數(shù)獲得當(dāng)前時(shí)間，再使用.format()方法把它轉(zhuǎn)化成指定格式字符串，方便輸出。

方法三：使用CSS樣式調(diào)整

在前面的方法中，我們是通過(guò)JavaScript來(lái)調(diào)整時(shí)間輸出的格式。事實(shí)上，我們也可以在CSS中進(jìn)行樣式的調(diào)整，讓時(shí)間的展示效果變得更好。

首先，我們需要在HTML中為時(shí)間輸出部分設(shè)置一個(gè)樣式：

<span id="clock"></span>

#clock{
font-size: 30px;
font-weight: bold;
color: #f00;
text-shadow: 1px 2px 3px #ccc;
}

上述代碼中，我們?yōu)?clock樣式設(shè)置了一些CSS特效，包括字體大小、顏色、加粗、文本陰影等，來(lái)讓時(shí)間更加醒目。

接著，我們?cè)贘avaScript中定義出一個(gè)函數(shù)，用來(lái)輸出時(shí)間到頁(yè)面上：

function showTime(){
var myDate = new Date();
var timeString = myDate.toLocaleString();
document.getElementById("clock").innerHTML = timeString;
}
setInterval("showTime()",1000);

上述代碼中，我們定義了一個(gè)showTime函數(shù)，每1秒鐘調(diào)用一次，獲得當(dāng)前時(shí)間并轉(zhuǎn)換為本地字符串，再把其輸出到HTML頁(yè)面上。我們給時(shí)間輸出部分的容器span設(shè)置一個(gè)id，然后用getElementById來(lái)獲取這個(gè)容器，把時(shí)間輸出到這個(gè)容器中。

通過(guò)上面的方法，我們就可以輕松地實(shí)現(xiàn)在頁(yè)面上顯示當(dāng)前時(shí)間的功能了。不過(guò)需要注意的是，不同瀏覽器之間時(shí)間的展示效果可能是不同的，也需要我們進(jìn)行相應(yīng)的調(diào)整。