WordPress中销售倒计时html小部件

效果图

 

代码

<div id="flash-sale-bar-v2">
  <div class="fs-bar">
    <svg class="fs-icon" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M43.7 6.73a5 5 0 0 0-2.19-2.19 5.07 5.07 0 0 0-1.93-.5C38.99 4 38.29 4 37.5 4h-8.84c-1.5 0-2.59 0-3.63.25a9 9 0 0 0-2.6 1.08c-.91.55-1.68 1.32-2.74 2.38L6.31 21.1A53.37 53.37 0 0 0 3.53 24a8.18 8.18 0 0 0-1.65 2.77 8 8 0 0 0 0 4.95c.33 1.03.92 1.9 1.65 2.76.7.83 1.65 1.77 2.78 2.9l4.55 4.55a53.4 53.4 0 0 0 2.9 2.78 8.18 8.18 0 0 0 2.77 1.66 8 8 0 0 0 4.94 0 8.18 8.18 0 0 0 2.77-1.66 53.4 53.4 0 0 0 2.9-2.78l13.39-13.39c1.06-1.06 1.83-1.82 2.39-2.73a9 9 0 0 0 1.07-2.6c.25-1.05.25-2.13.25-3.63v-8.85c0-.78 0-1.48-.05-2.06a5.07 5.07 0 0 0-.5-1.94ZM32 20a4 4 0 1 1 0-8 4 4 0 0 1 0 8Z"/>
    </svg>

    <div class="fs-text">
      <span class="fs-label">Flash sale ends in</span>
      <span id="fs-timer-v2" class="fs-timer">09:03:34</span>
    </div>

    <button type="button" class="fs-close" aria-label="Close">
      <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path d="M38.7 12.12a1 1 0 0 0 0-1.41l-1.4-1.42a1 1 0 0 0-1.42 0L24 21.17 12.12 9.3a1 1 0 0 0-1.41 0l-1.42 1.42a1 1 0 0 0 0 1.41L21.17 24 9.3 35.88a1 1 0 0 0 0 1.41l1.42 1.42a1 1 0 0 0 1.41 0L24 26.83 35.88 38.7a1 1 0 0 0 1.41 0l1.42-1.42a1 1 0 0 0 0-1.41L26.83 24 38.7 12.12Z"/>
      </svg>
    </button>
  </div>
</div>

<style>
  #flash-sale-bar-v2,
  #flash-sale-bar-v2 * {
    box-sizing: border-box;
  }

  #flash-sale-bar-v2 {
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
  }

  #flash-sale-bar-v2 .fs-bar {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #fff1f4 !important;   /* 图一浅粉背景 */
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    line-height: 1;
  }

  #flash-sale-bar-v2 .fs-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    fill: #e10543 !important;         /* 左侧图标红色 */
    display: block;
  }

  #flash-sale-bar-v2 .fs-text {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    white-space: nowrap;
    flex: 1 1 auto;
    font-size: 14px;
    line-height: 20px;
  }

  #flash-sale-bar-v2 .fs-label {
    color: #111111 !important;        /* 文字黑色 */
    font-weight: 600;
  }

  #flash-sale-bar-v2 .fs-timer {
    color: #e10543 !important;        /* 倒计时红色 */
    font-weight: 700;
  }

  #flash-sale-bar-v2 .fs-close {
    width: 16px;
    height: 16px;
    padding: 0;
    margin: 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 16px;
  }

  #flash-sale-bar-v2 .fs-close svg {
    width: 16px;
    height: 16px;
    fill: #e10543 !important;         /* 右侧X红色 */
    display: block;
  }

  @media (max-width: 767px) {
    #flash-sale-bar-v2 .fs-bar {
      padding: 8px 16px;
      gap: 8px;
    }

    #flash-sale-bar-v2 .fs-text {
      font-size: 14px;
      line-height: 20px;
    }

    #flash-sale-bar-v2 .fs-icon,
    #flash-sale-bar-v2 .fs-close,
    #flash-sale-bar-v2 .fs-close svg {
      width: 16px;
      height: 16px;
    }
  }
</style>

<script>
  (function () {
    var timerEl = document.getElementById("fs-timer-v2");
    var closeBtn = document.querySelector("#flash-sale-bar-v2 .fs-close");
    var wrap = document.getElementById("flash-sale-bar-v2");

    var initialTime = "09:03:34"; // 这里改成你要的初始时间

    function toSeconds(str) {
      var arr = str.split(":");
      return parseInt(arr[0], 10) * 3600 + parseInt(arr[1], 10) * 60 + parseInt(arr[2], 10);
    }

    function pad(num) {
      return num < 10 ? "0" + num : String(num);
    }

    function toTime(total) {
      var h = Math.floor(total / 3600);
      var m = Math.floor((total % 3600) / 60);
      var s = total % 60;
      return pad(h) + ":" + pad(m) + ":" + pad(s);
    }

    var resetSeconds = toSeconds(initialTime);
    var currentSeconds = resetSeconds;

    function render() {
      timerEl.textContent = toTime(currentSeconds);
    }

    render();

    setInterval(function () {
      currentSeconds--;
      if (currentSeconds < 0) {
        currentSeconds = resetSeconds;
      }
      render();
    }, 1000);

    closeBtn.addEventListener("click", function () {
      wrap.style.display = "none";
    });
  })();
</script>