Эта статья участвовала в приказе о созыве Haowen, нажмите, чтобы просмотреть:Двойные заявки на внутреннюю и внешнюю стороны, призовой фонд в 20 000 юаней ждет вас, чтобы бросить вызов!
Эффект часов компаса реализован с использованием нативного js
добиться эффекта
Реализовать идеи
- Расставь числа по кругу
- Получить текущее время, повернуть кольцо на определенный угол и перейти в горизонтальное положение
- скрасить текущее время
Идея реализации по-прежнему очень проста, но в процессе будет учитываться множество деталей.
Процесс реализации
Разобрать несколько важных частей
- Создание HTML-фреймворков
Поскольку количество чисел слишком велико, js используется для динамической генерации чисел.
<div class="clock">
<div class=" temp year">
<span></span>
</div>
<div class="temp month"></div>
<div class="temp day"></div>
<div class="temp hour"></div>
<div class="temp minute"></div>
<div class="temp second"></div>
</div>
- js генерирует числа
Эту функцию я использую для генерации чисел даты и времени.Это слишком много для передачи 5 параметров.
первый параметрnum: конечная точка входящего цикла
второй параметрdate: Куда добавить генерируемую метку, то есть кто находится под меткой
третий параметрtarget: входящие единицы, часы, минуты и секунды
четвертый параметрbool: передать ли, указать, заполнять ли нулями
пятый параметрorigin: пройти в начальной точке
Поскольку использование операций dom потребляет производительность, здесь необходимо добавить большое количество узлов dom.Если для генерации узлов используется простой цикл for, структура dom будет изменяться много раз.
Для повышения производительности можно создать фрагмент документа
documentfragment, как временный контейнер, добавленный в родительский узел в последний раз
function create(num,date,target,bool,origin) {
var fragment = document.createDocumentFragment();
for(var i = origin; i < num ; i ++) {
var j = i;
if(bool){
j = j > 9 ? j : '0' + j;
}
var span = document.createElement('span');
span.appendChild(document.createTextNode(j + target));
fragment.appendChild(span);
}
date.appendChild(fragment);
}
- Отобразить циферблат, то есть создать круговой эффект
Расположите все блоки пролетов вместе, позиционируя,transfromXОткройте коробку по радиусу, а затем поверните каждую коробку на угол, чтобы коробки распределились равномерно.
function rot(target,distance) {
var rotBox = target.children;
for(var i = 0 ;i < rotBox.length ; i ++ ){
rotBox[i].style.transform = 'rotate(' + (360 / rotBox.length ) * i + 'deg)' + 'translateX(' + distance + ')' ;
}
}
- Поскольку для загрузки страницы требуется определенное время, код js не будет выполняться немедленно, и страница будет иметь пустую сцену, поэтому добавьте функцию немедленного выполнения, чтобы страница выглядела эффективной сразу после ее загрузки.
код реализации
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: rgb(8, 8, 8);
color: rgb(92, 91, 91);
font-size: 18px;
}
.clock {
position: absolute;
left:50%;
top:50%;
width: 1000px;
height: 1000px;
transform: translate(-50%,-50%);
}
.temp {
position: absolute;
top: 0;
width: 1000px;
height: 1000px;
transition: all .5s;
}
/* 把所有的span定位到一起 */
.temp span{
position: absolute;
left: 50%;
top: 50%;
width: 40px;
height: 20px;
margin-top: -10px;
margin-left: -20px;
}
span {
display: block;
}
/* 现在的时间变色 */
.now {
color: white;
text-shadow: 0 0 10px white;
}
/* 让年份居中显示 */
.year span {
font-size: 24px;
width: 90px;
margin-left: -35px;
margin-top: -15px;
}
</style>
</head>
<body>
<div class="clock">
<div class=" temp year">
<span></span>
</div>
<div class="temp month"></div>
<div class="temp day"></div>
<div class="temp hour"></div>
<div class="temp minute"></div>
<div class="temp second"></div>
</div>
<script>
/* 获取元素 */
/* 因为数量太大所以通过js来创建 */
var year = document.querySelector('.year');
var month = document.querySelector('.month');
var day = document.querySelector('.day');
var hour = document.querySelector('.hour');
var minute = document.querySelector('.minute');
var second = document.querySelector('.second');
var yearSpan = year.querySelector('span');
/* 创建时间 倒数第二个参数判断要不要补零*/
create(13,month,'月',false,1);
create(31,day,'日',false,1);
create(24,hour,'时',true,0);
create(60,minute,'分',true,0);
create(60,second,'秒',true,0);
/* 立即执行一次 */
(timer())
/* 获取当前时间 */
setInterval(timer,1000);
/* 摆成圆形 */
rot(second,'400px');
rot(minute,'320px');
rot(hour,'240px');
rot(day,'160px');
rot(month,'100px');
/* 函数 */
/* 展示表盘函数 */
function rot(target,distance) {
var rotBox = target.children;
for(var i = 0 ;i < rotBox.length ; i ++ ){
rotBox[i].style.transform = 'rotate(' + (360 / rotBox.length ) * i + 'deg)' + 'translateX(' + distance + ')' ;
}
}
/* 创建的元素过多，采用建立文档碎片的方式 */
function create(num,date,target,bool,origin) {
var fragment = document.createDocumentFragment();
for(var i = origin; i < num ; i ++) {
var j = i;
if(bool){
j = j > 9 ? j : '0' + j;
}
var span = document.createElement('span');
span.appendChild(document.createTextNode(j + target));
fragment.appendChild(span);
}
date.appendChild(fragment);
}
/* 获取时间 */
function timer() {
var time = new Date();
var nowYear = time.getFullYear();
var nowMonth = time.getMonth() + 1;
var nowDay = time.getDate();
var nowHour = time.getHours();
var nowMinute = time.getMinutes();
var nowSecond = time.getSeconds();
/* 年份直接填 */
yearSpan.innerHTML = nowYear + '年';
yearSpan.className = 'now';
/* 旋转 */
var rotateH = nowHour * 15 ;
var rotateM = nowMinute * 6;
var rotateS = nowSecond * 6;
var rotateD = (nowDay - 1) * 12;
var rotateMo = (nowMonth - 1 ) * 30;
second.style.transform = 'rotate(' + (- rotateS) + 'deg' + ')';
minute.style.transform = 'rotate(' + (- rotateM) + 'deg' + ')';
hour.style.transform = 'rotate(' + (- rotateH) + 'deg' + ')';
day.style.transform = 'rotate(' + (- rotateD) + 'deg' + ')';
month.style.transform = 'rotate(' + (- rotateMo) + 'deg' + ')';
/* 更改当前时间的样式 */
clearClass(month)
clearClass(day);
clearClass(hour);
clearClass(minute);
clearClass(second);
month.children[nowMonth - 1].className = 'now';
day.children[nowDay - 1].className = 'now';
hour.children[nowHour].className = 'now';
minute.children[nowMinute].className = 'now';
second.children[nowSecond].className = 'now';
}
/* 清除样式的函数 */
function clearClass(target) {
for(var i = 0;i < target.children.length; i++ ) {
target.children[i].className = '';
}
}
</script>
</body>
</html>