svg写一个好看的时钟

最新推荐文章于 2023-10-18 19:39:51 发布

qsya

最新推荐文章于 2023-10-18 19:39:51 发布

阅读量543

点赞数 3

分类专栏： svg 前端 javascript 文章标签： svg 前端 javascript

本文链接：https://blog.csdn.net/qq_34241004/article/details/121018533

版权

前端同时被 3 个专栏收录

15 篇文章 1 订阅

订阅专栏

javascript

11 篇文章 0 订阅

订阅专栏

svg

2 篇文章 0 订阅

订阅专栏

» 介绍

浏览大佬的博客主页时，发现一个款好看、个性的svg时钟，动手实现一下，效果如下：
在这里插入图片描述

预览地址：https://hq88l.csb.app/

博客地址：https://www.cnblogs.com/a-cat/

» 核心

★ 已知半径r，圆心(x0, y0)，角度deg，求圆上点坐标。

const x = x0 + r * Math.cos(deg * Math.PI / 180)
const y = y0 + r * Math.sin(deg * Math.PI / 180)

(盗个图)，注意，起点从3点钟方向开始算角度
在这里插入图片描述

» 代码如下

指针时、分、秒分别为三个不同大小的圆点，围绕圆心做圆周运动，三个点构成三角形。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>svgClock</title>
    <style>
        body {
            margin: 30px 0;
            text-align: center;
        }

        svg {
            width: 200px;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        .textTime {
            fill: #f4f4f4;
            text-anchor: middle;
            alignment-baseline: middle;
            font-size: 3rem;
            font-weight: 100;
        }

        .ring {
            fill: none;
            stroke: #f4f4f4;
            stroke-width: 2px;
            stroke-dasharray: 4px;
            opacity: .5;
        }

        .dial {
            fill: #328e7c;
            stroke: #7c756a;
            stroke-width: 10px;
        }

        .pointer {
            fill: #c1635a;
            stroke: #328e7c;
            stroke-width: 3px;
        }

        .scale {
            stroke: #f4f4f4;
            stroke-width: 2px;
        }

        .triangle {
            fill: #ccb739;
        }

    </style>
</head>

<body>
<svg xmlns="http://www.w3.org/svg/2000" viewBox="0 0 400 400" width="400" height="400" preserveAspectRatio="xMidYMid">
    <circle cx="200" cy="200" r="195" class="ring"></circle>
    <circle cx="200" cy="200" r="185" class="dial"></circle>
    <g id="scales"></g>
    <path class="triangle" d=""></path>
    <g>
        <circle cx="200" cy="200" r="15" class="pointer"></circle>
        <circle cx="200" cy="200" r="10" class="pointer"></circle>
        <circle cx="200" cy="200" r="5" class="pointer"></circle>
    </g>
    <text x="200" y="200" class="textTime"></text>
</svg>
<script>
    const r = 185
    const scalesDom = document.getElementById('scales')
    const hourDom = document.getElementsByClassName('pointer')[0]
    const minDom = document.getElementsByClassName('pointer')[1]
    const secondDom = document.getElementsByClassName('pointer')[2]
    const triangleDom = document.getElementsByClassName('triangle')[0]
    const textDom = document.getElementsByClassName('textTime')[0]

    const pointers = document.getElementById('scale')

    let svg = "http://www.w3.org/2000/svg";

    // 添加刻度
    for (let i = 0; i < 12; i++) {
        let line = document.createElementNS(svg, "line");
        line.setAttribute('class', 'scale')
        line.setAttribute('x1', 200 + 180 * Math.cos(30 * i * Math.PI / 180))
        line.setAttribute('y1', 200 + 180 * Math.sin(30 * i * Math.PI / 180))
        line.setAttribute('x2', 200 + 175 * Math.cos(30 * i * Math.PI / 180))
        line.setAttribute('y2', 200 + 175 * Math.sin(30 * i * Math.PI / 180))
        scalesDom.append(line)
    }

    const setPercent = () => {
        let date = new Date()
        let hour = date.getHours()
        let min = date.getMinutes()
        let second = date.getSeconds()

        textDom.innerHTML = `${fillZero(hour)} : ${fillZero(min)} : ${fillZero(second)}`

        let hDeg = hour * 360 / 12 - 90
        let mDeg = min * 360 / 60 - 90
        let sDeg = second * 360 / 60 - 90

        let xh = 200 + (r - 30) * Math.cos(hDeg * Math.PI / 180)
        let yh = 200 + (r - 30) * Math.sin(hDeg * Math.PI / 180)
        let xm = 200 + (r - 30) * Math.cos(mDeg * Math.PI / 180)
        let ym = 200 + (r - 30) * Math.sin(mDeg * Math.PI / 180)
        let xs = 200 + (r - 30) * Math.cos(sDeg * Math.PI / 180)
        let ys = 200 + (r - 30) * Math.sin(sDeg * Math.PI / 180)

        hourDom.setAttribute('cx', xh)
        hourDom.setAttribute('cy', yh)

        minDom.setAttribute('cx', xm)
        minDom.setAttribute('cy', ym)

        secondDom.setAttribute('cx', xs)
        secondDom.setAttribute('cy', ys)

        triangleDom.setAttribute('d', `M${xh},${yh} L${xm},${ym} L${xs},${ys} L${xh},${yh}`)
    }

    const fillZero = (val) => {
        return val > 9 ? val : '0' + val
    }

    (function draw() {
        setInterval(() => {
            setPercent()
        }, 1000)
    }())
</script>
</body>

</html>