本文實例講述了JavaScript實現同步於本地時間的動態時間顯示方法。分享給大家供大家參考。具體分析如下:
動態顯示時間的例子非常簡單,了解JavaScript之後就是幾行的代碼便能夠完成的事情,
但是對於一些未接觸過JavaScript的人來說,幾乎很大工程的樣子,然後在網上苦苦尋覓代碼,之後在茫茫的html代碼中尋求不到,最終得不到要領。
一、基本目標
實現一個隨同客戶端(浏覽者機器上的)時間的網頁文本時間,使用最短的代碼。
二、制作過程
復制代碼 代碼如下:<!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對象如果使用沒有參數的構造函數,就會返回客戶端的時間,toLocaleString()方法就是把時間轉化成本地顯示時間的格式,如果僅僅是toString()方法則只把時間轉化成一個英語寫法的時間字符串。同時,親自實現發現toLocaleTimeString()方法是不存在的,請不要折騰。如果對於系統自帶的方法轉化出來的時間不滿意,請使用各類的getDay(),getMonth(),getFullYear()等方法去構造字符串。再次不作展示。
2. innerHTML相當於id為clock其下的所有元素,document.getElementById("clock").innerHTML = time;一句的含義就把<span id="clock"></span>兩標簽中所夾的東西變為time字符串的內容
3.本JavaScript的關鍵在於setInterval("clock()", 1000);函數,意思為每1000毫秒,也就是每1秒,把clock()函數執行一次。也就是每一秒把<span id="clock"></span>兩標簽中所夾的東西變為time字符串的內容更新一次。
希望本文所述對大家的javascript程序設計有所幫助。