HTML+CSS+JS实现简易电子时钟

最新推荐文章于 2024-05-30 07:58:39 发布

秃头战士会cv

最新推荐文章于 2024-05-30 07:58:39 发布

阅读量318

点赞数

分类专栏：一些小组件文章标签： css html javascript

本文链接：https://blog.csdn.net/FEIFANFENG123/article/details/131327329

版权

一些小组件专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果图

电子时钟

html

<div style="margin-top: 200px;margin-left: 550px;">
		<div style="width: 410px;height: 154px;">
				<div class="box3"></div>
				<div class="main">
						<div id="box1"></div>
				</div>
				<div class="box2"></div>
		</div>
</div>

css

<style>
			.main {
				width: 380px;
				height: 150px;
				border-radius: 5%;
				float: left;
				background-image: linear-gradient(to top, #9795f0 0%, #fbc8d4 100%);
			}

			.main #box1 {
				font-size: 42px;
				text-align: center;
				border-radius: 5%;
				padding-top: 20px;
				width: 300px;
				height: 80px;
				margin-top: 25px;
				margin-left: 40px;
				background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%);
				font-weight: 700;
				color: #696969;
				box-shadow: -1px 1px 1px black;
			}

			.box2 {
				width: 10px;
				height: 100px;
				border-radius: 20%;
				margin-top: 25px;
				float: left;
				background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898; background-blend-mode: multiply,multiply;
			}

			.box3 {
				width: 10px;
				height: 100px;
				border-radius: 20%;
				margin-top: 25px;
				float: left;
				background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898; background-blend-mode: multiply,multiply;
			}

			.box_bottom {
				width: 300px;
				height: 10px;
				float: left;
				margin-left: 52px;
				border-radius: 20%;
				background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898; background-blend-mode: multiply,multiply;
			}
			
		</style>

js

<script>
			var div = document.getElementById("box1")

			function showTime() {
				var date = new Date();
				var h = date.getHours();
				var min = date.getMinutes();
				if (min < 10) {
					min = '0' + min
				}
				var s = date.getSeconds();
				if (s < 10) {
					s = '0' + s
				}
				var str = h + '时' + min + '分' + s + '秒'
				div.innerHTML = str
				setTimeout(showTime, 1000)
			}
			window.onload = showTime()
</script>

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style>
			.main {
				width: 380px;
				height: 150px;
				border-radius: 5%;
				float: left;
				background-image: linear-gradient(to top, #9795f0 0%, #fbc8d4 100%);
			}

			.main #box1 {
				font-size: 42px;
				text-align: center;
				border-radius: 5%;
				padding-top: 20px;
				width: 300px;
				height: 80px;
				margin-top: 25px;
				margin-left: 40px;
				background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%);
				font-weight: 700;
				color: #696969;
				box-shadow: -1px 1px 1px black;
			}

			.box2 {
				width: 10px;
				height: 100px;
				border-radius: 20%;
				margin-top: 25px;
				float: left;
				background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%), radial-gradient(at top center, rgba(255, 255, 255, 0.40) 0%, rgba(0, 0, 0, 0.40) 120%) #989898;
				background-blend-mode: multiply, multiply;
			}

			.box3 {
				width: 10px;
				height: 100px;
				border-radius: 20%;
				margin-top: 25px;
				float: left;
				background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%), radial-gradient(at top center, rgba(255, 255, 255, 0.40) 0%, rgba(0, 0, 0, 0.40) 120%) #989898;
				background-blend-mode: multiply, multiply;
			}

			.box_bottom {
				width: 300px;
				height: 10px;
				float: left;
				margin-left: 52px;
				border-radius: 20%;
				background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%), radial-gradient(at top center, rgba(255, 255, 255, 0.40) 0%, rgba(0, 0, 0, 0.40) 120%) #989898;
				background-blend-mode: multiply, multiply;
			}
		</style>
		<div style="margin-top: 200px;margin-left: 550px;">
			<div style="width: 410px;height: 154px;">
				<div class="box3"></div>
				<div class="main">
					<div id="box1"></div>
				</div>
				<div class="box2"></div>
			</div>
		</div>

		<script>
			var div = document.getElementById("box1")

			function showTime() {
				var date = new Date();
				var h = date.getHours();
				var min = date.getMinutes();
				if (min < 10) {
					min = '0' + min
				}
				var s = date.getSeconds();
				if (s < 10) {
					s = '0' + s
				}
				var str = h + '时' + min + '分' + s + '秒'
				div.innerHTML = str
				setTimeout(showTime, 1000)
			}
			window.onload = showTime()
		</script>
	</body>
</html>