美文网首页
用JS实现Windows日历(一)

用JS实现Windows日历(一)

作者: 嘉勇__Lynne | 来源:发表于2020-04-15 23:50 被阅读0次

整体效果图

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

时钟绘制与运转

生成刻度

//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);

效果

在这里插入图片描述

素材

秒针
时针

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

相关文章

  • 用JS实现Windows日历(一)

    整体效果图 时钟绘制与运转 生成刻度 js的实现 思路1.首先只是个圆,并没有刻度,需要生成12个刻度,这刻度就是...

  • JS实现日历

    最近在捣鼓一个chrome插件,包括两个功能:1.倒计时,2.日历。 大致是下面这个样子: 倒计时模式倒还简单,日...

  • Windows平台Node.js实现文本转语音TTS

    最新有个需求,想在Windows平台上用Node.js实现文本转语音 (Text to Speech, TTS) ...

  • JS实现插入排序、快排、二分查找法

    用JS实现插入排序 用JS实现快排 用JS实现二分查找法

  • Windows平台Node.js实现复制任意文本到剪贴板

    最新有个需求,想在Windows平台上用Node.js实现复制功能,实现过程中踩了一些坑,总结一下,做个记录。 首...

  • JS全年日历打印

    用函数打印全年日历,封装函数然后调用。 js

  • js 实现一个日历

    1.显示年份&月份 2.添加日历数据.1 月份的1日根据星期来排序 ( 如1月1日是星期三,此时需要将1移动到星期...

  • 原生JS实现日历组件

    想要实现的效果 点击日期选择框出现日历 有个日期控制栏帮助选择日期, 包括年、月、日的选择和今天 日历格子,初次点...

  • Vue纯JS实现日历

    效果图 不说废话,先上效果图: 实现代码 核心方法是pushDays() 思路 为了日历的完整和美观,采用的6行 ...

  • node.js Binaries方式安装

    node.js在windows下有安装文件,直接一路下一步就可以了,但大家都知道在windows下用node.js...

网友评论

      本文标题:用JS实现Windows日历(一)

      本文链接:https://www.haomeiwen.com/subject/pfnkvhtx.html