漂亮的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)正变得越来越受欢迎. 大家都知道,在计算机图形学中,有两种主 ...

随机推荐

python之旅：模块与包
一.模块介绍前言:引用廖雪峰大神的,说的很好!!! 在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护. 为了编写可维护的代码,我们把很多函数分组,分别放 ...
postgresql 数据库无法启动
在数据库无法启动时,一般可以根据报错信息,采取对应措施即可,下面列出一些在数据库启动时报出错误比较严重而解决方式又不那么明显的处理方法. 模拟错误,查到pg_class系统表中一个索引在磁盘中的位置, ...
Gym 101933
Gym 101933 B. Baby Bites水题直接模拟即可 #include <cstdio> #include <cstring> #include <queue ...
不知道怎么改的尴尬R语言的ARIMA模型预测
数据还有很多没弄好,程序还没弄完全好. > read.xlsx("H:/ProjectPaper/论文/1.xlsx","Sheet1") > it ...
Java基础-数组常见排序方式
Java基础-数组常见排序方式作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 数据的排序一般都是生序排序,即元素从小到大排列.常见的有两种排序方式:选择排序和冒泡排序.选择排序的特 ...
aspx <%= %> 绑定变量问题及解决方法
aspx页面,前台页面需要用到后台变量字段的时候我们一般使用 <%= 变量 %>,多数情况下使用正常. 但是有的时候就会遇到变量解析被编码的情况,特别是是在head当中css引用lin ...
SourceTree使用SSH克隆码云项目
SourceTree使用SSH克隆码云项目觉得有用的话,欢迎一起讨论相互学习~Follow Me SourceTree使用SSH克隆码云项目参考文献 https://blog.csdn.net/q ...
浏览器内核控制meta name="renderer" 说明文档
https://blog.csdn.net/adc_god/article/details/51531263
微信小程序开发（五）开发框架MINA
微信团队为小程序提供的框架命名为MINA应用框架.MINA框架通过封装微信客户端提供的文件系统.网络通信.任务管理.数据安全等基础功能,对上层提供一整套JavaScript API,让开发者能够非常方 ...
调整扩大VMDK格式VirtualBox磁盘空间
如果虚拟机的格式是VDI格式的, 那么可以通过这篇文章来调整磁盘大小: 调整Virtual Box硬盘大小不过楼主当初在创建虚拟机的时候,是用的VMDK格式, 以求与VMWare的兼容性.这时候要扩 ...

漂亮的SVG时钟

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

随机推荐

热门专题