cs3完成的钟表

Posted 2021-01-07 tigerzhang-home

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了cs3完成的钟表相关的知识，希望对你有一定的参考价值。

先看一下效果图，背景表盘是一个底图。选一个漂亮的底图，整体钟表效果还是不错的。

技术分享图片

下边上代码

<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>钟表</title>
		<style>
			body,
			html {
				margin: 0;
			}
			
			.location {
				position: relative;
				width: 600px;
				height: 600px;
				left: calc(50% - 300px);
			}
			
			.dial {
				width: 600px;
				height: 600px;
				margin: 0 auto;
				position: absolute;
				border-radius: 50%;
				overflow: hidden;
				background-color: rgba(153, 50, 204, 0.2);
				background-image: url(clock.jpg);
				background-size: 100% 100%;
			}
			
			.bigdiv {
				width: 600px;
				height: 600px;
				margin: 0 auto;
				position: absolute;
				border-radius: 50%;
				overflow: hidden;
			}
			
			.bigdiv>div {
				position: absolute;
				left: 298px;
				border-radius: 100px;
			}
			
			.bigdiv1 {
				animation: moves 60s steps(60) infinite;
			}
			
			.bigdiv1 .secondHand {
				width: 4px;
				height: 250px;
				background-color: red;
				top: 50px;
				left: 298px;
			}
			
			.bigdiv2 {
				animation: moves 3600s steps(3600) infinite;
			}
			
			.bigdiv2 .minuteHand {
				width: 6px;
				height: 180px;
				background-color: green;
				top: 120px;
				left: 297px;
			}
			
			.bigdiv3 {
				animation: moves 216000s steps(216000) infinite;
			}
			
			.bigdiv3 .hourHand {
				width: 8px;
				height: 160px;
				background-color: orange;
				top: 140px;
				left: 296px;
				border-radius: 100px;
			}
			
			.bigdiv .center {
				top: 290px;
				left: 290px;
				width: 20px;
				height: 20px;
				background-color: black;
				z-index: 2;
			}
			
			@keyframes moves {
				from {
					transform: rotateZ(0deg);
				}
				to {
					transform: rotateZ(360deg);
				}
			}
			
			#dateshow {
				text-align: center;
			}
		</style>
	</head>

	<body>
		<h1 id="dateshow"></h1>
		<div class="location">
			<div class="dial">
			</div>
			<div class="bigdiv bigdiv1" id="secondHand">
				<div class="secondHand"></div>
			</div>
			<div class="bigdiv bigdiv2" id="minuteHand">
				<div class="minuteHand"></div>
			</div>
			<div class="bigdiv bigdiv3" id="hourHand">
				<div class="center"></div>
				<div class="hourHand"></div>
			</div>
		</div>
		<script>
			var dateshow = document.getElementById("dateshow");
			var clock = {
				weeks: ["一", "二", "三", "四", "五", "六", "日"],
				getDate: function() {
					date = new Date();
					year = date.getFullYear();
					month = date.getMonth() + 1;
					day = date.getDate();
					hours = date.getHours();
					minutes = date.getMinutes();
					seconds = date.getSeconds();
					week = date.getDay(); // 星期
					dateText = year + "年" + month + "月" + clock.format(day) + "日 星期" + clock.formatnum(week) + " " +
						clock.format(hours) + ":" + clock.format(minutes) + ":" + clock.format(seconds);
					return dateText;
				},
				format: function(data) {
					if(data.toString().length == 1) {
						data = "0" + data;
					};
					return data;
				},
				formatnum: function(num) {
					return clock.weeks[num - 1];
				},
				showdate: function() {
					dateshow.innerText = clock.getDate();
				},
				go: function() {
					var secondHand = document.getElementById("secondHand");
					var minuteHand = document.getElementById("minuteHand");
					var hourHand = document.getElementById("hourHand");
					date = new Date();
					hours = date.getHours();
					minutes = date.getMinutes();
					seconds = date.getSeconds();
					var secondAngle = seconds;
					var minuteAngle = minutes * 60 + seconds;
					var hourAngle = (60 / 12) * ((hours % 12) * 3600 + minuteAngle);
					hourHand.style.cssText = "animation-delay: -" + hourAngle + "s";
					minuteHand.style.cssText = "animation-delay: -" + minuteAngle + "s";
					secondHand.style.cssText = "animation-delay: -" + secondAngle + "s";
				}

			}
			clock.go();
			clock.showdate();
			setInterval("clock.showdate()", 1000);
		</script>
	</body>

</html>

以上是关于cs3完成的钟表的主要内容，如果未能解决你的问题，请参考以下文章

利用构造函数创建钟表

cs3动画

最全PS各个版本下载安装及小试牛刀教程（PhotoShop CS3 ~~ PhotoShop 2022）

WPF钟表效果实现

动态小人钟表

简单的JS钟表计时