JavaScript實(shí)現(xiàn)同步于本地時(shí)間的動(dòng)態(tài)時(shí)間顯示方法

更新時(shí)間：2015年02月02日 10:24:30 作者：yongh701

這篇文章主要介紹了JavaScript實(shí)現(xiàn)同步于本地時(shí)間的動(dòng)態(tài)時(shí)間顯示方法,實(shí)例分析了javascript獲取本地時(shí)間及動(dòng)態(tài)顯示的技巧,并對(duì)實(shí)現(xiàn)代碼進(jìn)行了較為詳盡的分析說明,需要的朋友可以參考下

本文實(shí)例講述了JavaScript實(shí)現(xiàn)同步于本地時(shí)間的動(dòng)態(tài)時(shí)間顯示方法。分享給大家供大家參考。具體分析如下：

動(dòng)態(tài)顯示時(shí)間的例子非常簡(jiǎn)單，了解JavaScript之后就是幾行的代碼便能夠完成的事情，

但是對(duì)于一些未接觸過JavaScript的人來說，幾乎很大工程的樣子，然后在網(wǎng)上苦苦尋覓代碼，之后在茫茫的html代碼中尋求不到，最終得不到要領(lǐng)。
一、基本目標(biāo)

實(shí)現(xiàn)一個(gè)隨同客戶端（瀏覽者機(jī)器上的）時(shí)間的網(wǎng)頁文本時(shí)間，使用最短的代碼。

二、制作過程

復(fù)制代碼代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

<html xmlns="http://www.w3.org/1999/xhtml">  

    <head>  

        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  

        <title>jsclock</title>  

    </head>  

    <body>  

        <script type="text/javascript">  

        function clock() {  

            var time = new Date().toLocaleString();  

            document.getElementById("clock").innerHTML = time;  

        }  

        setInterval("clock()", 1000);  

        </script>  

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

    </body>  

</html>

1. Date對(duì)象如果使用沒有參數(shù)的構(gòu)造函數(shù)，就會(huì)返回客戶端的時(shí)間，toLocaleString()方法就是把時(shí)間轉(zhuǎn)化成本地顯示時(shí)間的格式，如果僅僅是toString()方法則只把時(shí)間轉(zhuǎn)化成一個(gè)英語寫法的時(shí)間字符串。同時(shí)，親自實(shí)現(xiàn)發(fā)現(xiàn)toLocaleTimeString()方法是不存在的，請(qǐng)不要折騰。如果對(duì)于系統(tǒng)自帶的方法轉(zhuǎn)化出來的時(shí)間不滿意，請(qǐng)使用各類的getDay(),getMonth(),getFullYear()等方法去構(gòu)造字符串。再次不作展示。

2. innerHTML相當(dāng)于id為clock其下的所有元素，document.getElementById("clock").innerHTML = time;一句的含義就把<span id="clock"></span>兩標(biāo)簽中所夾的東西變?yōu)閠ime字符串的內(nèi)容

3.本JavaScript的關(guān)鍵在于setInterval("clock()", 1000);函數(shù)，意思為每1000毫秒，也就是每1秒，把clock()函數(shù)執(zhí)行一次。也就是每一秒把<span id="clock"></span>兩標(biāo)簽中所夾的東西變?yōu)閠ime字符串的內(nèi)容更新一次。

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: