如何使用 JS 来回切换到两个不同的倒数计时器答案

【问题标题】：How can I toggle back and forth to Two Different CountDown Timer using JS如何使用 JS 来回切换到两个不同的倒数计时器
【发布时间】：2021-09-03 07:50:43
【问题描述】：

我希望你做得很好。我想使用 onclick 按钮方法来回切换“距离我的生日还剩时间”倒数计时器和“距离我的新年还有时间”倒数计时器。代码工作得很好。我所需要的只是当我单击“距离我的生日还剩时间”按钮时，应该更改计时器，反之亦然。有什么方法可以实现这个功能吗？您的帮助总是值得赞赏的。这是我的代码

const newYears = "18 Aug 2022";

const daysEl = document.getElementById("days");
const hoursEl = document.getElementById("hours");
const minsEl = document.getElementById("minutes");
const secsEl = document.getElementById("seconds");

function countdown() {
  const newYearsDate = new Date(newYears);
  const currentDate = new Date();
  const totalSeconds = (newYearsDate - currentDate) / 1000;

  const days = Math.floor(totalSeconds / 3600 / 24);
  const hours = Math.floor(totalSeconds / 3600) % 24;
  const minutes = Math.floor(totalSeconds / 60) % 60;
  const seconds = Math.floor(totalSeconds) % 60;

  daysEl.innerHTML = days;
  hoursEl.innerHTML = formate(hours);
  minsEl.innerHTML = formate(minutes);
  secsEl.innerHTML = formate(seconds);
}

function formate(time) {
  if (time < 10) {
    return (`0${time}`);
  } else {
    return time
  }
}

countdown()

setInterval(countdown, 1000)

* {
  box-sizing: border-box;
  text-transform: capitalize;
}

body {
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

h1 {
  font-weight: normal;
  font-size: 2.5rem;
  margin-top: -8rem;
}

.countdown-container {
  display: flex;
}

.big-text {
  font-weight: bold;
  font-size: 4rem;
  line-height: 1;
  margin: 0 1.5rem;
}

.countdown-el {
  text-align: center;
}

.countdown-el span {
  font-size: 0.8rem;
}

.button {
  top: 2rem;
  display: inline-block;
  border: 0;
  outline: 0;
  padding: 12px 16px;
  line-height: 1.4;
  background: linear-gradient(#4d4d4d, #2f2f2f);
  border-radius: 5px;
  border: 1px solid black;
  font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
  color: white !important;
  font-size: 1.2em;
  cursor: pointer;
  /* Important part */
  position: relative;
  transition: padding-right 0.3s ease-out;
}

<h1>Time left To My next Birthday </h1>

<div class="countdown-container">
  <div class="countdown-el days-c">
    <p class="big-text" id="days">0</p>
    <span>days</span>
  </div>
  <div class="countdown-el hours-c">
    <p class="big-text" id="hours">0</p>
    <span>hours</span>
  </div>
  <div class="countdown-el mins-c">
    <p class="big-text" id="minutes">0</p>
    <span>minutes</span>
  </div>
  <div class="countdown-el sec-c">
    <p class="big-text" id="seconds">0</p>
    <span>seconds</span>
  </div>
</div>

<button class="button" onclick="">Time left to new year</button>

【问题讨论】：

没有“我的生日还剩时间”按钮。切换后是否应该重命名按钮？
是的，我只需要一个按钮，在每次将计数器计时器转换为“我的生日剩下的时间”后，我都应该重命名该按钮，反之亦然。我的意思是当我将 Counter Timer 从“Time left to NExt year”转换为“Time left to mybirthday”时，按钮文本应该相应地转换。

标签： javascript html jquery web-deployment web-frontend

【解决方案1】：

为此，您可以为切换状态使用一个附加变量（此处为 birthday），为processed_date 使用一个变量，并为其分配日期（生日或明年）：

const nextBirthday = "18 Aug 2022";
const newYear = "01 Jan 2022";

let birthday = true;
let processed_date = nextBirthday;
...
function countdown() {
  const newYearsDate = new Date(processed_date);
  ...
}

在事件处理程序中，您只需要根据切换状态切换标题和按钮的processed_date 和textContent，然后反转切换状态：

toggle_button.addEventListener('click', function() {
  processed_date = birthday ? newYear : nextBirthday;
  heading.querySelector('span').textContent = birthday ? 'new year' : 'my next birthday';
  toggle_button.querySelector('span').textContent = birthday ? 'my birthday' : 'new year';
  birthday = !birthday; 
});

工作示例：（较小且没有负边距用于演示）

const nextBirthday = "18 Aug 2022";
const newYear = "01 Jan 2022";

let processed_date = nextBirthday;
let birthday = true;

const daysEl = document.getElementById("days");
const hoursEl = document.getElementById("hours");
const minsEl = document.getElementById("minutes");
const secsEl = document.getElementById("seconds");
const heading = document.querySelector('h1');
const toggle_button = document.querySelector("button");

function countdown() {
  const newYearsDate = new Date(processed_date);
  const currentDate = new Date();
  const totalSeconds = (newYearsDate - currentDate) / 1000;

  const days = Math.floor(totalSeconds / 3600 / 24);
  const hours = Math.floor(totalSeconds / 3600) % 24;
  const minutes = Math.floor(totalSeconds / 60) % 60;
  const seconds = Math.floor(totalSeconds) % 60;

  daysEl.innerHTML = days;
  hoursEl.innerHTML = formate(hours);
  minsEl.innerHTML = formate(minutes);
  secsEl.innerHTML = formate(seconds);
}

function formate(time) {
  if (time < 10) {
    return (`0${time}`);
  } else {
    return time
  }
}

toggle_button.addEventListener('click', function() {
  processed_date = birthday ? newYear : nextBirthday;
  heading.querySelector('span').textContent = birthday ? 'new year' : 'my next birthday';
  toggle_button.querySelector('span').textContent = birthday ? 'my next birthday' : 'new year';
  birthday = !birthday;
  countdown();   //not necessary - only for imidiate change instead of waiting 1 second
});

countdown();

setInterval(countdown, 1000);

* {
  box-sizing: border-box;
  text-transform: capitalize;
  font-size: 10px;
}

body {
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

h1 {
  font-weight: normal;
  font-size: 2.5rem;
}

.countdown-container {
  display: flex;
}

.big-text {
  font-weight: bold;
  font-size: 4rem;
  line-height: 1;
  margin: 0 1.5rem;
}

.countdown-el {
  text-align: center;
}

.countdown-el span {
  font-size: 0.8rem;
}

.button {
  top: 2rem;
  display: inline-block;
  border: 0;
  outline: 0;
  padding: 12px 16px;
  line-height: 1.4;
  background: linear-gradient(#4d4d4d, #2f2f2f);
  border-radius: 5px;
  border: 1px solid black;
  font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
  color: white !important;
  font-size: 1.2em;
  cursor: pointer;
  /* Important part */
  position: relative;
  transition: padding-right 0.3s ease-out;
}

span {
  font-size: inherit;
}

<h1>Time left To <span>My next Birthday</span></h1>

<div class="countdown-container">
  <div class="countdown-el days-c">
    <p class="big-text" id="days">0</p>
    <span>days</span>
  </div>
  <div class="countdown-el hours-c">
    <p class="big-text" id="hours">0</p>
    <span>hours</span>
  </div>
  <div class="countdown-el mins-c">
    <p class="big-text" id="minutes">0</p>
    <span>minutes</span>
  </div>
  <div class="countdown-el sec-c">
    <p class="big-text" id="seconds">0</p>
    <span>seconds</span>
  </div>
</div>

<button class="button">Time left to <span>new year</span></button>

【讨论】：