用javascript设计时钟

最新推荐文章于 2023-01-18 01:07:27 发布

吃素的黑猫

最新推荐文章于 2023-01-18 01:07:27 发布

阅读量291

点赞数

分类专栏： web开发——作品文章标签： css css3 html html5 javascript

本文链接：https://blog.csdn.net/qq_44645934/article/details/108391394

版权

web开发——作品专栏收录该内容

10 篇文章 0 订阅

订阅专栏

用javascript设计时钟

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>clock</title>
		<link rel="stylesheet" type="text/css" href="css/clock.css"/>
		<script type="text/javascript" src="js/clock.js"></script>
	</head>
	<body>
		<div id="clock"></div>
		<div id="hours"></div>
		<div id="minutes"></div>
		<div id="seconds"></div>
	</body>
</html>

*{
	margin: 0;
	padding: 0;
}
body{
	margin: auto;
	width: 500px;
	height: 500px;
	/*border: 2px solid red;*/
	position: relative;
}
#clock{
	width: 240px;
	height: 240px;
    border: 3px solid black;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
/*表盘上的刻度*/
span{
	display:block;
	width: 40px;
	height: 40px;
	font-size: 60px;
    color: black;
    text-align: center;
    line-height: 0px;
    /*border: 2px solid red;*/
   /* border-radius: 50%;*/
   position: absolute;
   transform:translate(-50%,-50%);
}
span:nth-child(1),span:nth-child(4),span:nth-child(9),span:nth-child(12){
	font-size: 40px;
	line-height: 40px;
}
span:nth-child(1){
	top: 50%;
	left: 0%;
}
span:nth-child(2){
	top: 33.33%;
	left: 16.67%;
	transform:translate(-100%,-100%) rotate(45deg);
}
span:nth-child(3){
	top: 16.67%;
	left: 33.33%;
	transform:translate(-100%,-100%) rotate(45deg);
}
span:nth-child(4){
	top: 0%;
	left: 50%;
}
span:nth-child(5){
	top:16.67%;
	left: 66.67%;
	transform:translate(0%,-100%) rotate(-45deg);
}
span:nth-child(6){
	top: 33.33%;
	left: 83.3%;
	transform:translate(0%,-100%) rotate(-45deg);
}
span:nth-child(7){
	top: 66.67%;
	left: 16.67%;
	transform:translate(-100%,0%) rotate(-45deg);
}
span:nth-child(8){
	top: 83.33%;
	left: 33.33%;
	transform:translate(-100%,0%) rotate(-45deg);
}
span:nth-child(9){
    top: 100%;
    left: 50%;
}
span:nth-child(10){
	top: 83.33%;
	left:66.67%;
	transform:translate(0%,0%) rotate(45deg);
}
span:nth-child(11){
	top: 66.67%;
	left: 83.33%;
	transform:translate(0%,0%) rotate(45deg);
}
span:nth-child(12){
	top: 50%;
	left: 100%;
}
/*表盘上的指针
 * 1.将指针设置成一个原点
 * 2.分别给时针，分针，秒针添加伪类before；
 * */
#hours,#minutes,#seconds{
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: black;
	/*给指针定位*/
	position: absolute;
	top: 50%;
	left: 50%;
	transition: all;
}
#hours:before,#minutes:before,#seconds:before{
	content: "";
	display: block;
	position: absolute;
}
#hours:before{
	width: 6px;
	height: 50px;
	background: red;
	top: -50px;
	left: 2px;
}
#minutes:before{
	width: 4px;
	height: 80px;
	background: green;
	top: -80px;
	left: 3px;
}
#seconds:before{
	width: 2px;
	height: 100px;
	background: blue;
	top: -100px;
	left: 4px;
}

window.onload=function(){
	/*获得盒子clock的id*/
	var clock=document.getElementById("clock");
	/*在clock盒子里面追加12个span*/
	var num=8;/*表盘数字*/
	for(let i=14;i>2;i--){  
		if(i>8){/*上表盘的上的刻度*/
			num++;
		}else{
			num=i;/*下表盘的上的刻度*/
		}
		/*追加元素节点span*/
		var text=document.createElement("span");
		if(num%3==0){
			text.innerText=num;
		}else{
			text.innerText=".";
		}
	    clock.appendChild(text);
	}
	time();
	setInterval(time,1000);
	function time(){
		/*获取当前时间对象*/
		var myDate = new Date();
		var hours=parseInt(myDate.getHours());
		/*alert(hours);*/
		var minutes=parseInt(myDate.getMinutes());
		/*alert(minutes);*/
		var seconds=parseInt(myDate.getSeconds());
		/*alert(seconds);*/
		
		var  hoursMove=document.getElementById("hours");
		var  minutesMove=document.getElementById("minutes");
		var  secondsMove=document.getElementById("seconds");
	        
        secondsMove.style.transform= "translate(-50%,-50%)"+"rotate("+6*(seconds)%360+"deg)"; 
        minutesMove.style.transform= "translate(-50%,-50%)"+"rotate("+6*minutes+"deg)"; 
        hoursMove.style.transform= "translate(-50%,-50%)"+"rotate("+30*(Math.abs(hours-12)+minutes/60)+"deg)"; 	
	}
    clearInterval(time);
};

吃素的黑猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用javascript设计时钟

时钟<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>clock</title> <link rel="stylesheet" type="text/css" href="css/clock.css"/> <script type="text/javascript" src="js/clock.js"></
复制链接

扫一扫