HTML+CSS+JavaScript制作电子时钟

小咪咪 2024-02-05 20:31 15阅读 0赞

## 一 效果展示 ##

视频

## 二 步骤 ##

在网上下载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()\` 函数，更新网页上显示的时钟，实现实时显示当前时间的效果。