漂亮的SVG时钟
漂亮的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)正变得越来越受欢迎. 大家都知道,在计算机图形学中,有两种主 ...
随机推荐
- BUG1 解决java compiler level does not match the version of the installed java project facet
因工作的关系,Eclipse开发的Java项目拷来拷去,有时候会报一个很奇怪的错误.明明源码一模一样,为什么项目复制到另一台机器上,就会报“java compiler level does not m ...
- Qt 编写多窗口程序
该文章原创于Qter开源社区(www.qter.org),作者yafeilinux,转载请注明出处! 导语 程序要实现的功能是:程序开始出现一个对话框,按下按钮后便能进入主窗口,如果直接关闭 ...
- RabbitMQ 中 Connection 和 Channel 详解
我们知道无论是生产者还是消费者,都需要和 RabbitMQ Broker 建立连接,这个连接就是一条 TCP 连接,也就是 Connection. 一旦 TCP 连接建立起来,客户端紧接着可以创建一个 ...
- NO.11天作业
打印uid在30~40范围内的用户名.awk -F: '$3>=30 && $3<=40{print $1,$3}' /etc/passwd 打印第5-10行的行号和用户名 ...
- bzoj千题计划143：bzoj1935: [Shoi2007]Tree 园丁的烦恼
http://www.lydsy.com/JudgeOnline/problem.php?id=1935 二维偏序问题 排序x,离散化树状数组维护y #include<cstdio> #i ...
- hdu 3065病毒侵袭持续中
病毒侵袭持续中 http://acm.hdu.edu.cn/showproblem.php?pid=3065 Time Limit: 2000/1000 MS (Java/Others) Mem ...
- Linux6.x修改出eth0网卡的解决方法
1. 编辑70-persistent-net配置文件: # -persistent-net.rules 如果没有就新建一个,添加如下内容: # PCI device 0x14e4:0x165f (tg ...
- 关于File 文件操作
1.通过Context.getExternalFilesDir()方法可以获取到 SDCard/Android/data/你的应用的包名/files/ 目录,一般放一些长时间保存的数据2.通过Cont ...
- fvwm：还是觉得你最好
2008-07-12的老日志 用了gnome和xfce,还是有些厌了,摆弄了两天fvwm,发现虽然配置起来有点麻烦,但用起来还是它最贴心,而且占资源极少,系统使用过程中内存一直只用了五六十兆.我的鼠标 ...
- python Linux flask uwsgi nginx 在centos7.3部署
0.直接上uwsgi和nginx安装命令 linux 安装uwsgi yum groupinstall "Development tools" yum install zlib-d ...