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_time
    date_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;
}

效果