倒数计时器结束消息

Question

几天前，我通过观看 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);

Answer 1

试试这个？

 setInterval(() => {
     if (!saleEnded) {
    updateTimer();
 } else {
   countdownContainer.style.display = "block";
   countdownContainer.innetHTML="You are too late. Stay with us";
 }
 }, 1000);