js实现简单的网页时钟

╰+哭是因爲堅強的太久メ 2022-02-22 16:52 361阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="{CHARSET}">
    		<title>网页时钟</title>
    		
    	</head>
    	
    	<body>
    		当前系统时间为：<span id = "spanTip"></span>
    	</body>
    	<script>
    		/*function genDate(){ //如何设置span标签的innerHTML属性 //1.通过id属性获取span标签 //注意：span标签对象的获取一定要先加载span标签 var spanTip = document.getElementById("spanTip"); //2.设置span标签对象的innerHTML属性 spanTip.innerHTML = "hello！"; }*/
    		function genDate(){ 
    		//1.创建Date对象拼接时分秒
    		var date = new Date();
    		//拼接时间
    		var dateStr = date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日 &nbsp"+
    		date.getHours()+"时"+date.getMinutes()+"分"+date.getSeconds()+"秒";
    		
    		//2.获取span标签对象
    		var spanTip = document.getElementById("spanTip");
    		
    		//3.设置span标签对象的innerHTML属性
    		spanTip.innerHTML = dateStr;
    		}
    		//4.设置定时器：每经过1000毫秒执行任务（前面的1.2.3）
    		window.setInterval("genDate()",1000);
    		
    	</script>
    </html>

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlcmZlY3RtYXRjaF9H_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlcmZlY3RtYXRjaF9H_size_16_color_FFFFFF_t_70]: /images/20220222/2e7cbf93b4d7460188115664f41e33e2.png