漂亮的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. 【DP】【CF1097D】 Makoto and a Blackboard

    更好的阅读体验 Description 给定一个数 \(n\),对它进行 \(k\) 次操作,每次将当前的数改为自己的因数,包括 \(1\) 和自己.写出变成所有因数的概率是相等的.求 \(k\) 次 ...

  2. NIN (Network In Network)

    Network In Network 论文Network In Network(Min Lin, ICLR2014). 传统CNN使用的线性滤波器是一种广义线性模型(Generalized linea ...

  3. thinkphp3 行为（behavior）分析和基本使用

    1. 名词解析 官方解析: 来自 http://document.thinkphp.cn/manual_3_2.html#behavior_extend 行为(Behavior)是一个比较抽象的概念, ...

  4. ElasticStack系列之十 & 生产中的问题与解决方案

    1. 由 gc 引起节点异常 问题: 因为 gc 时会使 jvm 停止工作,如果某个节点 gc 时间过长,master ping 3次(zen discovery默认 ping 失败重试 3 次)不通 ...

  5. Selenium geckodriver异常

    sklearn实战-乳腺癌细胞数据挖掘(博主亲自录制视频) https://study.163.com/course/introduction.htm?courseId=1005269003& ...

  6. 服务器安全策略之《启用Windows 防火墙情况下配置允许SQL Server远程连接》

    为了服务器的安全,通常情况下我们需要启用Windows 防火墙,然而在启用了Windows 防火墙后会发现会引发一系列的问题,比如无法通过本地远程服务器桌面.无法在本地远程连接SQL Server等, ...

  7. python---django中权限框架设计

    一:admin下的权限了解 推文:如何正确使用 Django的User Model (一)默认权限表是在自带auth模块,中permission表中 可以使用has_perm方法获取用户是否有这个权限 ...

  8. Ubuntu 搭建svn服务器 ，以及常见错误解决方案

    一.安装命令: 1)以root身份登录.执行:sudo su -命令 2)执行安装命令:apt-get install subversion   二.创建项目目录 1)mkdir  /home/svn ...

  9. Linux安装python模块

    # 依赖解决 # yum -y install epel-release python-devel gcc # 安装模块 # pip install psutil  (若没有pip命令,可通过 yum ...

  10. 《PHP和MySQL Web开发》读书笔记（下篇）

    又与大家见面了.继续<PHP和MySQL Web开发>的总结. Chapter8.设计Web数据库 ·回去看看数据卡那本书吧,这里就不累赘谈这个东西. Chapter9.创建Web数据库 ...