42 lines
2.6 KiB
JavaScript
42 lines
2.6 KiB
JavaScript
/* 首页头图倒计时（11-03 用户：「头图小孩左边改成倒计时那种感觉」）
|
||
· 天数做成翻页数字牌（每位一块毛玻璃牌，中间一道翻页缝），变化时逐位翻一下；
|
||
· 下面一行「时 分 秒」每秒走字 = 到今天 24:00 还剩多少 —— 和天数合起来就是「到预产期那天结束」，跟别处的「还有 N 天」对得上；
|
||
· 数据只认 app.js setHero 传进来的天数（window.__mbHeroLeft），0 = 不开倒计时（未填预产期 / 已出生 / 已到预产期），整块隐藏、回到旧样式。 */
|
||
(function () {
|
||
var box = document.getElementById('heroCd'), pane = box && box.closest('.hero-pane');
|
||
if (!box) return;
|
||
var cur = '', timer = 0;
|
||
var p2 = function (n) { return (n < 10 ? '0' : '') + n; };
|
||
box.innerHTML =
|
||
'<span class="cd-lb"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s-8-5-8-11a4.5 4.5 0 018-2.8A4.5 4.5 0 0120 10c0 6-8 11-8 11z" fill="currentColor"/></svg>距离和宝宝见面还有</span>' +
|
||
'<div class="cd-row"><span class="cd-d" id="heroCdD"></span><em>天</em></div>' +
|
||
'<div class="cd-tk"><b id="heroCdH">--</b><i>时</i><b id="heroCdM">--</b><i>分</i><b id="heroCdS">--</b><i>秒</i></div>';
|
||
var D = document.getElementById('heroCdD'), H = document.getElementById('heroCdH'), M = document.getElementById('heroCdM'), S = document.getElementById('heroCdS');
|
||
function tick() {
|
||
var n = new Date(), e = new Date(n.getFullYear(), n.getMonth(), n.getDate() + 1), r = Math.max(0, Math.floor((e - n) / 1000));
|
||
H.textContent = p2(Math.floor(r / 3600)); M.textContent = p2(Math.floor(r / 60) % 60); S.textContent = p2(r % 60);
|
||
}
|
||
function setDays(v) {
|
||
var s = String(v), old = cur; cur = s;
|
||
if (D.children.length !== s.length) D.innerHTML = s.split('').map(function () { return '<i><span></span></i>'; }).join('');
|
||
s.split('').forEach(function (ch, k) {
|
||
var c = D.children[k], sp = c.firstChild;
|
||
if (sp.textContent === ch) return;
|
||
sp.textContent = ch;
|
||
if (old) { c.classList.remove('flip'); void c.offsetWidth; c.classList.add('flip'); }
|
||
});
|
||
}
|
||
window.__mbHeroCd = function (left) {
|
||
left = +left || 0;
|
||
var on = left > 0;
|
||
pane && pane.classList.toggle('cd', on);
|
||
if (!on) { clearInterval(timer); timer = 0; cur = ''; return; }
|
||
setDays(left);
|
||
tick();
|
||
if (!timer) timer = setInterval(tick, 1000);
|
||
};
|
||
/* 停在后台时不走字，回前台立刻补一次 */
|
||
document.addEventListener('visibilitychange', function () { if (!document.hidden && timer) tick(); });
|
||
if (window.__mbHeroLeft != null) window.__mbHeroCd(window.__mbHeroLeft);
|
||
})();
|