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

  1. 使用 CSS & jQuery 制作一款漂亮的多彩时钟

    大家可能见过各种各样的时钟效果,比如多年前非常流行的 Flash 制作的各种新奇的动画时钟,现在的 Web 开发者们又开始应用 CSS3 和 Canvas 等最新技术来实现.而今天这里要分享的这款漂亮 ...

  2. C#开发漂亮的数字时钟

    今天用C#做了一个漂亮的数字时钟.界面如下. 实现技术:主要是通过Graphics类的DrawImage方法来绘制数字时钟中所有的数字,这些数字是从网上找的一些图片文件.时钟使用DateTime中No ...

  3. JavaScript+svg绘制的一个动态时钟

    结果图: 代码如下: <!DOCTYPE html> <html> <head> <title>动态时钟</title> </head ...

  4. 【应用】SVG动态 时钟

    没有做秒针,只做了分针和时针,5分钟以后来看应该可以看到效果╮(╯-╰)╭ <!DOCTYPE html> <html> <head> <title>& ...

  5. 15个超强悍的CSS3圆盘时钟动画赏析

    在网页上,特别是个人博客中经常会用到时钟插件,一款个性化的时钟插件不仅可以让页面显得美观,而且可以让访客看到当前的日期和时间.今天我们给大家收集了15个超强悍的圆盘时钟动画,很多都是基于CSS3,也有 ...

  6. Trianglify - 生成五彩缤纷的 SVG 背景图案

    Trianglify 是一个能够生成五颜六色的三角形图案的 JavaScript 库,可以用来作为 SVG 图像和 CSS 背景.它的灵感来自于 Btmills 的 Geopattern,并使用 d3 ...

  7. 8个实用的SVG工具，20 个有用的 SVG 工具，五款超实用的开源SVG工具

    8个实用的SVG工具 [导读] 你还在为没有好用的SVG工具而发愁吗?开发人员的福音来啦!小编为大家收集罗列了8款实用的SVG工具,让我们一起来看看吧! SVG可缩放矢量图形(Scalable Vec ...

  8. 制作WPF时钟之2

    原文:制作WPF时钟之2 前段时间写了一篇"制作简单的WPF时钟",今天再制作了一个更漂亮的WPF时钟,目前仅完成了设计部分,准备将它制作成一个无边框窗体式的时钟. 效果图:   ...

  9. 8款超好用的SVG编辑工具用起来

    随着响应式网页的发展,对于内容呈现的要求也越来越高,尤其是图像.为了在各种设备上能实现自然伸缩或扩展而不影响图片质量,所以矢量图形(SVG)正变得越来越受欢迎. 大家都知道,在计算机图形学中,有两种主 ...

随机推荐

  1. 【THUSC2017】座位

    题目背景 班级聚会的时候,班主任为了方便管理,规定吃饭的时候同一个寝室的同学必须坐在一起;但是吃完饭后,到了娱乐时间,喜欢不同游戏的同学会聚到一起;在这个过程中就涉及到了座位分配的问题. 题目描述 有 ...

  2. for,while,do while

    long i; ;i<;i++) printf( printf("%ld\n",i); ) printf("b\n"); i=; do { printf( ...

  3. js字符串替换（时间转换）

    转: js中字符串全部替换 废话不多说,直接发结果 在js中字符串全部替换可以用以下方法: str.replace(/需要替换的字符串/g,"新字符串") 比如: "yy ...

  4. R读取excel文件

    2017.09.05 我一个下午的成果啊啊啊啊,看看失败 不禁感叹一声,失败的路真是多啊!!!! 一.安装xlsx包 下面具体讲一讲怎么弄的(太笨了,所以学得慢,需要一步一步的来) 用R读取excel ...

  5. 秋色园QBlog技术原理解析：性能优化篇：缓存总有失效时，构造持续的缓存方案(十四)

    转载自:http://www.cyqdata.com/qblog/article-detail-38993 文章回顾: 1: 秋色园QBlog技术原理解析:开篇:整体认识(一) --介绍整体文件夹和文 ...

  6. BFS：八数码问题

    #include <iostream> #include <cstdlib> #include <cstdio> #include <cstring> ...

  7. Intellij IDEA设置及快捷键使用总结

    1. IDEA内存优化 先看看你机器本身的配置而配置. \IntelliJ IDEA 8\bin\idea.exe.vmoptions -------------------------------- ...

  8. Composer 自动加载（autoload）机制

    自动加载的类型 总体来说 composer 提供了几种自动加载类型 classmap psr-0 psr-4 files 这几种自动加载都会用到,理论上来说,项目代码用 psr-4 自动加载, hel ...

  9. SpringCloud（六） Hystrix入门

    前提 一个可用的Eureka注册中心(文中以之前博客中双节点注册中心,不重要) 一个连接到这个注册中心的服务提供者 快速入门 项目搭建 搭建一个新maven项目,artifactid为Ribbon-c ...

  10. IOC轻量级框架之Autofac

    http://www.cnblogs.com/WeiGe/p/3871451.html http://www.cnblogs.com/hkncd/archive/2012/11/21/2780041. ...