Question

我正在尝试用javascript制作时钟。我不知道如何将rotate（）的值设置为等于当前时间的度数。

我尝试了一些方法。我看了这些教程：

这就是我现在拥有的，我相信它应该像这样工作。

HTML：

 <div class="analogClock">
    <div class="hours-container" id="pointer">
        <div class="hours"></div>
    </div>

    <div class="minutes-container" id="pointer">
        <div class="minutes"></div>
    </div>

    <div class="second-container" id="pointer">
        <div class="seconds"></div>
    </div> 
</div>

CSS：

.analogClock{
    border-radius: 50%;
    background-color: #11052B;
    height: 20em;
    width: 20em;
    position: relative;
}

.second-container, .minutes-container, .hours-container{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.hours{
    background-color: #E83063;
    height: 20%;
    left: 50%;
    position: absolute;
    top: 50%;
    transform-origin: 50% 100%;
    width: 2.5%;
    border-radius: 50px;
}

.minutes{
    background-color: #6CE4FF;
    height: 30%;
    left: 50%;
    position: absolute;
    top: 50%;
    transform-origin: 50% 100%;
    width: 2%;
    border-radius: 50px;
}

.seconds{
    background-color: #59FF8C;
    height: 40%;
    left: 50%;
    position: absolute;
    top: 50%;
    transform-origin: 50% 100%;
    width: 1%;
    z-index: 8;
    border-radius: 50px;
}

.hours-container{
    animation: rotate 43200s infinite steps(12);
}

.minutes-container{
    animation: rotate 3600s infinite steps(60);
}

.second-container{
    animation: rotate 60s infinite steps(60);
}

@keyframes rotate {
    100% { transform: rotateZ(360deg); }
}

JS：

//Analog clock
const hourPointer = document.querySelector('.hours-container');
const minutePointer = document.querySelector('.minutes-container');
const secondPointer = document.querySelector('.second-container');


function analogClock(){
    var date = new Date();
    var seconds = date.getSeconds();
    var minutes = date.getMinutes();
    var hours = date.getHours();

    let hrPosition = hours*360/12 + ((minutes * 360/60)/12) ;
    let minPosition = (minutes * 360/60) + (seconds* 360/60)/60;
    let secPosition = seconds * 360/60;

    hourPointer.getElementsByClassName.transform = 'rotate(' + hrPosition + 'deg)';
    minutePointer.getElementsByClassName.transform = 'rotate(' + minPosition + 'deg)';
    secondPointer.getElementsByClassName.transform = 'rotate(' + secPosition + 'deg)';
}

var interval = setInterval(analogClock, 500)

我希望指针指向当前时间，但是无论现在几点，它们都从底部开始。

感谢您的时间！

Answer 1

我试图尽可能多地帮助您，您应该会看到一个工作正常的时钟。与您当前的版本并没有太大不同。

	(function ($) {

		var secondHand = $('.second-hand');
		var minuteHand = $('.minute-hand');
		var hourHand = $('.hour-hand');

		function analogClock(){
			var date = new Date();
			var seconds = date.getSeconds();
			var minutes = date.getMinutes();
			var hours = date.getHours();
			//console.log(date);
			//console.log(seconds);
			//console.log(minutes);
			//console.log(hours);

			seconds = (360 / 100) * ((seconds / 60) * 100);
			minutes = (360 / 100) * ((minutes / 60) * 100);
			hours = (360 / 100) * ((hours / 12) * 100);

			var secondsAngle = seconds;
			var minutesAngle = minutes;
			var hoursAngle = hours;
			//console.log(secondsAngle);
			//console.log(minutesAngle);
			//console.log(hoursAngle);

			secondHand.css({
				'-webkit-transform' : 'rotate('+ secondsAngle +'deg)',
				'-moz-transform' : 'rotate('+ secondsAngle +'deg)',
				'-ms-transform' : 'rotate('+ secondsAngle +'deg)',
				'transform' : 'rotate('+ secondsAngle +'deg)'
			});

			minuteHand.css({
				'-webkit-transform' : 'rotate('+ minutesAngle +'deg)',
				'-moz-transform' : 'rotate('+ minutesAngle +'deg)',
				'-ms-transform' : 'rotate('+ minutesAngle +'deg)',
				'transform' : 'rotate('+ minutesAngle +'deg)'
			});

			hourHand.css({
				'-webkit-transform' : 'rotate('+ hoursAngle +'deg)',
				'-moz-transform' : 'rotate('+ hoursAngle +'deg)',
				'-ms-transform' : 'rotate('+ hoursAngle +'deg)',
				'transform' : 'rotate('+ hoursAngle +'deg)'
			});
		}

		setInterval(function() {

			analogClock();

		}, 1000);

	})(jQuery);

	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	.clock {
		width: 300px;
		height: 300px;
		margin: 0 auto;
		padding: 50px;
		position: relative;
		background-color: purple;
	}
	.clock-face {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		position: relative;
	}
		.hand {
			height: 100px;
			position: absolute;
			left: 50%;
			-ms-transform: translate(-50%, -50%);
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			transform-origin: 50% 100%;
			display: block;
		}

		.second-hand {
			width: 5px;
			z-index: 3;
		}
			.sec-hand {
				height: 100px;
				background-color: red;
			}
		.minute-hand {
			width: 6px;
			z-index: 2;
		}
			.min-hand {
				height: 80px;
				margin-top: 20px;
				background-color: green;
			}
		.hour-hand {
			width: 7px;
			z-index: 1;
		}
			.hr-hand {
				height: 60px;
				margin-top: 40px;
				background-color: black;
			}

			.single-hand {
				width: 100%;
			}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clock">
		<div class="clock-face">
			<div class="second-hand hand">
				<div class="sec-hand single-hand"></div>
			</div>
			<div class="minute-hand hand">
				<div class="min-hand single-hand"></div>
			</div>
			<div class="hour-hand hand">
				<div class="hr-hand single-hand"></div>
			</div>
		</div>
	</div>

刚刚更新以对手（z索引）进行排序并更改其长度...

数学：

seconds = (360 / 100) * ((seconds / 60) * 100);
minutes = (360 / 100) * ((minutes / 60) * 100);
hours = (360 / 100) * ((hours / 12) * 100);s

（360/100）：因此对于所有时间变量，可能存在360度旋转。我们除以100，就可以得到时钟的百分之一。

a * b：现在，我们可以将其乘以时钟的百分比（上面的数学公式）来表示我们需要旋转指针的度数。

（（秒/ 60）* 100）：然后，我们需要创建一个值，该值是整个旋转过程的百分比。

这可以通过采用新的date（）给出的秒，分钟，小时数来完成；将其除以可能的总时间60秒60分钟12小时。然后，我们必须将其乘以100％以获得百分比。

整个结果：一秒钟的旋转值*一整圈的百分比。

例如： 1秒旋转值*一整分钟的50％旋转= 180度/ 30秒

希望如此...

如何设置“ rotate（）”值以匹配当前时间？

1 个答案: