前端-js 钟表

tl110110tl

已于 2022-04-07 13:25:37 修改

阅读量838

点赞数

分类专栏：前端文章标签： javascript css

于 2022-04-02 16:07:40 首次发布

本文链接：https://blog.csdn.net/tl110110tl/article/details/123922547

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

有基本图4张，表盘，时针，分针，秒针

希望实现如下效果

超他妈简单，只需要知道js怎么操作元素旋转就行

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
<style type="text/css">
	*{margin: 0;padding: 0;}
	.clock{
		width: 600px;
		height: 600px;
		margin:0 auto;
		position: relative;
		background: url(images/clock.jpg) no-repeat center center;
	}
	.hour,.minute,.second{
		width: 100%;
		height: 100%;
		position: absolute;
		top:0;
		left:0;
	}
	.hour{
		background: url(images/hour.png) no-repeat center center;
	}
	.minute{
		background: url(images/minute.png) no-repeat center center;
	}
	.second{
		background: url(images/second.png) no-repeat center center;
	}
</style>

</head>
<body>
	<div class="clock">
		<div class="hour"></div>
		<div class="minute"></div>
		<div class="second"></div>
	</div>
</body>
</html>
<script type="text/javascript">
	var hour = document.getElementsByClassName("hour")[0];
	var minute = document.getElementsByClassName("minute")[0];
	var second = document.getElementsByClassName("second")[0];

	setInterval(function(){
		var date = new Date(); // 2022-04-02 15:12:32 153
		var yyyy = date.getFullYear();//年[yyyy]=>2022
		var MM = date.getMonth();//月[0一月,1二月......11十二月]=>3
		var dd = date.getDate();//日[1-31]=>2
		var weekDay = date.getDay();//周几[0周日,1周一......6周六]=>6
		var HH = date.getHours();//小时[24]=>15
		var mm = date.getMinutes();//分种[60]=>12
		var ss = date.getSeconds();//秒钟[60]=>32
		var ms = date.getMilliseconds();//毫秒[1000]=>153

		var s = ss+ ms/1000;
		var m = mm + s/60;
		var h = HH %12  + m/60;

		// 旋转角度
        // 一圈  360 °     一共有 60 秒       每秒  6 °   现在是 s秒
        second.style.WebkitTransform = "rotate("+ s*6 +"deg)";
                     //  变化            旋转    deg  度
        minute.style.WebkitTransform = "rotate("+ m*6 +"deg)";
        hour.style.WebkitTransform = "rotate("+ h*30 +"deg)";

        //有兼容问题，后期用CSS3实现
        //second.style.MozTransform = "rotate("+ s*6 +"deg)";
                     //  变化            旋转    deg  度
        //minute.style.MozTransform = "rotate("+ m*6 +"deg)";
        //hour.style.MozTransform = "rotate("+ h*30 +"deg)";
	}, 30);
</script>