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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。