漂亮的SVG时钟

效果图：
代码如下，复制即可使用：
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>漂亮的SVG时钟</title>

<style>

    body {

        background: #1e2730;

        font-family: Arial;

    }

    svg {

        width: 100vmin;

        margin: 0 auto;

        display: block;

    }

    circle {

        fill: none;

        stroke-width: 3;

    }

    #secondsPath {

        stroke-width: 3;

        pointer-events: none;

        stroke-linecap: round;

    }

    #minPath {

        stroke-width: 3;

        pointer-events: none;

        stroke-linecap: round;

    }

    #hoursPath {

        stroke-width: 3;

        pointer-events: none;

        stroke-linecap: round;

    }

    text {

        dominant-baseline: central;

        text-anchor: middle;

        font-size: 5px;

        fill: Linen;

    }

    svg text::selection {

        background: none;

    }

    #hub {

        fill: #24303a;

        stroke-width: 0;

    }

    #toggle,

    #reset {

        cursor: pointer;

    }

</style>

</head>

<body>

<svg viewBox="0 0 50 50">

    <g>

        <circle id="secondsCirc" r="14" stroke="#24303a" />

        <path id="secondsPath" d="" fill="transparent" stroke="#1ed5f6" ></path>

        <circle id="minCirc" r="10" stroke="#24303a" />

        <path id="minPath" d="" fill="transparent" stroke="#f61ed5" ></path>

        <circle id="hoursCirc" r="6" stroke="#24303a" />

        <path id="hoursPath" d="" fill="transparent" stroke="#d5f61e" ></path>

        <circle id="hub" cx="0" cy="0" r="3.5" fill="#24303a" />

    </g>

    <text id="text"  transform="translate(25 5)">00:00:00</text>

    <text id="toggle" transform="translate(15 45)">STOP</text>

    <text id="reset" transform="translate(37 45)">RESET</text>

</svg>

</body>

<script>

    const rad = Math.PI / 180;

    let requestId = null;

    let stop = false;

    const svg = document.querySelector("svg");

    const g = document.querySelector("g");

    const TIME = "16:07:50";

    // counters

    let h = parseInt(TIME.split(":")[0]);

    let m = h * 60 + parseInt(TIME.split(":")[1]);

    let s = h * 60 * 60 + m * 60 + parseInt(TIME.split(":")[2]);

    //data

    let circles = {

        s: {

            path: secondsPath,

            divisions: 60,

            r: secondsCirc.getAttribute("r"),

            stroke: "#1ed5f6",

            start: (parseInt(TIME.split(":")[2]))%60

        },

        m: {

            path: minPath,

            divisions: 60,

            r: minCirc.getAttribute("r"),

            stroke: "#f61ed5",

            start: (parseInt(TIME.split(":")[1]))%60

        },

        h: {

            path: hoursPath,

            divisions: 24,

            r: hoursCirc.getAttribute("r"),

            stroke: "#d5f61e",

            start: (parseInt(TIME.split(":")[0]))%24

        }

    };

    let translation = { x: 25, y: 25 }; //translate

    let rotation = -90;

    let rot = -(rotation * rad);

    g.setAttributeNS(

        null,

        "transform",

        `translate(${translation.x} ${translation.y}) rotate(${rotation})`

    );

    const spring = 0.09;

    const friction = 0.8;

    class Clock {

        constructor(o) {

            this.path = o.path;

            this.divisions = o.divisions; //24 || 60

            this.R = o.r;

            this.start = o.start;

            this.strokeDashoffset = 0;

            this.definePath(this.path);

            this.vel = 0;

        }

        update(time) {

            let t = time % this.divisions;

            this.strokeLength = this.target;

            this.target = t * this.pathLength / this.divisions;

            if (this.pathLength - this.strokeLength <= this.delta) {

                this.strokeDashoffset += this.pathLength;

                this.strokeLength = 0.1;

            }

        }

        updateStrokeLength() {

            this.dist = this.target - this.strokeLength;

            this.acc = this.dist * spring;

            this.vel += this.acc;

            this.vel *= friction;

            this.strokeLength += this.vel;

            this.path.style.strokeDasharray = `${this.strokeLength},${this.pathLength -

            this.strokeLength}`;

            this.path.style.strokeDashoffset = this.strokeDashoffset;

        }

        definePath() {

            let d =

                "M" +

                this.R +

                "," +

                0 +

                "  A" +

                this.R +

                "," +

                this.R +

                " 0 " +

                1 +

                "," +

                1 +

                this.R +

                "," +

                -1 +

                "z";

            //y-1: the circles are rotated 90 degs

            this.path.setAttributeNS(null, "d", d);

            this.pathLength = this.path.getTotalLength();

            this.delta = this.pathLength / this.divisions;

            this.strokeLength = this.start * this.delta;

            this.target = this.strokeLength;

            this.path.style.strokeDasharray = `${this.strokeLength},${this.pathLength -

            this.strokeLength}`;

            this.path.style.strokeDashoffset = this.strokeDashoffset;

        }

    }

    let secondsTrack = new Clock(circles.s);

    let minTrack = new Clock(circles.m);

    let hoursTrack = new Clock(circles.h);

    let sid = setInterval(setCron, 1000);

    function addZero(i) {

        if (i < 10) {

            i = "0" + i;

        }

        return i;

    }

    function setText(h, m, s) {

        text.textContent =

            addZero(h % 24) + ":" + addZero(m % 60) + ":" + addZero(s % 60);

    }

    setText(h, m, s);

    function Animation() {

        requestId = window.requestAnimationFrame(Animation);

        secondsTrack.updateStrokeLength();

        minTrack.updateStrokeLength();

        hoursTrack.updateStrokeLength();

    }

    Animation();

    reset.addEventListener("click",resetCron,false);

    function resetCron(){

        secondsTrack = new Clock(circles.s);

        minTrack = new Clock(circles.m);

        hoursTrack = new Clock(circles.h);

        h = parseInt(TIME.split(":")[0]);

        m = h * 60 + parseInt(TIME.split(":")[1]);

        s = h * 60 * 60 + m * 60 + parseInt(TIME.split(":")[2]);

        setText(h, m, s);

    }

    function setCron() {

        secondsTrack.update(s);

        if (s % 60 == 0) {

            minTrack.update(m);

        }

        if (s % (60 * 60) == 0) {

            hoursTrack.update(h);

        }

        setText(h, m, s);

        s++;

        if (s % 60 == 0) {

            m++;

        }

        if (s % (60 * 60) == 0) {

            h++;

        }

    }

    toggle.addEventListener("click",function(){

        if(stop) {

            stop = false;

            toggle.textContent = "STOP";

            sid = setInterval(setCron, 1000);

        }else{

            stop = true;

            toggle.textContent ="GO";

            clearInterval(sid);

        }

    },false);

</script>

</html>
如有错误，欢迎联系我改正，非常感谢！！！
巴特西

漂亮的SVG时钟

最新文章

热门文章
