天天看點

網頁時鐘帶有清除定時器

<!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()+"&ensp;&ensp;"+
			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>
           

 效果圖

網頁時鐘帶有清除定時器

繼續閱讀