如何使用 JS 来回切换到两个不同的倒数计时器
How can I toggle back and forth to Two Different CountDown Timer using JS
希望你一切顺利。我想使用 onclick 按钮方法来回切换 b/w“距离我的生日还有时间”倒数计时器和“距离我的新年还有时间”倒数计时器。代码工作得很好。我所需要的只是当我点击“我生日还剩多少时间”按钮时,计时器应该被更改,反之亦然。有什么办法可以实现此功能吗?非常感谢您的帮助。这是我的代码
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>
为此,您可以为切换状态使用一个额外的变量(此处为 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>
希望你一切顺利。我想使用 onclick 按钮方法来回切换 b/w“距离我的生日还有时间”倒数计时器和“距离我的新年还有时间”倒数计时器。代码工作得很好。我所需要的只是当我点击“我生日还剩多少时间”按钮时,计时器应该被更改,反之亦然。有什么办法可以实现此功能吗?非常感谢您的帮助。这是我的代码
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>
为此,您可以为切换状态使用一个额外的变量(此处为 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>