<body>
<div id="clock"></div>
<button class="s30">30 sec</button>
</body>{/tabs-pane}
{tabs-pane label="css"}
body {
background: #123;
}
#clock {
height: 50px;
width: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
button {
cursor: pointer;
}{/tabs-pane}
{tabs-pane label="js"}
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), `<animateTransform attributeName="transform" type="translate" values="${a}" dur="${o}s" begin="${t}s" repeatCount="${Math.ceil(r.totalSeconds / o)}" calcMode="discrete" />`
}
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 ? `<use href="#fullClock${r.id}" filter="url(#glow${r.id})"/>` : "",
b = r.glow ? `<filter id="glow${r.id}" x="-200%" y="-200%" width="1000%" height="1000%"><feGaussianBlur in="SourceGraphic" stdDeviation="1.4"><animate attributeName="stdDeviation" values="1.4; 4; 1.4" dur="0.3s" begin="placeholderAnimation${r.id}.end" repeatCount="indefinite" /></feGaussianBlur></filter>` : "",
v = r.showMs ? "M 132.5 10 v0 m0 10 v0" : "",
S = r.showMs ? `<g class="ms10"><use href="#nums${r.id}" transform="translate(135)" />${m}</g><g class="ms">\n\t<use href="#nums${r.id}" transform="translate(155)" />\n\t${g}\n\t</g>` : "",
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 = `<linearGradient id="goldGrad${r.id}" gradientTransform="rotate(5)" x1="0%" y1="0%" x2="42%" y2="0%" spreadMethod="repeat"><stop offset="0%" stop-color="#ffb338" /><stop offset="50%" stop-color="#3e2904" /><stop offset="100%" stop-color="#ffb338" /></linearGradient><linearGradient id="goldGrad2${r.id}" gradientTransform="rotate(5)" x1="0%" y1="5%" x2="0%" y2="61%" spreadMethod="repeat"><stop offset="0%" stop-color="#ffb338" /><stop offset="50%" stop-color="#77571d" /><stop offset="100%" stop-color="#ffb338" /></linearGradient>`;
for (let t = 0; t < 10; t++) {
B += `<use href="#t${t}${r.id}" />`;
for (let e = 0; e < 10; e++) I += `<use href="#t${t}${r.id}" transform="translate(0 ${.1 + .1 * e})" />`
}
} else q = ` fill=${r.color}`;
let D = `<svg id="clockItToMe${r.id}" xmlns="http://www.w3.org/2000/svg" viewBox="0 ${h} ${p} ${x * w}" height="100%" class="clockCountdown"><defs>${A}${b}<g id="nums${r.id}" font-weight="${r.fontWeight}" font-size="25" font-family="${r.font}"><g${q}><text id="t0${r.id}" transform="translate(3 24)">0</text><text id="t1${r.id}" transform="translate(3 54)">1</text><text id="t2${r.id}" transform="translate(3 84)">2</text><text id="t3${r.id}" transform="translate(3 114)">3</text><text id="t4${r.id}" transform="translate(3 144)">4</text><text id="t5${r.id}" transform="translate(3 174)">5</text><text id="t6${r.id}" transform="translate(3 204)">6</text><text id="t7${r.id}" transform="translate(3 234)">7</text><text id="t8${r.id}" transform="translate(3 264)">8</text><text id="t9${r.id}" transform="translate(3 294)">9</text></g><g fill="url(#goldGrad${r.id})" stroke="url(#goldGrad${r.id})" stroke-width="0.5">${I}</g><g fill="${r.color}" stroke="url(#goldGrad2${r.id})" stroke-width="0.5" stroke-linejoin="round" stroke-linecap="round">${B}</g></g><linearGradient id="grad${r.id}" gradientTransform="rotate(90)"><stop offset="20%" stop-color="#000" /><stop offset="50%" stop-color="#fff" /><stop offset="80%" stop-color="#000" /></linearGradient><linearGradient id="grad2${r.id}" gradientTransform="rotate(90)"><stop offset="40%" stop-color="#000" /><stop offset="50%" stop-color="#fff" /><stop offset="60%" stop-color="#000" /></linearGradient></defs><g transform="translate(${n} 0)"><g id="fullClock${r.id}"${y}><g class="hr10" opacity="${M}"><use href="#nums${r.id}" />${l}</g><g class="hr" opacity="${G}"><use href="#nums${r.id}" transform="translate(20)" />${d}</g><g class="min10" opacity="${C}"><use href="#nums${r.id}" transform="translate(45)" />${f}</g><g class="min" opacity="${T}"><use href="#nums${r.id}" transform="translate(65)" />${c}</g><g class="sec10" opacity="${N}"><use href="#nums${r.id}" transform="translate(90)" />${$}</g><g class="sec"><use href="#nums${r.id}" transform="translate(110)" />${u}</g>${S}<path d="M42.5 10 v0 m0 10 v0" stroke="${r.dotColor}" stroke-width="3" stroke-linecap="square" opacity="${G / 2}" /><path d="M 87.5 10 v0 m0 10 v0" stroke="${r.dotColor}" stroke-width="3" stroke-linecap="square" opacity="${T / 2}" /><path d="${v}" stroke="${r.dotColor}" stroke-width="3" stroke-linecap="square" opacity="1" /></g>${k}<g><animate id="placeholderAnimation${r.id}" attributeName="opacity" values="0; 0" dur="${r.totalSeconds}s" begin="0s" repeatCount="1" /></g></g></svg>`;
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
});
});{/tabs-pane}
代码来自CodePenSVG倒计时
评语 (0)