Сделайте аналоговые часы, которые соответствуют местному времени, используя javascript

Я создал аналоговые часы, которые отлично работают с css. Прямо здесь

.frame {
	position : absolute;
	top : 0;
	bottom : 0;
	right : 0;
	left : 0;
	margin : auto;
	width : 100%;
	height : 100%;
	border-radius : 50%;
	border : 5px groove #000;
	border-color : ;
	/* transform : rotateZ(45deg); */
	box-shadow : inset 0 0 10px 2px #000;
}
.secHand, .minHand, .hourHand {
	background :  ;
	position : absolute ;
	top :  2%;
	bottom : ;
	width : 0;
	right : 0;
	left : 0;
	margin : auto;
	transform-origin : 100% 100%;
	/* transform : rotate(-45deg); */
	border-right : 1px solid #000;
	}
	.hourCut, .miniCut {
		position : absolute ;
		width : 100% ;
		bottom : 0;
	}
	.hourCut {
		height : 50% ;
		border-right : 3px solid #000;
	}
	.miniCut {
		height : 70% ;
		border-right : 2px solid #00f;
		}
	.hourHand {
		height : 48%;
		background : transparent ;
		border-right : 3px solid transparent;
		animation : clockwise 43200s linear infinite;
		z-index : 5 ;
	}
	.minHand {
		height : 48%;
		border-right : 2px solid transparent;
		animation : clockwise 3600s linear infinite;
		z-index : 4 ;
	}

	.secHand {
		height : 48%;
	animation : clockwise 60s linear infinite ;
	z-index : 6 ;
}
@keyframes clockwise {
	0% {
		transform : rotateZ(0deg);
}
100% {
transform : rotateZ(360deg);
}
}
.containerX {
	position : absolute;
	top : 0 ;
	bottom : 0 ;
	left : 0;
	right : 0;
	margin : auto;
	height : 300px;
	width : 300px;
}
.innerFrame, .smallFrame {
	position : absolute ;
	top : 0 ;
	bottom : 0 ;
	right : 0 ;
	left : 0 ;
	margin : auto ;
	border : 1px solid transparent;
	border-radius : 50% ;
	background : #fff;
	display : ;	
}
.innerFrame {
	height : 90% ;
	width : 90% ;
	box-shadow : 0 0 10px 2px #000;
	z-index : 1 ;
}
.smallFrame {
	height : 80% ;
	width : 80% ;
	z-index : 3 ;
}
.calibrate {
	position : absolute ;
	top : 0 ;
	bottom : ;
	right : 0 ;
	left : 0 ;
	margin : auto ;
	height : 50% ;
	width : 0 ;
	transform-origin : 100% 100% ;
	border-right : 1px solid #fff;
}
.indicators {
	border-right : 1px solid #00f;
	box-shadow : 0 0 5px 0px #000;
	z-index : 2  ;
}
.knob {
	position : absolute ;
	top : 0 ;
	bottom : 0 ;
	right : 0 ;
	left : 0 ;
	margin : auto ;
	height : 1.5% ;
	width : 1.5% ;
	border-radius : 50% ;
	border : 3px solid #000;
	background : #fff ;
	z-index : 7 ;
}
.r0 {
	transform : rotateZ(0deg)
}
.r6 {
	transform : rotateZ(6deg) 
}
.r12 {
	transform : rotateZ(12deg)
}
.r18 {
	transform : rotateZ(18deg)
}
.r24 {
	transform : rotateZ(24deg)
}
.r30 {
	transform : rotateZ(30deg)
}
.r36 {
	transform : rotateZ(36deg)
}
.r42 {
	transform : rotateZ(42deg)
}
.r48 {
	transform : rotateZ(48deg)
}
.r54 {
	transform : rotateZ(54deg)
}
.r60 {
	transform : rotateZ(60deg)
}
.r66 {
	transform : rotateZ(66deg)
}
.r72 {
	transform : rotateZ(72deg)
}
.r78 {
	transform : rotateZ(78deg)
}
.r84 {
	transform : rotateZ(84deg)
}
.r90 {
	transform : rotateZ(90deg)
}
.r96 {
	transform : rotateZ(96deg)
}
.r102 {
	transform : rotateZ(102deg)
}
.r108 {
	transform : rotateZ(108deg)
}
.r114 {
	transform : rotateZ(114deg)
}
.r120 {
	transform : rotateZ(120deg)
}
.r126 {
	transform : rotateZ(126deg)
}
.r132 {
	transform : rotateZ(132deg)
}
.r138 {
	transform : rotateZ(138deg)
}
.r144 {
	transform : rotateZ(144deg)
}
.r150 {
	transform : rotateZ(150deg)
}
.r156 {
	transform : rotateZ(156deg)
}
.r162 {
	transform : rotateZ(162deg)
}
.r168 {
	transform : rotateZ(168deg)
}
.r174 {
	transform : rotateZ(174deg)
}
.r180 {
	transform : rotateZ(180deg)
}
.r186 {
	transform : rotateZ(186deg)
}
.r192 {
	transform : rotateZ(192deg)
}
.r198 {
	transform : rotateZ(198deg)
}
.r204 {
	transform : rotateZ(204deg)
}
.r210 {
	transform : rotateZ(210deg)
}
.r216 {
	transform : rotateZ(216deg)
}
.r222 {
	transform : rotateZ(222deg)
}
.r228 {
	transform : rotateZ(228deg)
}
.r234 {
	transform : rotateZ(234deg)
}
.r240 {
	transform : rotateZ(240deg)
}
.r246 {
	transform : rotateZ(246deg)
}
.r252 {
	transform : rotateZ(252deg)
}
.r258 {
	transform : rotateZ(258deg)
}
.r264 {
	transform : rotateZ(264deg)
}
.r270 {
	transform : rotateZ(270deg)
}
.r276 {
	transform : rotateZ(276deg)
}
.r282 {
	transform : rotateZ(282deg)
}
.r288 {
	transform : rotateZ(288deg)
}
.r294 {
	transform : rotateZ(294deg)
}
.r300 {
	transform : rotateZ(300deg)
}
.r306 {
	transform : rotateZ(306deg)
}
.r312 {
	transform : rotateZ(312deg)
}
.r318 {
	transform : rotateZ(318deg)
}
.r324 {
	transform : rotateZ(324deg)
}
.r330 {
	transform : rotateZ(330deg)
}
.r336 {
	transform : rotateZ(336deg)
}
.r342 {
	transform : rotateZ(342deg)
}
.r348 {
	transform : rotateZ(348deg)
}
.r354 {
	transform : rotateZ(354deg)
}
.r358 {
	transform : rotateZ(360deg)
}
<div class = "containerX">
        <div class = "frame">
        <div class = "secHand"></div>
        
        <div class = "minHand">
            <div class = "miniCut"></div>
            </div>
            
        <div class = "hourHand">
            <div class = "hourCut"></div>
            </div>
            
<div class = "innerFrame"></div> 
<div class = "smallFrame"></div>          
<div class = "knob"></div>
        <div class = "calibrate r0 indicators"></div>
        <div class = "calibrate r6"></div>
        <div class = "calibrate r12"></div>
        <div class = "calibrate r18"></div>
        <div class = "calibrate r24"></div>
        <div class = "calibrate r30 indicators"></div>
        <div class = "calibrate r36"></div>
        <div class = "calibrate r42"></div>
        <div class = "calibrate r48"></div>
        <div class = "calibrate r54"></div>
        <div class = "calibrate r60 indicators"></div>
        <div class = "calibrate r66"></div>
        <div class = "calibrate r72"></div>
        <div class = "calibrate r78"></div>
        <div class = "calibrate r84"></div>
        <div class = "calibrate r90 indicators"></div>
        <div class = "calibrate r96"></div>
        <div class = "calibrate r102"></div>
        <div class = "calibrate r108"></div>
        <div class = "calibrate r114"></div>
        <div class = "calibrate r120 indicators"></div>
        <div class = "calibrate r126"></div>
        <div class = "calibrate r132"></div>
        <div class = "calibrate r138"></div>
        <div class = "calibrate r144"></div>
        <div class = "calibrate r150 indicators"></div>
        <div class = "calibrate r156"></div>
        <div class = "calibrate r162"></div>
        <div class = "calibrate r168"></div>
        <div class = "calibrate r174"></div>
        <div class = "calibrate r180 indicators"></div>
        <div class = "calibrate r186"></div>
        <div class = "calibrate r192"></div>
        <div class = "calibrate r198"></div>
        <div class = "calibrate r204"></div>
        <div class = "calibrate r210 indicators"></div>
        <div class = "calibrate r216"></div>
        <div class = "calibrate r222"></div>
        <div class = "calibrate r228"></div>
        <div class = "calibrate r234"></div>
        <div class = "calibrate r240 indicators"></div>
        <div class = "calibrate r246"></div>
        <div class = "calibrate r252"></div>
        <div class = "calibrate r258"></div>
        <div class = "calibrate r264"></div>
        <div class = "calibrate r270 indicators"></div>
        <div class = "calibrate r276"></div>
        <div class = "calibrate r282"></div>
        <div class = "calibrate r288"></div>
        <div class = "calibrate r294"></div>
        <div class = "calibrate r300 indicators"></div>
        <div class = "calibrate r306"></div>
        <div class = "calibrate r312"></div>
        <div class = "calibrate r318"></div>
        <div class = "calibrate r324"></div>
        <div class = "calibrate r330 indicators"></div>
        <div class = "calibrate r336"></div>
        <div class = "calibrate r342"></div>
        <div class = "calibrate r348"></div>
        <div class = "calibrate r354"></div>


    </div>
</div>

Каждый раз, когда код запускается, он начинается с 00:00 часов. Моя цель - заставить часы показывать правильное время при каждом запуске кода.

Вот ссылка на часы codepen.io/Possible_bj/pen/WJMWwm

— Possible 10.05.2018 01:51

Добро пожаловать в Stack Overflow. Пожалуйста, укажите весь код, относящийся к вопросу в самом вопросе. Не заставляйте нас уходить с сайта в поисках важной информации по вашему вопросу. Codepen может выйти из строя, находится на обслуживании и т. д. Пожалуйста, возьмите тур и прочтите центр помощи, чтобы помочь вам улучшить свои вопросы.

— Jon P 10.05.2018 02:42

Отредактируйте, чтобы поставить под вопрос код часов. Закомментированы неиспользуемые преобразования CSS вместо неправильного написания имени свойства как «преобразование». Вы можете отредактировать или вернуться, если хотите ..

— traktor 10.05.2018 02:52

хорошо, принято.

— Possible 10.05.2018 04:29
javascript css css-animations
10.05.2018 01:50
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
4
274
3

Ответы 3

вы можете получить массив часов следующим образом:

const now = new Date();

const time = now.toLocaleTimeString().split(" ")[0].split(":");

И трансформируем стрелки часов так:

document.querySelector(".hourHand").style.transform = `rotate(${(360 / 12) * time[0]}deg)`;

document.querySelector(".minHand").style.transform = `rotate(${(360 / 60) * time[1]}deg)`;

document.querySelector(".secHand").style.transform = `rotate(${(360 / 60) * time[2]}deg)`;

Тогда я бы подумал, что вам нужно применить анимацию через JavaScript или что-то в этом роде. Взгляните сюда:

Как динамически создавать CSS-анимацию @ -Keyframe?

Вот последняя ссылка из принятого ответа предыдущего поста, похоже, это сработает, чтобы установить начальную позицию и анимацию:

https://github.com/Keyframes/jQuery.Keyframes

Принято к сведению. Но я не понимаю, как я мог переделать руки, чтобы они соответствовали.

— Possible 10.05.2018 02:04

Что-то вроде этой функции setTime () {var now = new Date (); var currentTime = новый массив (); currentTime [0] = now.getHours (); currentTime [1] = now.getMinutes (); currentTime [2] = now.getSeconds (); var setTime = currentTime.join (":"); time.innerHTML = setTime; } setInterval ("setTime ()", 1000);

— Possible 10.05.2018 02:12

@Possible Итак, вы хотите, чтобы текстовый вывод времени, например 00:21:34, появлялся на экране по мере движения часов, начиная с 00:00:00?

— Jonathan Rys 10.05.2018 03:25

Не совсем то, что я хочу сделать, так это сделать так, чтобы вращение рук соответствовало настоящему времени. @ Ответ Эрика выполняет свою работу легко, но переход немного неаккуратен.

— Possible 10.05.2018 04:10

@ Возможное право, поэтому приведенный мной пример настроит это для вас, если вы удалите анимацию. Тогда проблема в том, как его оживить, что должно быть объяснено по ссылке. Код в вашем комментарии обновляет время, например, 00:12:34, поэтому я думаю, что я запутался. Это помогло вам решить проблему?

— Jonathan Rys 10.05.2018 04:16

Да, пример был бы. Код в моем комментарии отображал это время, потому что это было ваше текущее время

— Possible 10.05.2018 04:35
10.05.2018 01:54

Вам нужно будет сделать анимацию в коде JavaScript. Я также использовал jQuery. Это начало:

$('.minHand').css('animation','none');
$('.hourHand').css('animation','none'); 
$('.secHand').css('animation','none');

setInterval(function(){ 
  var d = new Date(); // for now
$('.hourHand').css('transform', 'rotate(' + d.getHours() * (360 /12) +'deg)');
$('.minHand').css('transform', 'rotate(' + (d.getMinutes()/60)*360 + 'deg)');
$('.secHand').css('transform', 'rotate(' + (d.getSeconds()/60)*360 + 'deg)');
},1000);

Насколько я могу судить, он не использует jQuery.

— Jonathan Rys 10.05.2018 03:19

Я понимаю приведенный выше код. Он выполняет свою работу, но когда я добавляю к нему переход, он достигает 59 и совершает движение против часовой стрелки до 0.

— Possible 10.05.2018 03:44
10.05.2018 03:03

Установка часов в правилах таблицы стилей CSS

Отредактировано, чтобы разрешить установку часов CSS из Javascript любое количество раз - исходная версия инициализировала часы один раз.

Первым шагом в этой версии является присвоение HTMLStyleELement значения идентификатора, например clockCSS, для облегчения доступа к таблице стилей. В качестве альтернативы присвойте значение id элементу LINK с помощью rel = stylesheet, если используется внешняя таблица стилей.

Затем замените правило ключевых кадров "по часовой стрелке" на отдельные правила "secFrames", "minFrames" и "hourFrames" для секунд, минут и часов соответственно. Включите новые правила ключевых кадров в таблицу стилей. Все они могут по умолчанию вращаться от 0 до 360 градусов.

Изменения CSS должны выглядеть примерно так:

.hourHand {
    height : 48%;
    background : transparent ;
    border-right : 3px solid transparent;
    animation : hourFrames 43200s linear infinite;
    z-index : 5 ;
}
.minHand {
    height : 48%;
    border-right : 2px solid transparent;
    animation : minFrames 3600s linear infinite;
    z-index : 4 ;
}
.secHand {
    height : 48%;
    animation : secFrames 60s linear infinite ;
    z-index : 6 ;
}
@keyframes hourFrames {
    0%   { transform : rotateZ(0deg);}
    100% { transform : rotateZ(360deg);}
}
@keyframes minFrames {
    0%   { transform : rotateZ(0deg);}
    100% { transform : rotateZ(360deg);}
}
@keyframes secFrames {
    0%   { transform : rotateZ(0deg);}
    100% { transform : rotateZ(360deg);}
}

Теперь значения преобразования в правилах ключевых кадров можно установить в JavaScript:

// helper function to find a style sheet from its id value

function findSheetById( id) {  // LINK rel=stylesheet or STYLE element id.
     for( var i = 0; i < document.styleSheets.length; ++i) {
         var sheet = document.styleSheets[i];
         if ( sheet.ownerNode.id == id) {
             return sheet;
         }
     }
}

// helper function to find a keyframes rule (rule type 7) by name

function findKeyFramesRule( ruleList, name) {
    for( var i = 0; i < ruleList.length; ++i) {
        var rule = ruleList[i];
        if ( rule.type == 7 && rule.name == name)
             return rule;
    }
}

// clock setting code based on the stylesheet.

const clockSheetId = "clockCSS";

function setClockTransform( keyframesName, startDeg) {
    let clockSheet = findSheetById(clockSheetId);
    let atRule = findKeyFramesRule( clockSheet.cssRules, keyframesName);
    let stops = atRule.cssRules;
    stops[0].style.transform = "rotateZ(" + startDeg + "deg)";
    stops[1].style.transform = "rotateZ(" + (startDeg+360) + "deg)";
}

function setClock( hour, min, sec, msec) {
    // convert parameters to degrees
    msec = msec || 0;
    sec += msec/1000;
    min += sec / 60;
    hour = hour + min/60;
    sec = sec%60 * 6;
    min = min%60 * 6;
    hour = hour%12 * 30;
    setClockTransform( 'secFrames', sec);
    setClockTransform( 'minFrames', min);
    setClockTransform( 'hourFrames', hour);
}

// and test:

var now = new Date();
setClock( now.getHours(), now.getMinutes(), now.getSeconds())

Обратите внимание, что это упрощенно, поскольку он основан на известной структуре таблицы стилей. Он проверяется в последних версиях FireFox и Chrome. Однако, хотя IE11 установил часы и запустил их, другие проблемы CSS испортили представление.

Тестовый код

"use strict";

// helper function to find a style sheet from its id value

function findSheetById( id) {  // LINK rel=stylesheet or STYLE element id.
     for( var i = 0; i < document.styleSheets.length; ++i) {
         var sheet = document.styleSheets[i];
         if ( sheet.ownerNode.id == id) {
             return sheet;
         }
     }
}

// helper function to find a keyframes rule (rule type 7) by name

function findKeyFramesRule( ruleList, name) {
    for( var i = 0; i < ruleList.length; ++i) {
        var rule = ruleList[i];
        if ( rule.type == 7 && rule.name == name)
             return rule;
    }
}

// clock setting code

const clockSheetId = "clockCSS";

function setClockTransform( keyframesName, startDeg) {
    let clockSheet = findSheetById(clockSheetId);
    let atRule = findKeyFramesRule( clockSheet.cssRules, keyframesName);
    let stops = atRule.cssRules;
    stops[0].style.transform = "rotateZ(" + startDeg + "deg)";
    stops[1].style.transform = "rotateZ(" + (startDeg+360) + "deg)";
}

function setClock( hour, min, sec, msec) {
    // convert parameters to degrees
    msec = msec || 0;
    sec += msec/1000;
    min += sec / 60;
    hour = hour + min/60;
    sec = sec%60 * 6;
    min = min%60 * 6;
    hour = hour%12 * 30;
    setClockTransform( 'secFrames', sec);
    setClockTransform( 'minFrames', min);
    setClockTransform( 'hourFrames', hour);
}

var now = new Date();
setClock( now.getHours(), now.getMinutes(), now.getSeconds())
<style type = "text/css" id = "clockCSS">
.frame {
    position : absolute;
    top : 0;
    bottom : 0;
    right : 0;
    left : 0;
    margin : auto;
    width : 100%;
    height : 100%;
    border-radius : 50%;
    border : 5px groove #000;
    border-color : ;
    /* transform : rotateZ(45deg); */
    box-shadow : inset 0 0 10px 2px #000;
}
.secHand, .minHand, .hourHand {
    background :  ;
    position : absolute ;
    top :  2%;
    bottom : ;
    width : 0;
    right : 0;
    left : 0;
    margin : auto;
    transform-origin : 100% 100%;
    /* transform : rotate(-45deg); */
    border-right : 1px solid #000;
}
.hourCut, .miniCut {
    position : absolute ;
    width : 100% ;
    bottom : 0;
}
.hourCut {
    height : 50% ;
    border-right : 3px solid #000;
}
.miniCut {
    height : 70% ;
    border-right : 2px solid #00f;
}
.hourHand {
    height : 48%;
    background : transparent ;
    border-right : 3px solid transparent;
    animation : hourFrames 43200s linear infinite;
    z-index : 5 ;
}
.minHand {
    height : 48%;
    border-right : 2px solid transparent;
    animation : minFrames 3600s linear infinite;
    z-index : 4 ;
}
.secHand {
    height : 48%;
    animation : secFrames 60s linear infinite ;
    z-index : 6 ;
}
@keyframes hourFrames {
    0%   { transform : rotateZ(0deg);}
    100% { transform : rotateZ(360deg);}
}
@keyframes minFrames {
    0%   { transform : rotateZ(0deg);}
    100% { transform : rotateZ(360deg);}
}
@keyframes secFrames {
    0%   { transform : rotateZ(0deg);}
    100% { transform : rotateZ(360deg);}
}

.containerX {
    position : absolute;
    top : 0 ;
    bottom : 0 ;
    left : 0;
    right : 0;
    margin : auto;
    height : 300px;
    width : 300px;
}
.innerFrame, .smallFrame {
    position : absolute ;
    top : 0 ;
    bottom : 0 ;
    right : 0 ;
    left : 0 ;
    margin : auto ;
    border : 1px solid transparent;
    border-radius : 50% ;
    background : #fff;
    display : ; 
}
.innerFrame {
    height : 90% ;
    width : 90% ;
    box-shadow : 0 0 10px 2px #000;
    z-index : 1 ;
}
.smallFrame {
    height : 80% ;
    width : 80% ;
    z-index : 3 ;
}
.calibrate {
    position : absolute ;
    top : 0 ;
    bottom : ;
    right : 0 ;
    left : 0 ;
    margin : auto ;
    height : 50% ;
    width : 0 ;
    transform-origin : 100% 100% ;
    border-right : 1px solid #fff;
}
.indicators {
    border-right : 1px solid #00f;
    box-shadow : 0 0 5px 0px #000;
    z-index : 2  ;
}
.knob {
    position : absolute ;
    top : 0 ;
    bottom : 0 ;
    right : 0 ;
    left : 0 ;
    margin : auto ;
    height : 1.5% ;
    width : 1.5% ;
    border-radius : 50% ;
    border : 3px solid #000;
    background : #fff ;
    z-index : 7 ;
}
.r0 {    transform : rotateZ(0deg)}
.r6 {    transform : rotateZ(6deg)}
.r12 {    transform : rotateZ(12deg)}
.r18 {    transform : rotateZ(18deg)}
.r24 {    transform : rotateZ(24deg)}
.r30 {    transform : rotateZ(30deg)}
.r36 {    transform : rotateZ(36deg)}
.r42 {    transform : rotateZ(42deg)}
.r48 {    transform : rotateZ(48deg)}
.r54 {    transform : rotateZ(54deg)}
.r60 {    transform : rotateZ(60deg)}
.r66 {    transform : rotateZ(66deg)}
.r72 {    transform : rotateZ(72deg)}
.r78 {    transform : rotateZ(78deg)}
.r84 {    transform : rotateZ(84deg)}
.r90 {    transform : rotateZ(90deg)}
.r96 {    transform : rotateZ(96deg)}
.r102 {    transform : rotateZ(102deg)}
.r108 {    transform : rotateZ(108deg)}
.r114 {    transform : rotateZ(114deg)}
.r120 {    transform : rotateZ(120deg)}
.r126 {    transform : rotateZ(126deg)}
.r132 {    transform : rotateZ(132deg)}
.r138 {    transform : rotateZ(138deg)}
.r144 {    transform : rotateZ(144deg)}
.r150 {    transform : rotateZ(150deg)}
.r156 {    transform : rotateZ(156deg)}
.r162 {    transform : rotateZ(162deg)}
.r168 {    transform : rotateZ(168deg)}
.r174 {    transform : rotateZ(174deg)}
.r180 {    transform : rotateZ(180deg)}
.r186 {    transform : rotateZ(186deg)}
.r192 {    transform : rotateZ(192deg)}
.r198 {    transform : rotateZ(198deg)}
.r204 {    transform : rotateZ(204deg)}
.r210 {    transform : rotateZ(210deg)}
.r216 {    transform : rotateZ(216deg)}
.r222 {    transform : rotateZ(222deg)}
.r228 {    transform : rotateZ(228deg)}
.r234 {    transform : rotateZ(234deg)}
.r240 {    transform : rotateZ(240deg)}
.r246 {    transform : rotateZ(246deg)}
.r252 {    transform : rotateZ(252deg)}
.r258 {    transform : rotateZ(258deg)}
.r264 {    transform : rotateZ(264deg)}
.r270 {    transform : rotateZ(270deg)}
.r276 {    transform : rotateZ(276deg)}
.r282 {    transform : rotateZ(282deg)}
.r288 {    transform : rotateZ(288deg)}
.r294 {    transform : rotateZ(294deg)}
.r300 {    transform : rotateZ(300deg)}
.r306 {    transform : rotateZ(306deg)}
.r312 {    transform : rotateZ(312deg)}
.r318 {    transform : rotateZ(318deg)}
.r324 {    transform : rotateZ(324deg)}
.r330 {    transform : rotateZ(330deg)}
.r336 {    transform : rotateZ(336deg)}
.r342 {    transform : rotateZ(342deg)}
.r348 {    transform : rotateZ(348deg)}
.r354 {    transform : rotateZ(354deg)}
.r358 {    transform : rotateZ(360deg)}
</style>


<div class = "containerX">
        <div class = "frame">
        <div class = "secHand"></div>
        
        <div class = "minHand">
            <div class = "miniCut"></div>
            </div>
            
        <div class = "hourHand">
            <div class = "hourCut"></div>
            </div>
            
<div class = "innerFrame"></div> 
<div class = "smallFrame"></div>          
<div class = "knob"></div>
        <div class = "calibrate r0 indicators"></div>
        <div class = "calibrate r6"></div>
        <div class = "calibrate r12"></div>
        <div class = "calibrate r18"></div>
        <div class = "calibrate r24"></div>
        <div class = "calibrate r30 indicators"></div>
        <div class = "calibrate r36"></div>
        <div class = "calibrate r42"></div>
        <div class = "calibrate r48"></div>
        <div class = "calibrate r54"></div>
        <div class = "calibrate r60 indicators"></div>
        <div class = "calibrate r66"></div>
        <div class = "calibrate r72"></div>
        <div class = "calibrate r78"></div>
        <div class = "calibrate r84"></div>
        <div class = "calibrate r90 indicators"></div>
        <div class = "calibrate r96"></div>
        <div class = "calibrate r102"></div>
        <div class = "calibrate r108"></div>
        <div class = "calibrate r114"></div>
        <div class = "calibrate r120 indicators"></div>
        <div class = "calibrate r126"></div>
        <div class = "calibrate r132"></div>
        <div class = "calibrate r138"></div>
        <div class = "calibrate r144"></div>
        <div class = "calibrate r150 indicators"></div>
        <div class = "calibrate r156"></div>
        <div class = "calibrate r162"></div>
        <div class = "calibrate r168"></div>
        <div class = "calibrate r174"></div>
        <div class = "calibrate r180 indicators"></div>
        <div class = "calibrate r186"></div>
        <div class = "calibrate r192"></div>
        <div class = "calibrate r198"></div>
        <div class = "calibrate r204"></div>
        <div class = "calibrate r210 indicators"></div>
        <div class = "calibrate r216"></div>
        <div class = "calibrate r222"></div>
        <div class = "calibrate r228"></div>
        <div class = "calibrate r234"></div>
        <div class = "calibrate r240 indicators"></div>
        <div class = "calibrate r246"></div>
        <div class = "calibrate r252"></div>
        <div class = "calibrate r258"></div>
        <div class = "calibrate r264"></div>
        <div class = "calibrate r270 indicators"></div>
        <div class = "calibrate r276"></div>
        <div class = "calibrate r282"></div>
        <div class = "calibrate r288"></div>
        <div class = "calibrate r294"></div>
        <div class = "calibrate r300 indicators"></div>
        <div class = "calibrate r306"></div>
        <div class = "calibrate r312"></div>
        <div class = "calibrate r318"></div>
        <div class = "calibrate r324"></div>
        <div class = "calibrate r330 indicators"></div>
        <div class = "calibrate r336"></div>
        <div class = "calibrate r342"></div>
        <div class = "calibrate r348"></div>
        <div class = "calibrate r354"></div>


    </div>
</div>

Как это работает

Это решение обновляет правила таблицы стилей для значений анимации ключевых кадров. Он не исследует размещение элемента стрелки часов в отдельных контейнерах, которые сами вращаются.

Использование таблиц стилей.

  • Теги стиля в HTML создают HTMLStyleElement в DOM. Содержимое элемента предоставляет источник CSS текст.

  • Теги ссылок с атрибутом 'rel = "stylesheet" создают HTMLinkElement в DOM. Источник элемента предоставляет источник CSS текст.

  • Исходный текст CSS, предоставленный элементом STYLE или LINK, анализируется для создания объекта CSSStyleSheet. Каждая сгенерированная таблица стилей объект добавляется в массив document.styleSheets.

  • Каждый объект таблицы стилей имеет свойство ownerNode, которое ссылается на HTMLElement DOM, использованный для его создания.

  • Каждый объект таблицы стилей содержит подобный массиву список объектов правил в своем свойстве cssRules.

  • Тип каждого объекта правила содержится в его тип собственности. Значение type для at-правила @keyframes равно 7.

  • Сами правила @keyframes имеют свойство CSSRules, содержащее список объектов правил keyFrame.

  • Правила keyFrame имеют свойства keyText (не используется) и style. Значение объекта стиля доступно только для чтения, но не заморожено - его свойства можно обновлять.

Упрощения.

Метод findSheetById использует значение id элемента HTML, который сгенерировал объект таблицы стилей, чтобы найти объект в массиве document.styleSheets. Таблицу стилей можно найти, начиная с узла-владельца, но в документации отсутствуют подробности. Другой альтернативой является обращение к таблице стилей путем жесткого кодирования ее индекса document.styleSheets в программе.

Правила @keyframes для часов, минут и секунд ищутся среди правил таблиц стилей верхнего уровня. Вложение их в правила @media внесет дополнительные сложности.

Предполагается, что правила keyFrame встречаются парами и индексируются индексами 0 и 1. Их значения keyText («0%» и «100%») не проверяются.

Функция setClock по умолчанию устанавливает аргумент миллисекунды равным нулю, если он не указан (как в примере). На самом деле я бы предложил указать значение времени в миллисекундах для повышения точности часов.

Онлайн-эксперименты.

Для онлайн-тестирования вы можете попробовать вернуть document.styleSheets[0] из findSheetById или поместить элемент стиля с идентификатором в поле HTML онлайн-инструмента.

это было очень полезно, и я мог просто скопировать и вставить код и продолжать двигаться, но мне действительно нужно подробно разбираться в функциях, значении этих свойств и том, как они работают. А для получения времени на этот раз у вас не было мсек, и почему вы установили его на 0? cos очевидно || заставит его пойти на 0.

— Possible 13.05.2018 01:41

поиск градусов также изменился с деления секунд и минут на 60 на умножение на 360 и деления часа на 12 для умножения на 360 до получения остатков секунд и минут на 60 для умножения на 6 и напоминания о часе на 12 для умножения к 30. Я понял первый метод, но не понимаю этот новый.

— Possible 13.05.2018 03:27

Теперь возникла какая-то путаница, я редактирую это в коде, и кажется, что добавить идентификатор в css невозможно.

— Possible 13.05.2018 03:27

Похоже, что это ограничение как пера кода, так и фрагментов кода SO для простоты. Обходной путь, который я использовал, заключался в том, чтобы поместить CSS между тегами стиля в начале содержимого HTML, а не в разделе CSS. Если вы откроете тестовый код, вы увидите, что теги CSS находятся в начале поля HTML, а не в отдельном контейнере CSS. Если все остальное не помогло, вы можете протестировать с использованием локального HTML-файла :)

— traktor 13.05.2018 03:54

Я использовал отмену во второй раз: /60 * 360 - это то же самое, что умножение на 6, а /12 * 360 - это умножение на 30. Я не упоминал об этом, но согласен, что неотмененные операции - это яснее. Попробую сегодня добавить «как это работает» - было интересно узнать.

— traktor 13.05.2018 04:09

См. Обновленный ответ для ответа на предыдущие комментарии.

— traktor 13.05.2018 10:42

это здорово, я не тороплюсь, чтобы пройти через это.

— Possible 15.05.2018 01:16
10.05.2018 06:11

Другие вопросы по теме

Измените название метки флажка, если он открыт
Window.scrollTo () плавный переход, не запускаемый событием onclick
Коробочная модель для встроенных элементов
Настройка переключателя CSS3
Как сделать мой текущий код адаптивным?
Отображение стиля Javascript не работает должным образом
Как выбрать элемент с помощью CSS, когда некоторые элементы вложены раньше
Можно ли делать тени без перекрытия?
IE 11 правильно стилизует некоторые посещенные гиперссылки, но не стилизует другие на той же странице
Почему эта анимация преобразования css не работает?

Похожие вопросы

Измените название метки флажка, если он открыт
Перейти на страницу в файле .pdf, не открывая новую вкладку
Повторная инициализация переменной Int в сценарии содержимого (расширение Chrome)
Внесение изменений в .then () в обещание
Функция Window.onload вызывается при загрузке страницы, а также каждый раз, когда я закрываю оверлей
Window.scrollTo () плавный переход, не запускаемый событием onclick
React - Распространение MapStateToProps с теми же реквизитами
Стренировать возвращаемый объект Object?
Как сделать мой текущий код адаптивным?
Написание функции с параметром, который можно использовать как свойство объекта