<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>網頁時鐘</title>
</head>
<body>
<font>目前系統時間是:</font><span id="spanTip"></span>
<!-- 事件源 -->
<input type="button" value="清除定時器" onclick="clearTask()" />
</body>
<script>
function genDate(){
//1)建立目前Date對象:拼接目前系統時間
var date = new Date() ;
//2)拼接日期字元串
var dateStr = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+"  "+
date.getHours()+":"+date.getMinutes()+":"+date.getSeconds() ;
//alert(dateStr)
//通過id屬性值擷取span标簽對象
var spanObject = document.getElementById("spanTip") ;
//設定span标簽對象的innerHTML屬性: 添加文本内容(可以加入html标簽 渲染)
//innerText屬性:隻是添加普通文本: 如果添加标簽體,不會将标簽進行轉義
spanObject.innerHTML = "<h4>"+dateStr +"</h4>";
}
//window對象(可以省略不寫)中有網頁定時器
//window.setInterval(vCode, iMilliSeconds ): 每經過iMilliSeconds毫秒值重複執行vCode
//參數1:任務函數
//參數2:毫秒數
var taskId = setInterval("genDate()",1000) ;//每經過1000毫秒執行這個任務
//window.setTimeout(vCode, iMilliSeconds):經過iMilliSeconds毫秒值後執行一次vCode
//參數1:任務函數
//參數2:毫秒數
//清除定時器
//window.clearInterval(iIntervalID) :參數任務id
function clearTask(){
//alert("觸發點選...");
window.clearInterval(taskId) ;
}
</script>
</html>
效果圖