Styjun

I'm trying to make a clock in javascript. I can't figure out how to set the value of rotate() equal to the degree of the current time.

I've tried some methods.
I've looked at these tutorials:

• https://cssanimation.rocks/clocks/


• https://medium.com/@abhi95.saxena/make-an-analog-clock-using-javascript-7c07580ea91b

This is what I have right now and I believe it should work like this.

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)

I want the hands to point at the current time, but they start from the bottom no matter what time it is.

Thanks for your time!

I have attempted to get you as much in here as possible, you should see a fully working clock. It's not been done too different from your current version.

	(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>

• Just updated to order the hands (z-index) and change their length...

The Math:

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

(360 / 100): So for all of the time variables, there is 360deg of possible rotation.
We divide by 100, to give us a single percent of the clocks face.

a * b: We now can multiply this by a percentage of the clock (the math above) to represent how far in degrees we will need to rotate the hand.

((seconds / 60) * 100): We need to then create a value that is a percentage of the way through a full rotation.

This can be done by taking the number of seconds, minutes, hours given by the new date(); dividing it by the total possible 60 seconds, 60 minutes, 12 hours.
We then must multiply it by 100% to get a percentage.

The whole result: One seconds worth of rotation * percentage of the way through one full turn.

e.g: 1 second worth of rotation * 50% of the way through a complete minute = 180deg / 30seconds

Hope that makes sense...