Во время процесса генерации часов я подумал о следующих способах написания циферблата:
Конечно, это может быть достигнуто с помощью этой шаблона, поэтому нам нужно использовать лучшее понимание, и код имеет относительно простой способ его реализации.
1. Используйте тригонометрические функции
В процессе использования JS для распоряжения циферблата в тригонометрических функциях я столкнулся с этой ситуацией: в масштабе циферблата при расчете конкретных значений с тригонометрическими функциями целое число не может быть получено, и его необходимо скорректировать вверх или вниз, поэтому будут некоторые отклонения, и такие отклонения трудно корректировать со стилями. Даже если окончательный эффект может быть достигнут, отклонения в тонких пробелах и углах повлияют на общий визуальный опыт. Как разработчик программы, такой визуальный опыт трудно признать другие и отказаться.
2. Используйте маскирующий слой
JS использует маскирующий слой, в основном по шкале циферблата. Шкала циферблата имеет длину и короткую, и каждые 5 шкал имеют более длинный масштаб. Таким образом, длина масштаба, которую мы используем маскирующий слой, такая же, и трудно продолжать регулировать другие шкалы, поэтому мы сдаемся.
3. Использование позиционирования и (отношения отца и детья) (рекомендуется)
Я думаю, что лучше всего понять и начать с метода позиционирования и отношений с отцом и детьми. Я поделюсь этим с вами здесь. Вот код реализации:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> </title> <style media = "screen"> * {margin: 0; Заполнение: 0; } #clock {width: 600px; Высота: 600px; Граница: 4px твердое легкое загрязнение; Порность: Авто; позиция: относительно; граница радий: 50%; } #scale {width: 20px; высота: 100%; позиция: абсолютно; Слева: 50%; Мяглевая маржа: -10px; /*фон: green;*/} #point {width: 4px; Высота: 10px; Фон: Lightgray; Порность: Авто; } #number {width: 20px; Высота: 20px; маржинальная версия: 5px; /*Фон: красный;*/ font-size: 20px; Текст-альбом: Центр; высота линии: 20px; } #hour {width: 12px; Высота: 180px; Фон: красный; граница-радий: 6px; преобразование-аоригин: 50% 150px; позиция: абсолютно; Верх: 150px; Слева: 50%; Мяглевая маржа: -6px; } #minute {width: 8px; Высота: 250px; Фон: оранжевый; позиция: абсолютно; граница-радий: 4px; преобразование-аоригин: 50% 200px; Верх: 100px; Слева: 50%; Мяглевая маржа: -4PX; } #second {width: 4px; Высота: 360px; Фон: красный; граница радий: 2PX; позиция: абсолютно; Верх: 0; Слева: 50%; Мяглевая маржа: -2PX; преобразование-аоригин: 50% 300px; Z-Index: 100; } </style> </head> <body> <div id = "clock"> <div id = "hour"> </div> <div id = "minute"> </div> <div id = "second"> </div> </body> <script type = "text/javascript"> var clock = document.getelementbyid ('clock'); var hour = document.getElementbyId ('hour'); var minute = document.getElementbyId ('minute'); var Second = document.getElementById ('Second'); function surface () {var currentdate = new Date (); var часов = currentDate.gethours (); var minots = currentDate.getMinutes (); var seconds = currentDate.getSeconds (); секунды = часы * 3600 + минуты * 60 + секунд; Hour.style.transform = 'utate ('+seconds / 120+'deg)'; minute.style.transform = 'utate ('+секунды * 0,1+'deg)'; second.style.transform = 'utate ('+seconds * 6+'deg)'; } setInterval ('surface ()', 1000); for (var i = 1; i <61; i ++) {var scale = document.createElement ('div'); Scale.id = 'Scale'; scale.style.transform = 'utate ('+i * 6+'deg)'; clock.appendchild (Scale); var point = document.createElement ('div'); point.id = 'point'; Scale.AppendChild (точка); var number = document.createElement ('div'); number.id = 'number'; number.style.transform = 'utate (-'+i * 6+'deg)' if (i % 5 == 0) {number.innerhtml = i / 5; point.style.height = '15px'; } scale.appendchild (номер); } </script> </html>Примечания должны быть оплачены во время калибровки:
1. Ниже приведена диаграмма рендеринга, которая реализована шаг за шагом. Наконец, детали тесно сопоставлены. Никаких других методов не используется для точной настройки его. После завершения макета стиля текущее время можно получить и исправить. В процессе коррекции есть такая проблема. Я надеюсь, что каждый может обратить внимание на: угол вращения часовой руки не может быть рассчитана в единицах часов. Например: 9:58 В это время положение часовой руки составляет 9. Когда 10:00, следующее положение часовой руки прыгает до положения 10. Следовательно, угол часовой руки следует рассчитывать за минуты или секунды, а угол минутной руки следует рассчитывать за минуты или секунды. Вторая рука прыгает на 6 градусов в секунду.
2. Еще одна вещь, которую следует отметить, это то, что центр вращения трех указателей должен быть определен с использованием преобразования-аоригина, чтобы определить точку вращения указателя.
В приведенной выше статье кратко обсуждается поколение часов (рукописный хитрый код JS) - это весь контент, которым я делюсь с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.