社区 › 站长之家 › 子比主题 – 倒计时弹窗美化样式

飞流 发表于 2025-10-10 19:00:01

子比主题 – 倒计时弹窗美化样式

腾飞博客考虑到其他站点的使用，没有去调用子比主题的modal的弹窗，是自己加的弹窗，这是一款带有倒计时的弹窗，非常方便自己站长可以去卖自己的商品优惠提醒，有技术的按钮自己改一下用在自己的网站，喜欢的自行部署吧！

代码部署
定位：WP后台–>>外观–>>小工具–>>自定义HTML，建议将下面的代码放到我们的所有页面-底部全宽度
<style>
.popup{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:9999;justify-content:center;align-items:center;padding:20px;box-sizing:border-box;background-image:url(https://img.alicdn.com/imgextra/i3/2210123621994/O1CN0126s1WY1QbIqmRMFsX_!!2210123621994.png)}.popup-content{background:white;max-width:500px;width:100%;border-radius:10px;padding:30px;box-shadow:0 0 20px rgba(0,0,0,0.1);position:relative}.popup h2{color:#2c3e50;margin-bottom:15px;text-align:center}.offset-right{text-align:center;font-size:17px;color:#171717;margin:10px 0}.countdown{text-align:center;font-size:20px;color:#e74c3c;margin:20px 0}.btn-container{display:flex;gap:10px;margin-top:20px}.popup-btn{flex:1;padding:12px 20px;border:none;border-radius:5px;font-size:16px;cursor:pointer;transition:background 0.3s}.know-btn{background:#FF0D0D;color:white}.know-btn:hover{background:#4C01FA}.hide-day-btn{background:#2c3e50;color:white}.hide-day-btn:hover{background:#34495e}
</style>
<div class="popup" id="myPopup">
    <div class="popup-content">
      <h2>永久钻石会员限时五折活动</h2>
      <div class="offset-right">新站开发中后期本站会员可转移</div>
      <div class="offset-right">通知凡是四月份开的会员提供订单找我补取</div>
      <div class="countdown" id="countdown">倒计时：--天--时--分--秒</div>
      
      <div class="btn-container">
            <button class="popup-btn know-btn" onclick="closeTemporarily()">我知道了</button>
            <button class="popup-btn hide-day-btn" onclick="closeForDay()">一天内不显示</button>
      </div>
    </div>
</div>

<script>
window.onload = function() {
    checkPopupDisplay();
    initCountdown();
};

function checkPopupDisplay() {
    const lastShown = localStorage.getItem('popupLastShown');
    const now = new Date().getTime();
    const oneDay = 24 * 60 * 60 * 1000;

    if (!lastShown || (now - lastShown) >= oneDay) {
      showPopup();
    }
}

function initCountdown() {
    const endTime = new Date("2025-05-25T23:59:59").getTime();
    const countdownElement = document.getElementById('countdown');

    function updateCountdown() {
      const now = new Date().getTime();
      const distance = endTime - now;

      if (distance > 0) {
            const days = Math.floor(distance / (1000 * 60 * 60 * 24));
            const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((distance % (1000 * 60)) / 1000);

            countdownElement.textContent = `倒计时：${days}天${hours}时${minutes}分${seconds}秒`;
      } else {
            countdownElement.textContent = "活动已结束";
            clearInterval(countdownInterval);
      }
    }

    const countdownInterval = setInterval(updateCountdown, 1000);
    updateCountdown();
}

function showPopup() {
    const popup = document.getElementById('myPopup');
    popup.style.display = 'flex';
}

function closeTemporarily() {
    const popup = document.getElementById('myPopup');
    popup.style.display = 'none';
}

function closeForDay() {
    const popup = document.getElementById('myPopup');
    popup.style.display = 'none';
    localStorage.setItem('popupLastShown', new Date().getTime());
}
</script>

查看完整版本: 子比主题 – 倒计时弹窗美化样式