时钟

image
在这里插入图片描述

今天看到个在线视频用canvas写时钟，感觉挺有意思，就听了一会，然后就想我能不能用css和js写一个呢？
说干就干~~~~
因为是临时起意做的，只想着要效果，没有注重代码的细节操作，看看就好了

//第一步写个大概样子
<div class="clock">
        <div class="secX"></div>
        <div class="secX-mask1"></div>
        <div class="secX-mask2"></div>
        <div class="secX-mask3"></div>
        <div class="box"></div>
        <div class="mask"></div>
        <div class="hour"></div>
        <div class="min"></div>
        <div class="sec"></div>
        <div class="img"></div>
    </div>
    //下面是样式
    <style>
        div{
            position: absolute;
            border-radius: 50%;
        }
        .clock{
            position: relative;
            margin: 100px 200px;
        }
        .box{
            left: 100px;
            top: 100px;
            background: #787878;
            width: 500px;
            height: 500px;
        }
        .mask{
            left: 150px;
            top: 150px;
            background: #F4F4F4;
            color: black;
            width: 400px;
            height: 400px;
            text-align: center;
            font-size: 40px;
            line-height: 200px;
        }
        .hour{
            height: 100px;
            width: 8px;
            background: #787878;
            left: 340px;
            top: 247px;
            transform-origin: bottom;

        }
        .min{
            height: 120px;
            width: 6px;
            background: #787878;
            left: 340px;
            top: 229px;
            z-index: 2;
            transform-origin: bottom;
        }
        .sec{
            height: 160px;
            width: 4px;
            background: #787878;
            left: 340px;
            top: 189px;
            z-index: 1;
            transform-origin: bottom;
        }
        .img{
            width: 100px;
            height: 100px;
            background: url("./1.png");
            left: 298px;
            top: 440px;
        }
        .secX{
            width: 550px;
            height: 550px;
            left: 75px;
            top: 75px;
            background: black;
        }
        .secX-mask1{
             width: 500px;
             height: 500px;
             border-width: 25px;
             border-style: solid;
             left: 75px;
             top: 75px;
         }
        .secX-mask2{
            width: 500px;
            height: 500px;
            border-width: 25px;
            border-style: solid;
            border-color:  black transparent transparent transparent;
            left: 75px;
            top: 75px;
            transform: rotate(-45deg);
        }
        .secX-mask3{
            width: 500px;
            height: 500px;
            border-width: 25px;
            border-style: solid;
            border-color: transparent transparent transparent transparent;
            left: 75px;
            top: 75px;
        }
    </style>
    //下面是一个有了思路，但是手跟不上脑子系列的js
    <script>
    let mask = document.querySelector(".mask");
    let hour = document.querySelector(".hour");
    let min = document.querySelector(".min");
    let secX_mask1 = document.querySelector(".secX-mask1");
    let secX_mask2 = document.querySelector(".secX-mask2");
    let secX_mask3 = document.querySelector(".secX-mask3");
    let sec = document.querySelector(".sec");
    timer = window.setInterval(()=>{
        mask.innerHTML = new Date().toLocaleTimeString().slice(2);
        let timeH = mask.innerHTML.split(":")[0];
        let timeM = mask.innerHTML.split(":")[1];
        let timeS = mask.innerHTML.split(":")[2];
        console.log(timeH, timeM, timeS);
        hour.style.transform = `rotate(${timeH*30}deg)`;
        min.style.transform = `rotate(${timeM*6}deg)`;
        sec.style.transform = `rotate(${timeS*6}deg)`;
        if(timeS>=0&&timeS<=30){
            secX_mask1.style.transform = `rotate(${timeS*6-45}deg)`;
            secX_mask3.style.transform = `rotate(135deg)`;
            if(timeS>=0&&timeS<=15){
                secX_mask1.style.borderColor = "white transparent transparent transparent ";
            }else{
                secX_mask1.style.borderColor = "white transparent transparent white";
            }
            secX_mask2.style.borderColor = "black transparent transparent transparent";
            secX_mask3.style.borderColor = "transparent transparent transparent transparent";
        }
        if(timeS>30&&timeS<60){
            secX_mask1.style.transform = `rotate(135deg)`;
            secX_mask3.style.transform = `rotate(${timeS*6-45}deg)`;
            secX_mask1.style.borderColor = "white transparent transparent white";
            secX_mask3.style.borderColor = "white transparent transparent white";

        }
    },1000);
</script>