HTML+CSS+JavaScript制作电子时钟

2023-12-29 14:04:59

一????????效果展示

二????????步骤

在网上下载0-9的jpg图片，将其复制粘贴到项目images文件中，注意，图片的命名一定是数字形式，例如：1.jpg，风景图也是自行下载然后粘贴到相应的文件。

三???????? 代码实现


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		body{
			background:url("./img/风景.webp")
		}
		.box{
			position:absolute;
			left:30%;
			top:30%;
			background:pink;
		}
		#shiShi{
			background:rgb(255,255,255);
		}
		#shiGe{
			background:rgb(255,255,255);
		}
		.dian{
			width:20px;
			height:50px;
		}
		#fenShi{
			background:rgb(255,255,255);
		}
		#fenGe{
			background:rgb(255,255,255);
		}
		#miaoShi{
			background:rgb(255,255,255);
		}
		#miaoGe{
			background:rgb(255,255,255);
		}
	</style>
	<body>
		<div class="box">
		<img id="shiShi" src="img/0.png" width="35" height="60" alt=""/>
		<img id="shiGe" src="img/0.png" width="35" height="60" alt=""/> 
		<img class="dian" src=" img/colon.png"/>
		<img id="fenShi" src="img/0.png" width="35" height="60" alt=""/>
		<img id="fenGe" src="img/0.png" width="35" height="60" alt=""/> 
		<img class="dian" src=" img/colon.png"/>
		<img id="miaoShi" src="img/0.png" width="35" height="60" alt=""/>
		<img id="miaoGe" src="img/0.png" width="35" height="60" alt=""/> 
		</div>
		<div></div>
		<script>
			let images=[
			" img/0.png",
			" img/1.png",
			" img/2.png",
			" img/3.png",
			" img/4.png",
			" img/5.png",
			" img/6.png",
			" img/7.png",
			" img/8.png",
			" img/9.png",
			];
			
			function geWei(num){
				return num%10;
				
			}
			function shiWei(num){
				return (num-num%10)/10;
				
			}
			function getImage(id){
				return document.getElementById(id)
			}
			
			function timeGo() {
			    let myDate = new Date();
			    let shi = myDate.getHours();
			    let fen = myDate.getMinutes();
			    let miao = myDate.getSeconds();
			    getImage("shiShi").src = images[shiWei(shi)];
			    getImage("shiGe").src = images[geWei(shi)];
			    getImage("fenShi").src = images[shiWei(fen)];
			    getImage("fenGe").src = images[geWei(fen)];
			    getImage("miaoShi").src = images[shiWei(miao)];
			    getImage("miaoGe").src = images[geWei(miao)];
			}
			
			setInterval(function() {
			    timeGo();
			}, 1000);
		</script>
	</body>
</html>

四 ????????相关知识

实现步骤

  1. 定义了一个图片路径数组images，包含了数字0到9的图片路径。
  2. 定义了三个函数geWei(num)、shiWei(num)和getImage(id)，分别用于获取一个数字的个位、十位和获取指定id的图片元素对象。
  3. 定义了timeGo()函数，该函数获取当前时间的小时、分钟和秒，然后将对应的数字图片显示在网页上的对应位置。
  4. 使用setInterval()函数每隔1秒钟调用一次timeGo()函数，实现时钟的实时更新。
setInterval(function() {
			    timeGo();
	????????????????}, 1000);

这段代码使用 JavaScript 中的 `setInterval()` 函数来定时执行 `timeGo()` 函数。

`setInterval()` 函数是 JavaScript 中的一个定时器函数，用于按照指定的时间间隔定时执行指定的函数或代码。它接受两个参数：第一个参数是要执行的函数或一段要执行的代码，第二个参数是时间间隔，以毫秒为单位。

在这个代码中，`setInterval()` 函数每隔1000毫秒（即每隔1秒）调用一次 `timeGo()` 函数。这意味着，每秒钟都会执行一次 `timeGo()` 函数，更新网页上显示的时钟，实现实时显示当前时间的效果。

文章来源:https://blog.csdn.net/qq_64867440/article/details/135288122
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。