Используйте CSS+Native JS, чтобы сделать простые часы. Эффект выглядит следующим образом
Для достижения этого эффекта он разделен на три основные части: HTML, JavaScript и CSS
HTML Part
Часть HTML относительно проста, определяя часовой див, который имеет происхождение, час, минуту, подержанную руку, дату и время. Что касается масштабов, чисел и других элементов на часах, поскольку количество относительно большое, он генерируется с использованием JVAScript с использованием JVAScript.
<! Doctype html> <html> <head> <meta charset = "utf-8"> <link rel = 'styleSheet' href = 'Внешний путь файла CSS'/> <Title> </title> </head> <body> <div Id = "Часы"> <! id="hour-line"></div> <div id="minute-line"></div> <div id="second-line"></div> <!-- Date--> <div id="date-info"></div> <!-- Time--> <div > <div id="hour-time"></div> <div id="minute-time"></div> <div id="second-time"></div> </div> </div> </div> <script type = 'text/javascript' src = 'внешний путь файла Javascript'> </script> </body> </html>
CSS часть
Перед началом кода существуют некоторые свойства CSS, которые необходимо понимать, такие как позиционирование, граница радий, преобразование и т. Д.
Атрибуты позиции
Атрибут позиции указывает тип позиционирования элемента с пятью значениями: абсолютный, фиксированный, относительный, статический, наследственный. По умолчанию статическое, то есть позиционирование нет, и элементы отображаются в соответствии с обычным потоком документов; Основные использование здесь абсолютные и относительные
Значение АБСУСКАЯ, установите элемент в абсолютное позиционирование и позиционируйте его относительно первого верхнего элемента, который неожиданно позиционировал статически. Положение может быть расположено через «левый», «вверху», «справа», «внизу» атрибуты; Если верхний элемент имеет статически позиционирован, он будет расположен относительно положения элемента тела.
В этом примере установите самые внешние часы Div на относительные, и все нижние элементы устанавливаются на абсолютное абсолютное позиционирование, а затем определите его положение относительно часов, устанавливая значения атрибутов, такие как левый и верх.
Пограничный атрибут
Атрибут границы-радиуса добавляет округлую границу к элементу. Вы можете установить размер четырех округлых углов. В этом примере используйте этот атрибут, чтобы установить элемент часов на круг
Вот пример: 4 элементы Div, вся ширина и высота составляют 100 пикселей, а последствия границы радиус разные:
преобразование атрибут
Свойство Transform применяет 2D или 3D -вращение к элементу, которое позволяет нам вращаться, масштабировать, перемещать или наклонять элемент. В этом примере час, минута, второй, масштаб и т. Д. Все вращаются с использованием атрибута преобразования; Кроме того, атрибут преобразования-оригин может установить базовую точку позиции элемента.
Код для части CSS
/*Global*/*{Margin: 0; Надо: 0;}. Clock {ширина: 400px; Высота: 400px; Граница: 10px твердое вещество #333; Box-Shadow: 0px 0px 20px 3px #444 вставка; граница-радий: 210px; позиция: относительно; Маржа: 5px Auto; z-index: 10; Фоно-цвета:#f6f6f6;}/* Номер часов*/. Clock-num {width: 40px; Высота: 40px; размер шрифта: 22px; Текст-альбом: Центр; высота линии: 40px; позиция: абсолютно; z-index: 8; Цвет:#555; font-family: fantasy, 'trebuchet ms';}. em_num {font-size: 28px;}/* pointer*/. Clock-line {position: Absolute; z-index: 20;}. Часовая линия {ширина: 100px; Высота: 4PX; Верх: 198px; Слева: 200px; фоновый цвет:#000; граница радий: 2PX; преобразование-аоригин: 0 50%; Box-Shadow: 1px -3px 8px 3px #AAA;}. Минута {ширина: 130px; Высота: 2px; Верх: 199px; Слева: 190px; фоновый цвет:#000; преобразование-аоригин: 7,692% 50%; Box-Shadow: 1px -3px 8px 1px #AAA;}. Вторая линия {ширина: 170px; Высота: 1px; Вверху: 199,5px; Слева: 180px; фоновый цвет:#F60; преобразование-происхождение: 11,765% 50%; Box -Shadow: 1px -3px 7px 1px #bbb;}/* Origin*/. Origin {width: 20px; Высота: 20px; граница радий: 10px; фоновый цвет:#000; позиция: абсолютно; Верх: 190px; Слева: 190px; z-index: 14;}/* Дата-время*/. Date-Info {ширина: 160px; Высота: 28px; высота линии: 28px; Текст-альбом: Центр; позиция: абсолютно; Верх: 230px; Слева: 120px; Z-Index: 11; Цвет:#555; шрифт-вес: жирный шрифт; Фамилия Font: 'Microsoft yahei';}. Time-info {ширина: 92px; Высота: 30px; высота линии: 30px; Текст-альбом: Центр; позиция: абсолютно; Верх: 270px; Слева: 154px; Z-Index: 11; фоновый цвет:#555; Заполнение: 0; Box-Shadow: 0px 0px 9px 2px #222 inset;}. Time {width: 30px; Высота: 30px; Текст-альбом: Центр; Плавание: осталось; Цвет: #fff; Font-Weight: BOLD;} #минутная времени {граница-лето: 1PX SOLIT #FFFF; граница правая: 1px solid #ffff;}/* Scale*/. Clock Scale {ширина: 195px; Высота: 2px; преобразование-аоригин: 0% 50%; z-index: 7; позиция: абсолютно; Верх: 199px; Слева: 200px;}. Scale-Show {ширина: 12px; Высота: 2px; фоновый цвет:#555; Float: Left;}. Scale-Hided {ширина: 183px; Высота: 2px; float: слева;}JavaScript Part
О части JS нечего сказать. Для простых операций DOM функция SetInterval выполняется каждую секунду, а угол указателя и время отображения просто изменяется. Код выглядит следующим образом
(function () {window.onload = initnumxy (200, 160, 40,40); var hour_line = document.getElementByid ("Hour-Line"); var minment_line = document.getElementByID ("Minute-Line"); var Second_line = document.getElementByID ("second-line"); var date_info = document.geteLementByd ("second-line"); «Воскресенье», «Понедельник», «Вт», «Тю», «Пятница», «Воскресенье», «Воскресенье», «Тю», «Пятница», «Воскресенье», «Воскресенье», «Воскресенье», «Воскресенье», «Воскресенье», «Воскресенье», «Воскресенье», «Воскресенье», «Воскресенье», воскресенье », воскресенье ', воскресенье', воскресенье ',« воскресенье »,« Воскресенье «Воскресенье», «Воскресенье», «Воскресенье», «Воскресенье», «Воскресенье», «Воскресенье», «Воскресенье», «Воскресенье», «Воскресенье», «Воскресенье», «Воскресенье», «Воскресенье», «Воскресенье», «Воскресенье», «Воскресенье», «Воскресенье», «Воскресенье», «Воскресенье», «Воскресное воскресенье», воскресенье », воскресенье», «Воскресенье» Document.GetElementById ("Час"); this_day.getminutes (); + 1); second_line.style.transform = 'utate (' + (Second*6-90) + 'Deg)'; this_day.gethours (); } setInterval (settime, 1000); }, { "left" : R + r - 0.5 * w, "top" : R - 0.5 * h }, { "left" : R + r - 0.5 * w, "top" : R - 0.5 * h }, { "left" : R + 0.5 * r * 1.73205 - 0.5 * w, "top" : R + 0.5 * r - 0.5 * h }, { "left" : R + 0.5 * r - 0.5 * w, "top": r + 0,5 * r * 1,732 - 0,5 * H}, {"слева": r - 0,5 * w, "top": r + 0,5 * r * 1,732 - 0,5 * h}, {"слева": r - 0,5 * r - 0,5 * w, "top": r + 0,5 * r * 7,732 - 0,5 * h}, {r. w, "top": r + 0,5 * r * 1,732 - 0,5 * h}, {"слева": r - 0,5 * r * 1,73205 - 0,5 * w, "top": r + 0,5 * r - 0,5 * h}, {"слева": r - 0,5 * r - 0,5 * h}, {"слева": r 0,5 * r * 1,7320 - 0,5 - 0,5 - 0,5 - 0,5 - 0,5 - 0,5 - 0,5 - 0,5 - 0,5 - 0,5 - 0,5 *. 0,5 * r - 0,5 * H}, {"слева": r - 0,5 * r - 0,5 * H}, {"слева": r - 0,5 * r - 0,5 * w, "top": r - 0,5 * r * 1,73205 - 0,5 * h}, {"слева": r - 0,5 * r - 0,5 * w, "top": r - r - 0,5 * r. «слева»: r - 0,5 * r - 0,5 * H}, {"слева": r - 0,5 * r - 0,5 * w, "top": r - 0,5 * r * 1,73205 - 0,5 * H}, {"слева": r - 0,5 * W, «Top»: R - R - 0,5 * H}]; i ++) {if (i%3 == 0) {clock.innerhtml += "<div class = 'num em_num'>" +i +"</div>"; for (var i = 0; i <clock_num.length; i ++) {clock_num [i] .style.left = numxy [i] .left+'px'; class = 'clock scale'> " +" <div class = 'scale-hidden'> </div> " +" <div class = 'scale-show'> </div> " +" </div> ";} var scale = document.getelementsbyclassname (" Sclock Scale "); для (var i = 0; i <scale.length; i ++) {Scale-Scale"); - 90) + "deg)";}}}) ();Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.