漂亮的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时钟的更多相关文章

使用 CSS & jQuery 制作一款漂亮的多彩时钟
大家可能见过各种各样的时钟效果,比如多年前非常流行的 Flash 制作的各种新奇的动画时钟,现在的 Web 开发者们又开始应用 CSS3 和 Canvas 等最新技术来实现.而今天这里要分享的这款漂亮 ...
C#开发漂亮的数字时钟
今天用C#做了一个漂亮的数字时钟.界面如下. 实现技术:主要是通过Graphics类的DrawImage方法来绘制数字时钟中所有的数字,这些数字是从网上找的一些图片文件.时钟使用DateTime中No ...
JavaScript+svg绘制的一个动态时钟
结果图: 代码如下: <!DOCTYPE html> <html> <head> <title>动态时钟</title> </head ...
【应用】SVG动态时钟
没有做秒针,只做了分针和时针,5分钟以后来看应该可以看到效果╮(╯-╰)╭ <!DOCTYPE html> <html> <head> <title>& ...
15个超强悍的CSS3圆盘时钟动画赏析
在网页上,特别是个人博客中经常会用到时钟插件,一款个性化的时钟插件不仅可以让页面显得美观,而且可以让访客看到当前的日期和时间.今天我们给大家收集了15个超强悍的圆盘时钟动画,很多都是基于CSS3,也有 ...
Trianglify - 生成五彩缤纷的 SVG 背景图案
Trianglify 是一个能够生成五颜六色的三角形图案的 JavaScript 库,可以用来作为 SVG 图像和 CSS 背景.它的灵感来自于 Btmills 的 Geopattern,并使用 d3 ...
8个实用的SVG工具，20 个有用的 SVG 工具，五款超实用的开源SVG工具
8个实用的SVG工具 [导读] 你还在为没有好用的SVG工具而发愁吗?开发人员的福音来啦!小编为大家收集罗列了8款实用的SVG工具,让我们一起来看看吧! SVG可缩放矢量图形(Scalable Vec ...
制作WPF时钟之2
原文:制作WPF时钟之2 前段时间写了一篇"制作简单的WPF时钟",今天再制作了一个更漂亮的WPF时钟,目前仅完成了设计部分,准备将它制作成一个无边框窗体式的时钟. 效果图: ...
8款超好用的SVG编辑工具用起来
随着响应式网页的发展,对于内容呈现的要求也越来越高,尤其是图像.为了在各种设备上能实现自然伸缩或扩展而不影响图片质量,所以矢量图形(SVG)正变得越来越受欢迎. 大家都知道,在计算机图形学中,有两种主 ...

随机推荐

解题：POI 2013 Triumphal arch
题面二分答案,问题就转化为了一个可行性问题,因为我们不知道国王会往哪里走,所以我们要在所有他可能走到的点建造,考虑用树形DP解决(这个DP还是比较好写的,你看我这个不会DP的人都能写出来=.=) 定 ...
LGP4518[JSOI2018]绝地反击
题解: 只要确定了每艘飞船的就位位置,就可以用二分+网络流求得答案: 定义偏转角度$a$为离$x$正半轴逆时针最近的边的弧度,$a \in [0,\frac{2\pi}{n})$ 二分一个值,对于一个 ...
JDBC详解(一)
一.相关概念介绍 1.1.数据库驱动这里驱动的概念和平时听到的那种驱动的概念是一样的,比如平时购买的声卡,网卡直接插到计算机上面是不能用的,必须要安装相应的驱动程序之后才能够使用声卡和网卡,同样道理 ...
linux下tar.gz、tar、bz2、zip等解压缩、压缩命令
转至:http://www.jb51.net/LINUXjishu/43356.html 说明:Linux下最常用的打包程序就是tar了,使用tar程序打出来的包我们常称为tar包,tar包文件的命令 ...
Fibonacci数列时间复杂度之美妙
Fibonacci数列: fib(0)=1 fib(1)=1 fib(n)=fib(n-1)+fib(n-2) 上课老师出了一道题,求下列函数的时间复杂度: int fib(int d) { ) ; ...
关于strassen矩阵乘法的矩阵大小不是2^k的形式时，时间复杂度是否还是比朴素算法好的看法
原来是n,找到大于等于n且是2^k形式的数m.n*n的矩阵补全为m*m的矩阵,原来的矩阵放在最左上方,其它位置的值为0.朴素方法:n^3现在:m^2.8即m/n需小于e^(3/2.8)=2.919才能 ...
hibernate的懒加载
WHY? WHAT? HOW? 所谓懒加载(lazy)就是延时加载,延迟加载.即不是不加载,而是在需要的时候才加载. 什么时候用懒加载呢,我只能回答要用懒加载的时候就用懒加载. 至于为什么要用懒加载呢 ...
Java基础-集合的嵌套
Java基础-集合的嵌套作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.静态导入静态导入是在JDK1.5后的新特性,可以减少开发的代码量,但是实际用处是很一般,静态导入的标准 ...
jvm如何判断对象是否可以被回收
内容基本来自周志明深入理解Java虚拟机第二版第三章 .这本书还可以,不过好像也没什么其他中文的关于jvm比较好的书了 jvm要做垃圾回收时,首先要判断一个对象是否还有可能被使用.那么如何判断一 ...
六、强大的 Stream API
一.了解 Stream Java8中有两大最为重要的改变.第一个是 Lambda 表达式:另外一个则是 Stream API(java.util.stream.*).Stream 是 Java8 中处 ...

漂亮的SVG时钟

漂亮的SVG时钟的更多相关文章

随机推荐

热门专题