js时钟代码

最新推荐文章于 2022-02-04 10:54:32 发布

timelessmemoryli

最新推荐文章于 2022-02-04 10:54:32 发布

阅读量749

点赞数

分类专栏： js 文章标签： js时钟代码

本文链接：https://blog.csdn.net/u014788227/article/details/52151370

版权

js 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JavaScript Clock</title>
	<style>
		html, body {
			margin: 0;
			padding: 0;
			background: rgba(165,208,104,.75);
		}

		#clock {
			width: 200px;
			height: 200px;
			border-radius: 115px;
			border: 15px solid #38c4a9;
			background: white;
			position: relative;
			margin: 0 auto;
		}

		/*section 计数器 对于#number重置为0*/
		#number {
			counter-reset: section;
		}

		/*section 计数器 对于#number div增加 增量默认为1*/
		#number div {
			width: 190px;
			height: 20px;
			position: absolute;
			left: 10px;
			top: 90px;
			counter-increment: section;
		}

		/*表盘数字*/
		#number div:before {
			content: counter(section);
			display: block;
			width: 20px;
			height: 20px;
		}

		/*表盘布局*/
		#number div:nth-child(1) {
			-webkit-transform: rotate(120deg);
			transform: rotate(120deg);
		}

		#number div:nth-child(1):before {
			-webkit-transform: rotate(-120deg);
			transform: rotate(-120deg);
		}

		#number div:nth-child(2) {
			-webkit-transform: rotate(150deg);
			transform: rotate(150deg);
		}

		#number div:nth-child(2):before {
			-webkit-transform: rotate(-150deg);
			transform: rotate(-150deg);
		}

		#number div:nth-child(3) {
			-webkit-transform: rotate(180deg);
			transform: rotate(180deg);
		}

		#number div:nth-child(3):before {
			-webkit-transform: rotate(-180deg);
			transform: rotate(-180deg);
		}

		#number div:nth-child(4) {
			-webkit-transform: rotate(210deg);
			transform: rotate(210deg);
		}

		#number div:nth-child(4):before {
			-webkit-transform: rotate(-210deg);
			transform: rotate(-210deg);
		}

		#number div:nth-child(5) {
			-webkit-transform: rotate(240deg);
			transform: rotate(240deg);
		}

		#number div:nth-child(5):before {
			-webkit-transform: rotate(-240deg);
			transform: rotate(-240deg);
		}

		#number div:nth-child(6) {
			-webkit-transform: rotate(270deg);
			transform: rotate(270deg);
		}

		#number div:nth-child(6):before {
			-webkit-transform: rotate(-270deg);
			transform: rotate(-270deg);
		}

		#number div:nth-child(7) {
			-webkit-transform: rotate(300deg);
			transform: rotate(300deg);
		}

		#number div:nth-child(7):before {
			-webkit-transform: rotate(-300deg);
			transform: rotate(-300deg);
		}

		#number div:nth-child(8) {
			-webkit-transform: rotate(330deg);
			transform: rotate(330deg);
		}

		#number div:nth-child(8):before {
			-webkit-transform: rotate(-330deg);
			transform: rotate(-330deg);
		}

		#number div:nth-child(9) {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
		}

		#number div:nth-child(9):before {
			-webkit-transform: rotate(-360deg);
			transform: rotate(-360deg);
		}

		#number div:nth-child(10) {
			-webkit-transform: rotate(390deg);
			transform: rotate(390deg);
		}

		#number div:nth-child(10):before {
			-webkit-transform: rotate(-390deg);
			transform: rotate(-390deg);
		}

		#number div:nth-child(11) {
			-webkit-transform: rotate(420deg);
			transform: rotate(420deg);
		}

		#number div:nth-child(11):before {
			-webkit-transform: rotate(-420deg);
			transform: rotate(-420deg);
		}

		#number div:nth-child(12) {
			-webkit-transform: rotate(450deg);
			transform: rotate(450deg);
		}

		#number div:nth-child(12):before {
			-webkit-transform: rotate(-450deg);
			transform: rotate(-450deg);
		}

		.pointer {
			position: absolute;
			bottom: 90px;
			-webkit-transform-origin: 50% 90%;
			transform-origin: 50% 90%;
		}

		#hour {
			width: 5px;
			height: 60px;
			left: 98px;
			background: #eee;
		}

		#minute {
			width: 3px;
			height: 70px;
			left: 99px;
			background: #eee;
		}

		#second {
			width: 1px;
			height: 80px;
			left: 100px;
			background: #eee;
		}
	</style>
</head>
<body>
	<div id="clock">
		<div id="number">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<div id="hour" class="pointer"></div>
		<div id="minute" class="pointer"></div>
		<div id="second" class="pointer"></div>
	</div>
	<script>
		(function() {
			function runClock() {
				var hourDiv = document.querySelector('#hour');
				var minuteDiv = document.querySelector('#minute');
				var secondDiv = document.querySelector('#second');

				var currentTime = new Date();
				var hour = currentTime.getHours();
				hour = hour > 12 ? hour - 12 : hour;
				var minute = currentTime.getMinutes();
				var second = currentTime.getSeconds();

				var hourDeg = hour / 12 * 360;
				var minuteDeg = minute / 60 * 360;
				var secondDeg = second / 60 * 360;

				hourDiv.style.WebkitTransform =
					"rotate(" + hourDeg + "deg)";
				minuteDiv.style.WebkitTransform =
					"rotate(" + minuteDeg + "deg)";
				secondDiv.style.WebkitTransform =
					"rotate(" + secondDeg + "deg)";
			}
			setInterval(runClock, 1000);
		})();
	</script>
</body>
</html>