JavaScript实现钟表样式

效果如图所示

代码如下

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box {
            width: 225px;
            height: 225px;
            margin: 100px auto 0;
            background: url("img/QQ图片20211120091043.jpg") no-repeat;
            position: relative;
            background-position: -33px -8px;
            /*背景进行水平和垂直移动*/
            border-radius: 50%;
        }

        #dian {
            width: 2px;
            height: 2px;
            background: green;
            position: absolute;
            left: 112px;
            top: 112px;
        }

        #shi {
            width: 6px;
            height: 60px;
            position: absolute;
            left: 110px;
            top: 70px;
            background: #000;
            transform-origin: 50% 72%
            /*焦点对焦，把线段固定到一点转动*/
        }

        #fen {
            width: 4px;
            height: 80px;
            position: absolute;
            left: 111px;
            top: 50px;
            background: #000;
            transform-origin: 50% 79%
        }

        #miao {
            width: 2px;
            height: 100px;
            background: red;
            position: absolute;
            left: 112px;
            top: 40px;
            transform-origin: 50% 73%; /*transform: rotate(90deg)*/
        }
    </style>
</head>
<body>
<div id="box">
    <div id="shi"></div>
    <div id="fen"></div>
    <div id="miao"></div>
    <div id="dian"></div>
</div>
</body>
</html>
<script>
    var miao = document.getElementById('miao')
    var fen = document.getElementById('fen')
    var shi = document.getElementById('shi')

    setInterval(function () {
        var time = new Date(),
            s = time.getSeconds(),
            m = time.getMinutes(),
            h = time.getHours()
        miao.style.transform = 'rotate(' + s * 6 + 'deg)'
        fen.style.transform = 'rotate(' + (m + s / 60) * 6 + 'deg)'
        shi.style.transform ='rotate(' + (h + m/60 +s/3600) * 30 + 'deg)'

    }, 1000)

    // console.log(new Date())
    // console.log(new Date().getSeconds())
    // console.log(new Date().getMinutes())
    // console.log(new Date().getHours())
    // console.log(new Date().getDate())
    // console.log(new Date().getMonth())
    // console.log(new Date().getFullYear())
    // console.log(new Date().getDay())
</script>

首先我们要实现这个效果，我们先要实现秒针的效果

我们思考

首先定义一个盒子，我们把它叫做miao

思考

秒针转动一格是6°

我们利用动画让他转动6°不就行了

开始实践

html代码如下

<div id="box">
    <div id="shi"></div>
    <div id="fen"></div>
    <div id="miao"></div>
    <div id="dian"></div>
</div>

css代码如下

      #miao {
            width: 2px;
            height: 100px;
            background: red;
            position: absolute;
            left: 112px;
            top: 40px；
        }
js代码如下

  var miao = document.getElementById('miao')

var time = new Date(),

s = time.getSeconds(),

miao.style.transform = 'rotate(' + s * 6 + 'deg)'

当我们实现以上的代码时候

我们会发现秒针在页面中是不动的

只有我们将页面不断刷新的时候才能实现秒针转的效果

我们可以加入一个定时器，每隔一段时间获取当前的秒数，然后进行计算后，得出需要旋转的度数，这样我们就可以实现秒针自动旋转了

修改js代码如下

 var miao = document.getElementById('miao')

  setInterval(function () {

        var time = new Date(),
            s = time.getSeconds(),
              miao.style.transform = 'rotate(' + s * 6 + 'deg)'

  }, 1000)



这样我们就实现了秒针的效果


但是我们为了下一步更加便捷，我们在css中加入

  transform-origin: 50% 72%
            /*焦点对焦，把线段固定到一点转动*/

此行代码的作用是将秒针分针时针都固定到一个点上，观看更加直白




这样我们再考虑分针的效果实现

我们可以思考到

分针的效果也是移动一格，一分钟也是6°

应该和秒针差不多

我们开始实践

html代码如下

<div id="box">
    <div id="shi"></div>
    <div id="fen"></div>
    <div id="miao"></div>
    <div id="dian"></div>
</div>



css代码如下

        #fen {
            width: 4px;
            height: 80px;
            position: absolute;
            left: 111px;
            top: 50px;
            background: #000;
            transform-origin: 50% 79%
        }

js代码如下

    var fen = document.getElementById('fen')

    setInterval(function () {
        var time = new Date(),          
            m = time.getMinutes(),
           
        fen.style.transform = 'rotate(' + m* 6 + 'deg)'

    }, 1000)


但这样我们发现这样的话，分针会，直接跳一个格，但是我们实际生活中是，分针缓慢的移动

所以他是跟着相应秒数的变化而进行旋转的

所以我们修改js代码如下

 fen.style.transform = 'rotate(' + (m + s / 60) * 6 + 'deg)'



最后我们来实现时针的效果

同上，分针是根据秒数，分钟数的变化来旋转，但是需要注意，一小时的变化是旋转30°

html代码如下

<div id="box">
    <div id="shi"></div>
    <div id="fen"></div>
    <div id="miao"></div>
    <div id="dian"></div>
</div>

css代码如下

        #shi {
            width: 6px;
            height: 60px;
            position: absolute;
            left: 110px;
            top: 70px;
            background: #000;
            transform-origin: 50% 72%
            /*焦点对焦，把线段固定到一点转动*/
        }
js代码如下

    var shi = document.getElementById('shi')

    setInterval(function () {
        var time = new Date(),
            h = time.getHours()
        shi.style.transform ='rotate(' + (h + m/60 +s/3600) * 30 + 'deg)'

    }, 1000)

这样我们就实现了钟表的效果了


补充

    
    // console.log(new Date().getSeconds())
    // console.log(new Date().getMinutes())
    // console.log(new Date().getHours())
    // console.log(new Date().getDate())
    // console.log(new Date().getMonth())
    // console.log(new Date().getFullYear())
    // console.log(new Date().getDay())

以上的是控制台获取当前的值

效果为


console.log(new Date().getDay())

这是控制台获取当前是星期六

console.log(new Date().getSeconds())
这是控制台获取当前的秒数

console.log(new Date().getMinutes())
这是控制台获取当前的分钟数

console.log(new Date().getHours())
这是控制台获取当前的小时数

console.log(new Date().getDate())
这是控制台获取当前的日期

console.log(new Date().getMonth())
这是控制台获取当前的月份

console.log(new Date().getFullYear())
这是控制台获取当前的年份

posted @ 2021-11-20 20:08 doudou帅阅读(238) 评论(0) 收藏举报

刷新页面返回顶部

doudou帅

JavaScript实现钟表样式

公告