Hướng Dẫn Tạo Section Flash Sale Dịp Tết Bắt Mắt

Đoạn HTML kết hợp JavaScript dưới đây sẽ tự động đặt lại đồng hồ đếm ngược cho một sự kiện Flash Sale trên web WordPress. Khi thời gian đếm ngược về 0, nó sẽ tự động đặt lại và bắt đầu một chu kỳ mới.

Hướng dẫn tạo Section Flash Sale dịp tết bắt mắt

Làm theo các bước sau đây

Tạo HTML

<div class="col-flash-sale">
    <div class="col-inner">
        <div class="flash-sale">
            <h2>
                <span class="icon"><img draggable="false" data-mce-resize="false" data-mce-placeholder="1" data-wp-emoji="1" class="emoji" alt="⚡" src="https://s.w.org/images/core/emoji/15.0.3/svg/26a1.svg"></span> Flash Sale!
            </h2>
            <div class="countdown" id="countdown">
                <span class="time-segment" id="hours">00</span>
                <span>:</span>
                <span class="time-segment" id="minutes">00</span>
                <span>:</span>
                <span class="time-segment" id="seconds">00</span>
            </div>
        </div>
        <div class="btn-xem-them">
            <a href="https://tunlamweb.com/" class="button primary is-link lowercase"><span>Xem thêm</span><i class="icon-angle-right" aria-hidden="true"></i></a>
        </div>
    </div>
</div>

<h2>

<span class="icon"><img draggable="false" data-mce-resize="false" data-mce-placeholder="1" data-wp-emoji="1" class="emoji" alt="⚡" src="https://s.w.org/images/core/emoji/15.0.3/svg/26a1.svg"></span> Flash Sale!

</h2>

</div>

</div>

CSS thêm vào file style.css

.col-flash-sale .countdown {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    color: #ffffff;
    margin-top: 0;
    margin-left: 15px;
}
.col-flash-sale .flash-sale {
    display: flex;
    align-items: center;
}
.col-flash-sale .time-segment {
    display: inline-block;
    text-align: center;
    border: 2px solid #fff;
    border-radius: 5px;
    margin: 0 5px;
    background-color: #f44336;
    color: #fff;
    font-weight: bold;
    padding: 0 10px;
    font-size: 20px;
}
.col-flash-sale .icon {
    font-size: 24px;
    color: #f44336;
    animation: blink 1s infinite;
}
.col-flash-sale .col-inner {
    background-image: url(http://tunlamweb.com/wp-content/uploads/2024/12/banner-header.webp);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px;
    padding: 0 15px;
}
.col-flash-sale a.button {
    margin: 0 !important;
    color: white;
}
.col-flash-sale h2{
    margin-bottom: 0px;
    color: #ffd215;
    font-weight: 600;
}

.col-flash-sale .countdown {

display: flex;

justify-content: center;

align-items: center;

font-size: 2em;

color: #ffffff;

margin-top: 0;

margin-left: 15px;

}

.col-flash-sale .flash-sale {

display: flex;

align-items: center;

}

.col-flash-sale .time-segment {

display: inline-block;

text-align: center;

border: 2px solid #fff;

border-radius: 5px;

margin: 0 5px;

background-color: #f44336;

color: #fff;

font-weight: bold;

padding: 0 10px;

font-size: 20px;

}

.col-flash-sale .icon {

font-size: 24px;

color: #f44336;

animation: blink 1s infinite;

}

.col-flash-sale .col-inner {

background-image: url(http://tunlamweb.com/wp-content/uploads/2024/12/banner-header.webp);

color: white;

display: flex;

justify-content: space-between;

align-items: center;

border-radius: 8px;

padding: 0 15px;

}

.col-flash-sale a.button {

margin: 0 !important;

color: white;

}

.col-flash-sale h2{

margin-bottom: 0px;

color: #ffd215;

font-weight: 600;

}

Tiếp theo là JS cho chức năng này bạn có thể thêm ở footer.php

<script type="text/javascript">
  const saleDuration = 6 * 60 * 60 * 1000; // 6 giờ (tính bằng mili giây)
let countdownTime = saleDuration;

function formatTime(ms) {
    const hours = Math.floor(ms / (1000 * 60 * 60));
    const minutes = Math.floor((ms % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((ms % (1000 * 60)) / 1000);
    return { hours, minutes, seconds };
}

function updateCountdown() {
    const { hours, minutes, seconds } = formatTime(countdownTime);

    document.getElementById("hours").textContent = hours.toString().padStart(2, '0');
    document.getElementById("minutes").textContent = minutes.toString().padStart(2, '0');
    document.getElementById("seconds").textContent = seconds.toString().padStart(2, '0');

    countdownTime -= 1000;

    if (countdownTime < 0) {
        countdownTime = saleDuration; // Reset thời gian khi về 0
    }

    setTimeout(updateCountdown, 1000);
}

updateCountdown();

</script>

const saleDuration = 6 * 60 * 60 * 1000; // 6 giờ (tính bằng mili giây)

let countdownTime = saleDuration;

function formatTime(ms) {

const hours = Math.floor(ms / (1000 * 60 * 60));

const minutes = Math.floor((ms % (1000 * 60 * 60)) / (1000 * 60));

const seconds = Math.floor((ms % (1000 * 60)) / 1000);

return { hours, minutes, seconds };

}

function updateCountdown() {

const { hours, minutes, seconds } = formatTime(countdownTime);

document.getElementById("hours").textContent = hours.toString().padStart(2, '0');

document.getElementById("minutes").textContent = minutes.toString().padStart(2, '0');

document.getElementById("seconds").textContent = seconds.toString().padStart(2, '0');

countdownTime -= 1000;

if (countdownTime < 0) {

countdownTime = saleDuration; // Reset thời gian khi về 0

}

setTimeout(updateCountdown, 1000);

}

updateCountdown();

</script>

Xem thêm bài viết khác

Giải thích:

HTML:
- #countdown là nơi hiển thị thời gian đếm ngược.
- Giao diện đơn giản với một vùng hiển thị cho Flash Sale.
CSS:
- Định dạng giao diện đồng hồ đếm ngược đẹp mắt.
JavaScript:
- saleDuration là thời gian flash sale (ở đây là 6 giờ).
- Hàm formatTime(ms) chuyển đổi thời gian từ mili giây sang định dạng giờ, phút, giây.
- Hàm updateCountdown() giảm thời gian mỗi giây, hiển thị lên giao diện và tự động reset khi về 0.

Cách hoạt động:

Khi thời gian đếm ngược hết, nó sẽ tự động khởi động lại với thời gian cài đặt ban đầu (6 giờ).
Bạn có thể thay đổi saleDuration để thiết lập thời gian Flash Sale mong muốn.

Hãy thử và kiểm tra! Nếu cần thêm tính năng hoặc điều chỉnh, hãy cho tôi biết.

Theo dỗi tên trên Fanpage và Youtube của mình nhé.