用JS实现Windows日历(一)

整体效果图

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

时钟绘制与运转

生成刻度

//html代码
   <div id="wrap">
        <!-- 上面的日期时钟部分 -->
        <div class="date">
            <!-- Clock -->
            <div id="clock">
                <ul class="circle">
                    
                </ul>
                <div class="dot"></div>
                <div class="hour"></div>
                <div class="minute"></div>
                <div class="sec"></div>
            </div>
            <div id="now">
                <p></p>
                <p></p>
            </div>
        </div>
     
    </div>

//css
#wrap{
    margin:120px auto;
    width: 360px;
    height: 520px;
    background: rgba(255, 255, 255, .8);
    box-shadow: 0px 0px 10px #000;
    border-radius: 5px;
}
.date{
    position: relative;
    height: 91px;
}
#clock{
    position: absolute;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: url('./images/clock-bg.jpg') no-repeat;
    background-size: 100% 100%;
    border: 5px solid #c0c0c0;
    box-shadow:0px 0px 5px 1px #000;
    position: relative;
    left: 28px;
    top: -72px;
}
.circle{
    list-style: none;
    margin: 0;
    padding: 0;
}
.degree{
    width: 2px;
    height: 10px;
    background: #000;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    transform-origin: 0 50px;
}
.dot{
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #000;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.hour{
    width: 40px;
    height: 30px;
    background: url('./images/hour.png') no-repeat;
    background-size: 100% 100%;
    left: 44px;
    top: 40px;
    transform:rotate(0deg);
    transform-origin: 10px 15px;
    position: absolute;
}
.minute{
    width: 3px;
    height: 35px;
    background-color: #000;
    left: 50%;
    top: 21px;
    position: absolute;
    transform: translate(-2px,0);
    transform-origin: bottom;
    border-radius: 50%;
}
.sec{
    width: 43px;
    height: 44px;
    background: url('./images/hand.png') no-repeat;
    position: absolute;
    left: 18px;
    top: 16px;  
    transform-origin: 37px 39px;
}

js的实现

思路
1.首先只是个圆，并没有刻度，需要生成12个刻度，这刻度就是跟着圆盘中心旋转360/12度。
2.修改时分秒指针的位置，根据当前时间计算旋转角度

            var ulList = document.querySelector('.circle');
            var hourDom = document.querySelector('.hour');
            var minuteDom = document.querySelector('.minute');
            var secDom = document.querySelector('.sec');
            var days = document.querySelectorAll('#now p');
            var deg = 30;
            //渲染刻度
             function renderDegree(){
                var html = ''
                for(var i=0;i<12;i++){
                    //按着圆中心旋转
                    html += '<li class="degree" style="transform:rotate('+deg*i+'deg)"></li>';
                }
                return html;
            }

2.修改指针位置

//指针运行
            function runPointer(){
                var date = new Date();
                var sec = date.getSeconds();
                //分钟加上秒数的些许偏移
                var minute = date.getMinutes() + sec/60;
                //小时加上分钟的偏移
                var hour = date.getHours() + minute/60;
                //秒每次旋转的度数
                var secDeg = sec*360/60 ;
                //分钟每次旋转的度数
                var minuteDeg = minute * 360/60 ;
                //小时每次旋转的度数  比如两点钟 自然是12点偏移60°
                var hourDeg = hour * 30;
                //这里减去90度是因为我的时针一开始处于三点的位置
                hourDom.style.transform = `rotate(${hourDeg-90}deg)`;
                minuteDom.style.transform = `rotate(${minuteDeg}deg)`;
                //这里加45°是因为秒针的图片是斜着的，让他摆正
                secDom.style.transform = `rotate(${secDeg+45}deg)`;
            }
          
//接着让他每秒钟运行,就可以正常跑起来了
 setInterval(runPointer,1000);

效果

在这里插入图片描述

素材

秒针
时针

好了，我们下期继续,小伙伴们可以弄个时钟玩玩。