倒数计时器结束消息

问题描述

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

解决方法

尝试一下？

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