JavaScript - 机械表 and 电子表 and 随机颜色切换 - 简单实现

本文链接：https://blog.csdn.net/qq_33961117/article/details/83278907
机械表+电子表.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>机械表+电子表</title>
	<!-- 机械表 -->
	<style>
		/*body,div{
			margin:0 ;
			top: 0;
		}*/

		/*表盘*/
		.clock{
			width: 300px;
			height: 300px;
			border-radius: 50%;
			background-color: #eee;	
			position: relative;
			float: left;
		}
		.clock-dial{
			position: absolute;
			left: 140px;
			width: 20px;
			height: 300px;
			/*border: 3px solid cyan;*/
		}
		.dial{
			width: 20px;
			height: 300px;
			position: absolute;

		}
		.dial span{
			display: block;
			width: 20px;
			font-size: 18px;
			line-height: 20px;
			text-align: center;
		}
		.dial span:first-child{
			position: absolute;
			top: 0;
			left: 0;
		}
		.dial span:last-child{
			position: absolute;
			bottom: 0;
			left: 0;
		}

		/*表盘中心圈*/
		.clock-center {
			width: 4px;
			height: 4px;
			border-radius: 50%;
			border: 2px solid black;
			position: absolute;
			left: 146px;
			top: 146px;
		}

		/*指针*/
		.point-hour {
			width: 10px;
			height: 300px;
			position: absolute;
			left: 145px;
			/*background-color: red;*/
			position: absolute;
		}
		.hour {
			width: 10px;
			height: 80px;
			border-radius: 5px;
			background-color: orange;
			position: absolute;
			top: 80px;
		}

		.point-minute {
			width: 6px;
			height: 300px;
			position: absolute;
			left: 147px;
			/*background-color: red;*/
			position: absolute;
		}
		.minute {
			width: 6px;
			height: 110px;
			border-radius: 3px;
			background-color: pink;
			position: absolute;
			top: 50px;
		}
		.point-second {
			width: 2px;
			height: 300px;
			position: absolute;
			left: 149px;
			/*background-color: red;*/
			position: absolute;
		}
		.second {
			width: 2px;
			height: 140px;
			border-radius: 1px;
			background-color: yellow;
			position: absolute;
			top: 20px;
		}
	</style>

	<!-- 电子表 -->
	<style>
		.dig_watch{
			display: block;
			width: 120px;
			height: 40px;
			font: normal 22px/40px 'STSong';
			border: 2px solid cyan;
			border-radius: 3px;
			text-align: center;
			margin:50px auto; 
		}
	</style>

</head>
<body>
	<!-- 机械表 -->
	<div class="clock">
		<!-- 表盘 -->
		<div class="clock-dial">
			<!-- 表盘上数字，成对位于两端 -->
			<div class="dial dial-1">
				<span>12</span>
				<span>6</span>
			</div>
			<div class="dial dial-2">
				<span>1</span>
				<span>7</span>
			</div>
			<div class="dial dial-3">
				<span>2</span>
				<span>8</span>
			</div>
			<div class="dial dial-4">
				<span>3</span>
				<span>9</span>
			</div>
			<div class="dial dial-5">
				<span>4</span>
				<span>10</span>
			</div>
			<div class="dial dial-6">
				<span>5</span>
				<span>11</span>
			</div>
		</div>
		<!-- 指针 -->
		<div class="clock-point">
			<div class="point-hour">
				<div class="hour"></div>
			</div>
			<div class="point-minute">
				<div class="minute"></div>
			</div>
			<div class="point-second">
				<div class="second"></div>
			</div>
		</div>
		<!-- 表盘中心 -->
		<div class="clock-center"></div>
	</div>

	<!-- 电子表 -->
	<div class="dig_watch">00:00:00</div>
</body>


	<!-- 机械表 -->
<script>
	//表盘数字循环绘制
	var d = document.querySelectorAll('.clock-dial div');
	console.log(d);
	var div_span = document.querySelectorAll('.dial span');
	console.log(div_span);
	
	// 旋转包裹span的div
	for(var i = 0;i<d.length;i++){
		d[i].style.transform="rotate("+(i*30)+"deg)";
	}
	//反向旋转span内文字，抵消旋转
	for (var j = 2;j<div_span.length;j++){
		if(j%2==0){
		div_span[j].style.transform="rotate("+((j/2)*-30)+"deg)";
		}else{
			div_span[j].style.transform="rotate("+(((j-1)/2)*-30)+"deg)";
		}
	}


	// 指针根据时间旋转
	// 获取指针们
	var hour_point = document.querySelector('.point-hour');
	var minute_point = document.querySelector('.point-minute');
	var second_point = document.querySelector('.point-second');

	// 初始化时间函数
	function setPoint() {
		// 获取当前时间
		var date = new Date();

		// 获取当前秒数，设置秒针旋转角度
		var s = date.getSeconds();
		// 60s旋转一圈360deg 则1s = 360/60 = 6deg
		second_point.style.transform = "rotate("+(6*s)+"deg)";
		
		// 获取当前分钟数，设置分针旋转角度
		var m = date.getMinutes();
		// 60m转一圈 1m = 6deg, 1s = 6/60 = 0.1deg
		minute_point.style.transform = "rotate("+(6*m+0.1*s)+"deg)";

		// 获取当前小时数，设置时针旋转角度
		var h = date.getHours();
		// 12h一圈 1h= 30deg，1m= 0.5deg
		// 由于秒数不精确，忽略秒数影响
		hour_point.style.transform = "rotate("+(30*h+m*0.5)+"deg)";

	}

	// 执行时间初始化函数
	setPoint();
	// 设置定时器，隔0.3s刷新表盘
	setInterval(setPoint,300);
</script>

<!-- 电子表 -->
<script>
	//获取电子表对象
	var d = document.querySelector('.dig_watch');

	//封装获取当前时间的函数
	function getDate() {
		var date = new Date();
		var hour = date.getHours();
		var min = date.getMinutes();
		var sec = date.getSeconds();
		return [hour,min,sec];
	}

	//设置定时器,0.3s执行一次匿名函数
	setInterval(function () {
		date = getDate();
		//每次循环判断hour，min，sec的数字是否小于10，若小于10，则自动拼接字符串‘0’
		for(var i= 0;i<date.length;i++){
			date[i] = date[i]<10 ? '0'+date[i]:date[i];
		}
		//修改原来对象d内文字
		d.innerText = date[0]+':'+date[1]+':'+date[2];
	},300)
</script>

<!-- 电子表随机表盘颜色 -->
<script>
	//获取随机数函数
	function randomNum(min,max) {
		return parseInt(Math.random()*(max-min +1))+min;
	}
	// 获取表盘
	var d_watch = document.querySelector('.dig_watch');
	// 定时器2.8s刷新表盘颜色
	setInterval(function(){
		var r = randomNum(0, 255);
		var g = randomNum(0, 255);
		var b = randomNum(0, 255);
		d_watch.style.borderColor = "rgb("+r+","+g+","+b+")";
	},2800);
</script>
</html>