ספירה לאחור

הספירה נגזרת מההפרש מול השעון בכל טיק, ולא מהורדת אחד בכל שנייה. הדפדפן מאט טיימרים בטאב מוסתר וכל פיגור נצבר, ולכן מונה יורד מציג אחרי חצי שעה מספר שגוי. ספירה לאחור הוא רכיב מתוך רכיבים של כליקס. מה שמורידים הוא רכיב שלם, גם כ-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>