倒计时时钟

四月 19, 2024 / Mr.x / 0阅读 / 0评论/ 分类: 创意
倒计时时钟 — 荣小站
前端 JavaScript SVG 倒计时

倒计时时钟

使用 SVG 和 JavaScript 实现的复古 LED 风格倒计时时钟，支持毫秒显示和黄金边框效果。

▼ 效果展示
基于 SVG 技术实现的倒计时时钟，使用动画变形技术实现数字滚动效果。

这是一个精美的倒计时时钟效果，使用 SVG 和 JavaScript 实现。时钟采用复古 LED 风格显示，支持显示小时、分钟、秒和毫秒。点击按钮可以重置倒计时。

核心特性

  • SVG 实现：使用 SVG 矢量图形，清晰无损
  • 毫秒显示：可选显示毫秒精度
  • 黄金边框：可选的金色轮廓效果
  • 平滑动画：数字滚动使用 SVG 动画
  • 可配置：支持多种参数配置

完整代码

以下是完整的代码，分为 HTML、CSS、JS 三部分，点击各部分查看：

📄 HTML 结构

▼
<body> <div id="clock"></div> <button class="s30">30 sec</button> </body>

🎨 CSS 样式

▼
body { background: #123; } #clock { height: 50px; width: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } button { cursor: pointer; }

⚡ JavaScript 代码

▼
function initCountdown(t, e) { if (!t) return void console.error("Must have element to populate the clock!"); const o = { day: 0, hour: 0, min: 0, sec: 0, color: "#fff", showMs: !1, glow: !1, goldOutline: !1, font: "Roboto, sans-serif", fontWeight: 600, showAllNumbers: !1, freezeTime: !1, onlyShowTime: !1, onlySec: !1, id: (() => { let t = (new Date).getTime(), e = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (function (e) { let o = (t + 16 * Math.random()) % 16 | 0; return t = Math.floor(t / 16), ("x" == e ? o : 3 & o | 8).toString(16) })); return e })() }, r = Object.assign(o, e); if (r.totalSeconds = parseInt(parseInt(3600 * r.hour) + parseInt(60 * r.min) + parseInt(r.sec)), r.totalSeconds <= 0) return void console.error("What are you some kind of wiseguy?"); !r.dotColor && (r.dotColor = o.color); let s = "0 -270; 0 -240; 0 -210; 0 -180; 0 -150; 0 -120; 0 -90; 0 -60; 0 -30; 0 0", a = "0 -150; 0 -120; 0 -90; 0 -60; 0 -30; 0 0"; const n = r.totalSeconds >= 36e3 ? 0 : r.totalSeconds >= 3600 ? -22.5 : r.totalSeconds >= 600 ? -45 : r.totalSeconds >= 60 ? -65 : r.totalSeconds >= 10 ? -90 : -110, i = (t, e, o, a = s) => { if (r.totalSeconds >= e) { let t = r.totalSeconds % o - o; return Math.abs(t) === o && (t = 0), `` } return "" }, l = i(0, 36e3, 36e4), d = i(0, 3600, 36e3), f = i(0, 600, 3600, a), c = i(0, 60, 600), $ = i(0, 10, 60, a), u = i(0, 1, 10), m = i(0, 0, 1, s), g = i(0, 0, .1, s); let p = r.showMs ? 175 + n : 130 + n, x = r.showAllNumbers ? 300 : 30, h = r.showAllNumbers ? -300 : 0, w = r.showAllNumbers ? 2 : 1, y = r.showAllNumbers ? ` mask="url(#mask${r.id})"` : "", k = r.glow ? `` : "", b = r.glow ? `` : "", v = r.showMs ? "M 132.5 10 v0 m0 10 v0" : "", S = r.showMs ? `${m}\n\t\n\t${g}\n\t` : "", M = r.totalSeconds >= 36e3 ? 1 : .2, G = r.totalSeconds >= 3600 ? 1 : .2, C = r.totalSeconds >= 600 ? 1 : .2, T = r.totalSeconds >= 60 ? 1 : .2, N = r.totalSeconds >= 10 ? 1 : .2, A = "", I = "", q = "", B = ""; if (r.goldOutline) { q = ' visibility="hidden"', A = ``; for (let t = 0; t < 10; t++) { B += ``; for (let e = 0; e < 10; e++) I += `` } } else q = ` fill=${r.color}`; let D = `${A}${b}0123456789${I}${B}${l}${d}${f}${c}${$}${u}${S}${k}`; const O = document.createElement("div"); O.innerHTML = D; const W = O.firstChild; return t.appendChild(W), r.id } initCountdown(document.querySelector('#clock'), { color: '#345', dotColor: '#fff', showMs: true, goldOutline: true, sec: 30 }); document.querySelector('.s30').addEventListener('click', () => { document.querySelector('#clock').innerHTML = ''; initCountdown(document.querySelector('#clock'), { color: '#345', dotColor: '#fff', showMs: true, goldOutline: true, sec: 30 }); });

配置参数

参数类型说明
colorstring数字颜色
dotColorstring冒号点颜色
showMsboolean是否显示毫秒
goldOutlineboolean是否启用金色边框
secnumber倒计时秒数
glowboolean是否启用发光效果

使用说明

  1. 将 HTML 结构复制到你的页面中
  2. 添加对应的 CSS 样式
  3. 引入 JavaScript 代码
  4. 调用 initCountdown() 函数初始化时钟
  5. 点击按钮重置倒计时

#倒计时时钟(1)

评论