十年之约
347 字
2 分钟
十年之约
十年之约
效果
关于
这是一个记录十年时光流逝的动态进度卡片。从 2026年6月14日 开始，到 2036年6月14日 结束，整整十年的约定。
技术说明
- 格式：SVG（可缩放矢量图形）
- 尺寸：250 × 250（正方形）
- 动态更新：使用 JavaScript 读取系统时间，每秒自动刷新进度
- 进度显示：圆形进度环，红橙渐变
使用方法
1. 直接嵌入 HTML
<object data="ten_year_promise.svg" type="image/svg+xml" width="300" height="300"></object>或
<iframe src="ten_year_promise.svg" width="250" height="250" frameborder="0"></iframe>2. 作为图片引用（静态显示）
<img src="ten_year_promise.svg" alt="十年之约" width="250>Note
注意：使用 <img> 标签时，SVG 内的 JavaScript 不会执行，进度不会动态更新。
3. 内联 SVG
直接将 SVG 代码复制到 HTML 文件中，JavaScript 会自动运行。
设计特点
| 项目 | 说明 |
|---|---|
| 背景 | 半透灰 rgba(200, 200, 210, 0.45)，带阴影 |
| 边框 | 白色半透明边框，双层设计 |
| 进度环 | 红橙渐变，圆角线帽 |
| 统计 | 已过去天数 / 剩余天数 |
| 时间戳 | 底部实时显示当前系统时间 |
当前进度
Note
进度会随系统时间自动更新，每秒刷新一次。
自定义修改
如需修改时间范围，编辑 SVG 文件中的以下部分：
var startDate = new Date("2026-06-14T00:00:00+08:00");var endDate = new Date("2036-06-14T00:00:00+08:00");修改日期即可适配其他时间跨度。
愿十年之后，回首无悔。
支持与分享
如果这篇文章对你有帮助，欢迎分享给更多人或打赏支持！
相关文章智能推荐
1
陪伴我三年的手机出现粉线了
记录用了三年的手机屏幕出现粉线，记录一下。
2
没错，我的博客的评论没了
waline把 Waline 从 Netlify 迁到 Vercel + neon，顺手修好邮件通知，加载速度也快了，代价是历史评论没了。
3
Cloudflare 优选 IP 教程
用两个托管在 Cloudflare 的域名配合自定义主机名做优选 IP，附多站点配置方法。
4
蓝奏云直链解析工具
开源基于 Cloudflare Worker 的蓝奏云直链解析工具，一键获取真实下载地址，跳过中间页与广告，支持调试模式。
5
用 Cloudflare Workers + R2 搭建免费的 Serverless 云存储系统
cf基于 Cloudflare Workers + R2 对象存储的轻量无服务器文件管理器，支持密码登录、多文件上传、搜索排序与明暗主题。
随机文章随机推荐