效果图
代码
<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>