ספירה לאחור

הספירה נגזרת מההפרש מול השעון בכל טיק, ולא מהורדת אחד בכל שנייה. הדפדפן מאט טיימרים בטאב מוסתר וכל פיגור נצבר — ולכן מונה יורד מציג אחרי חצי שעה מספר שגוי. ספירה לאחור הוא רכיב מתוך רכיבים של כליקס. מה שמורידים הוא רכיב שלם, גם כ-HTML עצמאי וגם כרכיב React. אין ספרייה חיצונית, אין שלב בנייה, ואם כליקס ייעלם מחר הקוד ימשיך לעבוד.

רכיב · מבצע · המרה · בלי ספריות

<!-- ספירה לאחור — היעד יושב ב-data-target בתבנית ISO -->
<style>
  .klix-countdown { display: flex; gap: .5rem }
  .klix-countdown div { min-width: 4rem; padding: .5rem .75rem; border-radius: .8rem;
    background: #1e293b; text-align: center }
  .klix-countdown b { display: block; font-size: 1.5rem; font-weight: 900;
    font-variant-numeric: tabular-nums }
  .klix-countdown small { color: #94a3b8; font-size: .75rem }
</style>

<div class="klix-countdown" id="klix-countdown" role="timer"
     data-target="2026-12-31T23:59:59+02:00" data-done="המבצע הסתיים">
  <div><b data-unit="d">00</b><small>ימים</small></div>
  <div><b data-unit="h">00</b><small>שעות</small></div>
  <div><b data-unit="m">00</b><small>דקות</small></div>
  <div><b data-unit="s">00</b><small>שניות</small></div>
</div>

<script>
(function () {
  var box = document.getElementById('klix-countdown');
  if (!box) return;

  var target = new Date(box.getAttribute('data-target')).getTime();
  var cells = {
    d: box.querySelector('[data-unit="d"]'), h: box.querySelector('[data-unit="h"]'),
    m: box.querySelector('[data-unit="m"]'), s: box.querySelector('[data-unit="s"]')
  };

  function pad(n) { return String(n).padStart(2, '0'); }

  function tick() {
    // מחשבים מחדש מול השעון בכל טיק. מונה שיורד ב-1 מפגר בטאב מוסתר
    var left = target - Date.now();
    if (left <= 0) {
      box.textContent = box.getAttribute('data-done') || '';
      clearInterval(id);
      return;
    }
    var s = Math.floor(left / 1000);
    cells.d.textContent = pad(Math.floor(s / 86400));
    cells.h.textContent = pad(Math.floor((s % 86400) / 3600));
    cells.m.textContent = pad(Math.floor((s % 3600) / 60));
    cells.s.textContent = pad(s % 60);
  }

  var id = setInterval(tick, 500);
  tick();
})();
</script>