canvas css 制作时钟

最新推荐文章于 2023-03-30 16:19:17 发布

QingYun911

最新推荐文章于 2023-03-30 16:19:17 发布

阅读量241

点赞数

本文链接：https://blog.csdn.net/qq_42761735/article/details/84776178

版权

canvas时钟效果

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <meta name='viewport' content='width=device-width,initial-scale=1.0'>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            overflow: hidden;
        }
    </style>
</head>

<body>
    <canvas id='canvas'></canvas>
    <script>
        function run() {
            var canvas = document.getElementById('canvas')
            var context = canvas.getContext('2d')
            var H = window.innerHeight
            var W = window.innerWidth
            canvas.height = H
            canvas.width = W
            //设置背景渐变
            var gradient = context.createRadialGradient(W / 2, H / 2, 5, W /
                2, H / 2, H / 2)
            gradient.addColorStop(0, 'purple')
            gradient.addColorStop(1, 'black')
            context.fillStyle = gradient
            context.fillRect(0, 0, W, H)

            var date = new Date()
            var hours = date.getHours()
            var minutes = date.getMinutes()
            var seconds = date.getSeconds()
            var milliseconds = date.getMilliseconds()
            hour = hours >= 12 ? hours - 12 : hours
            var Hour = hour + minutes / 60
            var Minute = minutes + seconds / 60
            var Second = seconds + milliseconds / 1000

            context.strokeStyle = '#57faff'
            context.lineWidth = 10
            context.beginPath()
            context.arc(W / 2, H / 2, H / 3, -0.5 * Math.PI, (2 * Math.PI) / 12 * Hour - 0.5 * Math.PI)
            context.stroke()
            context.beginPath()
            context.arc(W / 2, H / 2, H / 4, -0.5 * Math.PI, (2 * Math.PI) / 60 * Minute - 0.5 * Math.PI)
            context.stroke()
            context.beginPath()
            context.arc(W / 2, H / 2, H / 5, -0.5 * Math.PI, (2 * Math.PI) / 60 * Second - 0.5 * Math.PI)
            context.stroke()

            //时 分 秒 小于10自动补0方法
            function change(x) {
                return x < 10 ? '0' + x : x
            }
            //毫秒 小于100或10自动补0方法
            function ch(x) {
                if (x < 10) {
                    return '00' + x
                } else if (x < 100) {
                    return '0' + x
                } else {
                    return x
                }
            }
            //画布中心写数字时间
            var text = change(hours) + ':' + change(minutes) + ':' + change(seconds) + '.' + ch(milliseconds)
            context.fillStyle = '#57faff'
            context.font = '20px Consolas'
            context.textAlign = 'center'
            context.fillText(text, W / 2, H / 2)
        }
        setInterval(run, 1)
        window.onresize = function () {
            setInterval(run, 1)
        }
    </script>
</body>

css时钟效果

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name='viewport' content='width=device-width,initial-scale=1.0'>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 400px;
            height: 400px;
            position: relative;
            border-radius: 50%;
            border: 1px solid black;
            margin: 200px auto;
        }

        ul {
            list-style: none;
        }

        ul li {
            position: absolute;
            background: black;
            width: 2px;
            height: 10px;
            top: 0;
            left: 199px;
            transform-origin: center 200px;
        }

        ul li:nth-child(5n) {
            height: 20px;
        }

        .hour {
            position: absolute;
            background: black;
            width: 3px;
            height: 145px;
            top: 70px;
            left: 198.5px;
            transform-origin: center 130px;
        }

        .minute {
            position: absolute;
            background: black;
            width: 2px;
            height: 160px;
            top: 60px;
            left: 199px;
            transform-origin: center 140px;
        }

        .second {
            position: absolute;
            background: black;
            width: 1px;
            height: 180px;
            top: 50px;
            left: 199.5px;
            transform-origin: center 150px;
        }
    </style>
</head>

<body>
    <div class='container'>
        <ul></ul>
        <div class='hour'></div>
        <div class='minute'></div>
        <div class='second'></div>
    </div>

    <script>
        //先将时钟刻度按圆心旋转相应的度数
        var ul = document.querySelector('ul')
        for (var i = 0; i < 60; i++) {
            var li = document.createElement('li')
            ul.appendChild(li)
        }
        var allLi = document.querySelectorAll('li')
        for (var k = 0; k < 60; k++) {
            allLi[k].style.transform = `rotate(${(k+1)*6}deg)`
        }

        var hour = document.querySelector('.hour')
        var minute = document.querySelector('.minute')
        var second = document.querySelector('.second')

        //获取当前时间，将时 分 秒 指针旋转相应度数
        function run() {
            var date = new Date()
            var hours = date.getHours()
            var minutes = date.getMinutes()
            var seconds = date.getSeconds()
            hour.style.transform = `rotate(${(hours + minutes / 60) * 30}deg)`
            minute.style.transform = `rotate(${(minutes + seconds / 60) * 6}deg)`
            second.style.transform = `rotate(${seconds * 6}deg)`
        }

        setInterval(run, 500)
    </script>
</body>

QingYun911

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
canvas css 制作时钟

canvas时钟效果&lt;!DOCTYPE html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name='viewport' content='width=device-width,initial-scale=1.0'&gt; &lt;style&gt; * { ...
复制链接

扫一扫