倒数计时器结束消息

问题描述

几天前，我通过在YouTube上观看视频来创建倒数计时器。倒数计时器是完全完美的，但缺少一件事。当计时器归零时，它将在页面中隐藏。

我想在计时器结束时显示一些文本。就像计时器归零一样，计时器就会隐藏并显示以下消息：“您来不及了。和我们在一起”。

这是我需要进行一些修改的.js代码。

const dayDisplay = document.querySelector(".days .number");
const hourDisplay = document.querySelector(".hours .number");
const minuteDisplay = document.querySelector(".minutes .number");
const secondDisplay = document.querySelector(".seconds .number");

const countdownContainer = document.querySelector(".countdown-container");

const endDate = new Date("August 04 2020 10:38:00");
let saleEnded = false;

const updateTimer = () => {

if(countdownContainer) {

let currentDate = new Date();
let difference = endDate.getTime() - currentDate.getTime();

if (difference <= 1000) {
    saleEnded = true;
}

const second = 1000;
const minute = second * 60;
const hour = minute * 60;
const day = hour * 24;

let newDay = Math.floor(difference / day);
let newHour = Math.floor((difference % day) / hour);
let newMiute = Math.floor((difference % hour) / minute);
let newSecond = Math.floor((difference % minute) / second);

dayDisplay.innerText = newDay < 10 ? "0" + newDay : newDay;
hourDisplay.innerText = newHour < 10 ? "0" + newHour : newHour;
minuteDisplay.innerText = newMiute < 10 ? "0" + newMiute : newMiute;
secondDisplay.innerText = newSecond < 10 ? "0" + newSecond : newSecond;
  };
};

setInterval(() => {
   if (!saleEnded) {
   updateTimer();
 } else {
   countdownContainer.style.display = "block";
 }
 },1000);

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

countdowntimer javascript