HTML+CSS+Javascript制作简单版网页时钟

最新推荐文章于 2022-04-14 19:51:12 发布

原创最新推荐文章于 2022-04-14 19:51:12 发布 · 2.8k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #html5

本文介绍如何利用HTML作为结构，CSS进行样式设计，JavaScript处理动态更新，来创建一个简单的网页时钟。通过结合三者，实现实时显示当前时间的功能，为网页增添互动元素。

HTML+CSS+Javascript制作简单版网页时钟

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 整个盒子水平竖直居中 */
			#all{
				position: absolute;
				left:50%;
				top:50%;
				transform: translate(-50%, -50%);
				text-align: center;
			}
			/* 设置时钟显示格式 */
			#hh,#mm,#ss{
				height: 100px;
				width: 100px;
				background-color: gray;
				float: left;
				font-size: 66px;
				text-align: center;
				line-height: 100px;
			}
			/* 设置冒号 */
			#maohao{
				height: 100px;
				width: 20px;
				background-color: transparent;
				float: left;
				
				font-size:100px;
				line-height:80px;
				transform: translate(-2px);
			}
			
		</style>
		
	</head>
	<body>
		<div id="all">
			<div id="hh">
				
			</div>
			<div id="maohao">
				:
			</div>
			<div id="mm">
				
			</div>
			<div id="maohao">
				:
			</div>
			<div id="ss">
				
			</div>
		</div>
		
		
		<script type="text/javascript">
			
			function timeClock(){
				newDate = new Date();
				hour = newDate.getHours();
				if (hour < 10){
					hour = "0" + hour;
				}
				minu = newDate.getMinutes();
				if (minu < 10){
					minu = "0" + minu;
				}
				seco =newDate.getSeconds();
				if (seco < 10){
					seco = "0" + seco;
				}
				
				document.getElementById("hh").innerHTML = hour;
				document.getElementById("mm").innerHTML = minu;
				document.getElementById("ss").innerHTML = seco;
			}
			
			setInterval(timeClock , 1000)
			
			
			
			
		</script>
	</body>
</html>