Javascript实现电子时钟走动

最新推荐文章于 2022-10-27 10:24:47 发布

原创最新推荐文章于 2022-10-27 10:24:47 发布 · 2.3k 阅读

17 ·

本内容遵循CC 4.0 BY-SA版权协议

前端专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何使用JavaScript创建一个实时更新的电子时钟。通过解析提供的CSS样式、JavaScript脚本和HTML页面，读者可以了解实现动态时钟的原理和步骤。同时，提供了图片素材的下载链接以供参考。

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看

关注重工黑大帅，学习不迷路

先看效果图：
在这里插入图片描述
style.css:

/* CSS Document */
*{
	margin: 0;
	padding: 0;
}
ul,li,ol{
	list-style: none;
}
body{
	font-family: Arial,"Microsoft YaHei","SimSun";
}
.clears{
	clear: both;
	height: 0;
	line-height: 0;
	font-size: 0;
	overflow: hidden;
}
a{
	text-decoration: none;
}
.ele_clock{
	text-align: center;
	margin-left:auto;
	margin-right:auto;
    margin-top:200px ;
	border: 5px solid aqua;
	border-radius: 50px;
	width: 340px;
	height: 100px;
	padding-top: 40px;
	padding-right: 20px;
	animation:Ani 0.5s  infinite  alternate both;
	overflow: hidden;
}
@keyframes Ani{
	0%{
		opacity: 0;
		transform:   rotateZ(360deg);
	}
	50%{
		opacity: 1;
		transform:  rotateZ(0);
	}
	100%{
		opacity: 1;
		transform:  rotateZ(0);
	}
}
.dot{
		animation:shan 0.5s  infinite  alternate both;
	}
	@keyframes shan{
		0%{
			 opacity:1;
			}
		100%{
			 opacity:0;
			}
	}
#miaoShi{
	animation:Ani 0.5s  infinite  alternate;
}
@keyframes Ani{
	0%{
		opacity: 0;
		transform: scale(0,0);
	}
	50%{
		opacity: 1;
		transform:  scale(1.2,1.2);
	}
	100%{
		opacity: 1;
		transform:  scale(1,1);
	}
}
#miaoGe{
	animation:Ani 0.5s  infinite  alternate;
}
@keyframes Ani{
	0%{
		opacity: 0;
		transform: scale(0,0);
	}
	50%{
		opacity: 1;
		transform: scale(1.2,1.2);
	}
	100%{
		opacity: 1;
		transform: scale(1,1);
	}
}

web.js:

// JavaScript Document
	function  geWei( num ){
		return  num%10; 
	}
	function  shiWei( num ){
		return  (num-num%10)/10;  
	}
	function getImage(id){
		return  document.getElementById(id);	
	} 
	 var  images = [
	 	"images/num0.png",
		"images/num1.png",
		"images/num2.png",
		"images/num3.png",
		"images/num4.png",
		"images/num5.png",
		"images/num6.png",
		"images/num7.png",
		"images/num8.png",
		"images/num9.png"
	 ];
	 function timeGo(){
		 var  mytime = new Date();
		 var  shi = mytime.getHours();
		 var  fen = mytime.getMinutes();
		 var  miao = mytime.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);

index_one.html:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>电子时钟</title> 
<meta name="Keywords" content="精致时钟，时钟中的王牌">
<meta name="Description" content="重庆最大钟表制作商之一，在这里你可以选择心仪的时钟，期待你光临时钟店铺。">
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
 	<div class="ele_clock">
 		<img id="shiShi" src="images/num0.png" width="35" height="60" alt="十位上的数字"/>
   	 	<img id="shiGe" src="images/num0.png" width="35" height="60" alt="个位上的数字"/>
   		<img class="dot" src="images/dian.png" alt="时间点"/>
    	<img id="fenShi"  src="images/num0.png" width="35" height="60" alt="十位上的数字"/>
    	<img id="fenGe" src="images/num0.png" width="35" height="60" alt="个位上的数字"/>
    	<img class="dot"  src="images/dian.png" alt="时间点"/>
    	<img id="miaoShi" src="images/num0.png" width="35" height="60" alt="十位上的数字"/>
    	<img id="miaoGe" src="images/num0.png" width="35" height="60" alt="个位上的数字"/>
 	</div>
	<div class="clears"></div>
	<script src="javascript/web.js"></script>
</body>
</html>

图片素材下载链接：

链接：

https://pan.baidu.com/s/1CVhV5Tip5j_JApV-ZKZ6pQ

提取码：

01rt

您的点赞和关注是我学习的强大动力之一

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看