Как установить значение 'rotate ()' в соответствии с текущим временем?

ProgramBox

Как установить значение ‘rotate ()’ в соответствии с текущим временем?

Post author:admin
Запись опубликована:8 мая, 2023
Post category:Вопросы по программированию

#javascript

Вопрос:

Я пытаюсь создать часы на 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)

Я хочу, чтобы стрелки указывали на текущее время, но они начинаются снизу, независимо от того, какое сейчас время.

Спасибо за ваше время!

1. Пожалуйста, могу я получить css и html для этого? Я работаю над исправлением для вас, но хочу дать вам правильный, проверенный ответ.

2. Конечно! Я обновлю сообщение через секунду.

3. не следует hours*360/12 менять на hours * (360/12) ?

4. Сделайте id=»pointer» классом.

Ответ №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): Затем нам нужно создать значение, представляющее собой процент от пройденного полного поворота.

Это можно сделать, взяв количество секунд, минут, часов, заданное новой датой (); разделив его на общее количество возможных 60 секунд, 60 минут, 12 часов. Затем мы должны умножить его на 100%, чтобы получить процент.

Весь результат: вращение на одну секунду * процент прохождения одного полного оборота.

например: вращение на 1 секунду * 50% пути в течение полной минуты = 180 градусов / 30 секунд

Надеюсь, это имеет смысл…

1. Я идиот, я запустил часы в 3: 15: 15. Позвольте мне это исправить.

2. Спасибо, что потратил время на создание такого комплексного решения, Джейсон! Я многому научился из этого! У меня есть точки зрения, которые я не понимаю, и если это не доставит особых хлопот, я хотел бы получить больше информации о том, как работает математика, которую вы использовали для получения правильного угла, и не могли бы вы указать мне источник, где я могу увидеть, как работает код ajax и jquery, который вы использовали, работает. Вы, вероятно, занятой человек, поэтому, пожалуйста, не чувствуйте себя обязанным отвечать на мои вопросы.

3. Без проблем, @Jeroen, рад, что тебе это нравится. Вы можете увидеть математическое объяснение в конце моего ответа.

4. Спасибо, Джейсон! Я действительно ценю это! Последний вопрос о математике. Разве (секунды / 60 * 100) не совпадают с ((секунды / 60) * 100). Или внутренняя скобка что-то меняет?

5. Поскольку вы умножаете первое значение на второе значение, вам нужно содержать два уравнения отдельно друг от друга. секунды = (360 / 100) * ((секунды / 60) * 100); вернет другое значение, равное секундам = (360 / 100) * (секунды / 60) * 100;. Я также заметил опечатку в своем css — пожалуйста, измените ваше правило css .clock-face на position: relative; не display: relative;