今天我們要來(lái)談一下javascript中的時(shí)鐘(clock)，它在網(wǎng)頁(yè)中是一種非常常見(jiàn)的形式，例如有些網(wǎng)站的主頁(yè)就會(huì)用時(shí)鐘來(lái)展示當(dāng)前時(shí)間以及倒計(jì)時(shí)等信息。時(shí)鐘的實(shí)現(xiàn)方法比較簡(jiǎn)單，只需要一點(diǎn)點(diǎn)javascript的知識(shí)便可實(shí)現(xiàn)一個(gè)屬于自己的時(shí)鐘。

在javascript中，時(shí)鐘的實(shí)現(xiàn)主要依賴(lài)于兩個(gè)函數(shù)：setInterval()和Date()。setInterval()函數(shù)用于在指定時(shí)間間隔內(nèi)反復(fù)執(zhí)行某個(gè)任務(wù)，在我們的時(shí)鐘中即為更新時(shí)間。而Date()函數(shù)則用于獲取當(dāng)前時(shí)間。

function clock() {
var currentDate = new Date();
var hours = currentDate.getHours();
var minutes = currentDate.getMinutes();
var seconds = currentDate.getSeconds();
}

上面的代碼段展示了如何使用Date()函數(shù)獲取當(dāng)前的時(shí)間，其中hours、minutes、seconds分別代表小時(shí)、分鐘和秒數(shù)。接下來(lái)我們將這些時(shí)間信息用DOM操作添加到網(wǎng)頁(yè)中：

function clock() {
var currentDate = new Date();
var hours = currentDate.getHours();
var minutes = currentDate.getMinutes();
var seconds = currentDate.getSeconds();
var clockDiv = document.getElementById("clock");
clockDiv.innerHTML = hours + ":" + minutes + ":" + seconds;
}

上面的代碼中，我們將獲取到的時(shí)、分、秒信息通過(guò)DOM操作添加到了一個(gè)名為“clock”的DIV標(biāo)簽中，從而實(shí)現(xiàn)了在網(wǎng)頁(yè)中顯示當(dāng)前時(shí)間。但是這樣的時(shí)鐘只是靜態(tài)的展示了當(dāng)前時(shí)間，我們還需要讓它動(dòng)態(tài)地不斷更新時(shí)間信息。

這時(shí)就需要用到setInterval()函數(shù)了。下面的代碼將每秒鐘動(dòng)態(tài)地更新顯示的時(shí)間：

function clock() {
setInterval(function() {
var currentDate = new Date();
var hours = currentDate.getHours();
var minutes = currentDate.getMinutes();
var seconds = currentDate.getSeconds();
var clockDiv = document.getElementById("clock");
clockDiv.innerHTML = hours + ":" + minutes + ":" + seconds;
}, 1000);
}

上面的代碼中，我們使用setInterval()函數(shù)來(lái)每秒鐘執(zhí)行一個(gè)匿名函數(shù)，該函數(shù)內(nèi)部代碼與之前的類(lèi)似，只不過(guò)多了一行將時(shí)分秒信息添加到網(wǎng)頁(yè)中的代碼。最后的參數(shù)1000代表每隔1000毫秒（即1秒）執(zhí)行一次該函數(shù)。

最后，我們需要在網(wǎng)頁(yè)中調(diào)用該函數(shù)，使時(shí)鐘開(kāi)始運(yùn)行：

在頁(yè)面加載完成后，會(huì)自動(dòng)調(diào)用clock()函數(shù)，從而啟動(dòng)時(shí)鐘的運(yùn)行。

經(jīng)過(guò)以上的代碼實(shí)現(xiàn)，我們便成功地實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的javascript時(shí)鐘。除此之外，我們還可以通過(guò)設(shè)置css樣式來(lái)美化時(shí)鐘的顯示效果，例如添加背景顏色、設(shè)置字體大小和顏色等。不過(guò)這些內(nèi)容就不在本文的討論范圍內(nèi)了。