JS实现一个时钟

最新推荐文章于 2024-01-31 16:02:42 发布

醉月听风

最新推荐文章于 2024-01-31 16:02:42 发布

阅读量608

点赞数

分类专栏： javaScript

本文链接：https://blog.csdn.net/qq_39595839/article/details/101031860

版权

javaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

html布局：时钟分针秒针和中心的圆点，表盘数字

    <div id="warp">
        <ul id="scale">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
        </ul>
        <div id="hour"></div>
        <div id="min"></div>
        <div id="second"></div>
        <div id="dot"></div>
    </div>

css：

表盘

   #warp{
        width: 500px;
        height: 500px;
        /* background: cornflowerblue; */
        border: 20px cornflowerblue solid;
        margin: 100px auto;
        border-radius: 50%;
        position: relative;
    }

三个指针

     #hour{
         width: 10px;
         height: 160px;
         background: rgb(22, 22, 24);
         border-radius: 10px;
         position: absolute;
         left: 245px;
         top: 90px;

     
         transform-origin: center 160px;
         transform: rotate(0deg);
     }
     #min{
         width: 7px;
         height: 200px;
         background: rgb(241, 192, 213);
         border-radius: 10px;
         position: absolute;
         left: 246px;
         top: 50px;
         transform-origin: center 200px;
         transform: rotate(0deg);
     }
     #second{
         width: 5px;
         height: 250px;
         background: rgb(230, 11, 120);
         border-radius: 20px;
         position: absolute;
         left: 247px;
         top: 20px;
         transform-origin: center 230px;
         transform: rotate(0deg);
     }

其中transform-origin:定义指针旋转的基点取值 x轴位置和y轴位置；

transform: rotate();旋转多少度，单位deg；

JS部分：

 window.setInterval(seconds,1000);
    function seconds(){
        //获取当前时间
       var timess=new Date();
    //    console.log(timess);
    //    获取当前秒数并且每秒旋转度数
       var scond=timess.getSeconds()*6;
    //    获取当前小时数并且每小时旋转度数
       var hour=timess.getHours()*30;
    //    获取当前分钟数并且每分钟旋转度数
       var min=timess.getMinutes()*6;
    //    console.log(min);
    //    console.log(scond);
    //    console.log(hour);
    //    console,log(scond);
//   设置指针转动
        document.getElementById("second").style.transform="rotate("+scond+"deg)";
        document.getElementById("min").style.transform="rotate("+min+"deg)";
        document.getElementById("hour").style.transform="rotate("+hour+"deg)";

    }

JS总结：

通过new Date（）获取时间函数，

getSeconds（）获取秒数；

getHours（）获取小时数

getMinutes（）获取分钟数

效果图：