19.主题时钟

主题时钟

html部分

<div class="btn">黑色</div><div class="clock-container"><div class="time">21</div><div class="date">21</div><div class="clock"><div class="line hour"></div><div class="line minute"></div><div class="line second"></div><div class="point"></div></div>
</div>

css部分

*{margin: 0;padding: 0;
}:root{--primary-color:#000;--secondary-color:#fff
}html{transition: all .5s;
}
html.dark{--primary-color:#fff;--secondary-color:#333;background-color: #111;color: var(--primary-color);
}body{display: flex;align-items: center;justify-content: center;height: 100vh;overflow: hidden;
}.btn{cursor: pointer;background-color: var(--primary-color);color: var(--secondary-color);border-radius: 4px;padding: 8px 12px;position: absolute;top: 100px;
}.clock-container{display: flex;flex-direction: column;justify-content: space-between;align-items: center;
}
.clock{position: relative;width: 200px;height: 200px;}
.line{background-color: var(--primary-color);position: absolute;top: 50%;left: 50%;height: 85px;transform: translate(-50%,-50%);width: 3px;transform-origin: bottom center;transition: all .5s;}.time{font-size: 24px;margin: 10px 0;
}.minute{transform: rotate(60deg);
}
.second{transform:rotate(220deg);background-color: brown;
}
.point{position: absolute;top: 92%;left: 51%;transform: translate(-50%,-50%);width: 10px;height: 10px;border-radius: 50%;background-color: var(--secondary-color);border: 2px solid brown;
}

js部分

// 获取dom
const btn=document.querySelector('.btn');
const html=document.querySelector('html');
const time_box=document.querySelector('.time');
const date_box=document.querySelector('.date');
const hour_box=document.querySelector('.hour');
const min_box=document.querySelector('.minute');
const sec_box=document.querySelector('.second');// 定义周数组
const weeks=['星期日','星期一','星期俩','星期三','星期四','星期俩','星期六'];// 主题按钮
btn.addEventListener("click",()=>{html.classList.toggle('dark');btn.innerHTML=='黑色'?btn.innerHTML='白色':btn.innerHTML='黒色';})function active_time(){const time=new Date();const months=time.getMonth()+1;const days=time.getDate();const week=time.getDay();const hour=time.getHours()%12;const min=time.getMinutes();const sec=time.getSeconds();// 设置时针，分针，秒针 hour_box.style.transform=`scaleX(0.8) rotate(${scale(hour,0,12,0,360)}deg)`;sec_box.style.transform=`rotate(${scale(sec,0,60,0,360)}deg)`;min_box.style.transform=`rotate(${scale(min,0,60,0,360)}deg)`;// 设置时间，日期const dom_time=`${hour}:${min.toString().padStart(2,'0')} ${new Date().getHours()>12?'PM':'AM'}`const date_time=`${weeks[week]},${months.toString().padStart(2,'0')}月${days.toString().padStart(2,'0')}日`time_box.innerHTML=dom_timedate_box.innerHTML=date_time
}
active_time();setInterval(active_time,10)function scale(num,in_min,in_max,out_min,out_max){return (num-in_min)*(out_max-out_min)/(in_max-in_min)+out_min;
}

效果