HTML+css+js[简单电子时钟的实现]

好多bug

已于 2022-04-13 16:38:49 修改

阅读量1.5k

点赞数

分类专栏： html内js实例文章标签： html css js

于 2022-03-08 08:45:36 首次发布

本文链接：https://blog.csdn.net/leaf_leaf__/article/details/123344356

版权

html内js实例专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最终结果：

HTML部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>2.1简单电子时钟的设计与实现</title>
		<link rel="stylesheet" type="text/css" href="css/clock.css"/>
	</head>
	<body onload="getCurrentTime()">
		<h3>简单电子时钟的设计与实现</h3>
		<hr >
		<!-- 电子时钟区域 -->
		<div id="clock">
			<div class="box1" id="h"></div>
			<div class="box2">:</div>
			<div class="box1" id="m"></div>
			<div class="box2">:</div>
			<div class="box1" id="s"></div>
		</div>
	</body>
</html>

css部分

/* 电子时钟的总体样式设置 */
#clock{
	width:800px;
	font-size: 80px;
	font-weight: bold;
	color: #008B8B;
	text-align: center;
	margin: 20px;
}
/* 时分秒数字区域的样式设置 */
.box1{
	margin-right: 10px;
	width: 100px;
	height: 100px;
	line-height: 100px;
	float: left;
	border: gray 1px solid;
}
/* 冒号区域的样式设置 */
.box2{
	width: 30px;
	float: left;
	margin-right: 10px;
}

js部分

——使用外链时不需加<script>标签，不使用外链则直接写在<body>标签内

		<script>
			//获取显示小时的区域框对象
			var hour=document.getElementById('h');
			//获取显示分钟的区域框对象
			var minute=document.getElementById('m');
			//获取显示秒的区域框对象
			var second=document.getElementById('s');
			
			//获取当前时间
			function getCurrentTime(){
				var date=new Date();
				var h=date.getHours();
				var m=date.getMinutes();
				var s=date.getSeconds();
				
				if(h<10) h='0'+h;//确保0-9时也显示成两位数
				if(m<10) m='0'+m;//确保0-9分钟也显示成两位数
				if(s<10) s='0'+s;//确保0-9秒也显示成两位数
				
				hour.innerHTML=h;
				minute.innerHTML=m;
				second.innerHTML=s;
			}
			//每秒更新一次时间
			setInterval('getCurrentTime()',1000);
		</script>

好多bug

关注

0
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
HTML+css+js[简单电子时钟的实现]

最终结果：HTML部分<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>2.1简单电子时钟的设计与实现</title> <link rel="stylesheet" type="text/css" href="css/clock.css"/> </head> <body onload="getCu.
复制链接

扫一扫