Еще один эффект часов наступает. Эта реализация не требует холста, ее протягивают Div, UL и LI, что весело и реалистично.
Ха -ха ~
JS вам необходимо достичь этого эффекта передвижения, но в JS не так много контента, так что это не сложно.
В основном это идея использования преобразования в CSS. Преобразование имеет много меняющихся атрибутов и обычных часов
Это крутая вещь в моей голове. Так могу ли я повернуть это свойство (вращение), чтобы реализовать его? Его масштаб
Используя вращение и установление точки вращения в центре круга, разве невозможно развернуть центр круга? Нижняя часть часовой руки не
Центр круга в контакте? Тогда было бы нормально установить нижнюю часть часовой руки к точке вращения. Я грубо говорю о своих идеях.
Код:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> transform </title> <style id = "css"> #clock {width: 200px; Высота: 200px; Граница: 2PX SOLID #000; граница радий: 50%; Маржа: 100px Auto 0; позиция: относительно; } #clock ul {width: 200px; Высота: 200px; позиция: относительно; Список стиля: нет; Заполнение: 0; поля: 0; } #clock ul {width: 200px; Высота: 200px; позиция: относительно; Список стиля: нет; Заполнение: 0; поля: 0; } #clock ul {width: 2px; Высота: 10px; Фон: #000; преобразование-аоригин: Центр 100px; позиция: абсолютно; Верх: 0; Слева: 50%; } #clock ul li: nth-of-type (5n+1) {height: 20px; } #hour {height: 40px; Ширина: 4px; Фон: #00fefe; позиция: абсолютно; Верх: 60px; Слева: 99px; преобразование-аоригин: центральное дно; } #min {height: 60px; Ширина: 3PX; Фон: #001afe; позиция: абсолютно; Верх: 40px; Слева: 99px; преобразование-аоригин: центральное дно; Преобразование: вращение (15deg); } #sec {height: 70px; Ширина: 2PX; Фон: #000; позиция: абсолютно; Верх: 30px; Слева: 99px; преобразование-аоригин: центральное дно; } #dot {width: 10px; Высота: 10px; позиция: абсолютно; Слева: 95px; Верх: 95px; Фон: #AAA; граница радий: 50%; } </style> </head> <body> <div id = "clock"> <ul> </ul> <div id = "hour"> </div> <div id = "min"> </div> <div id = "sec"> </div> <div id = "dot"> </div> </div> <script> var ocss = document.getelementbyid ("css"); var oclock = document.getElementbyId ("clock"); var oul = oclock.getelementsbytagname ("ul") [0]; var Ohour = document.getElementById ("час"); var Omin = document.getElementById ("min"); var osec = document.getElementbyId ("sec"); var strli = ""; var strcss = ""; for (var i = 0; i <60; i ++) {strli+= "<li> </li>"; } oul.innerhtml = strli; for (var i = 0; i <60; i ++) {strcss+= '#clock ul li: nth-of type ('+(i+1)+') {transform: rotate ('+i*6+'deg);}'; } ocss.innerhtml+= strcss; время(); SetInterval (время, 1000); function time () {var date = new date (); var h = date.gethours (); var m = date.getminutes (); var s = date.getSeconds (); ohour.style.transform = "utate ("+(H+M/60)*30+"Deg)"; omin.style.transform = "utate ("+(m+s/60)*6+"deg)"; osec.style.transform = "utate ("+s*6+"deg)"; } </script> </body> </html>Самая важная вещь в рисунке с тегами - это позиционирование, потому что таким образом мы можем поместить коробку, которая была сформирована в форму в желаемом положении. Внутренний лист стиля CSS можно получить, получая элементы, чтобы вы могли добавить в него стили, используя innerhtml и добавить их в цикл. Есть также много шкал, поэтому вы можете использовать цикл для добавления, что экономит время и усилия. Что касается оставшегося времени, вы можете выполнять функцию каждые 1 секунду, чтобы она двигалась.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.