我怎样才能得到这个倒计时来隐藏倒计时达到1后的数字。2是我想显示的最后一个数字。倒计时需要一直计数到-1，只是不显示在屏幕上。图像将完成剩下的工作。我一直在努力让它发挥作用，所以我使用了一个相当简单的计数器。当我让一切按照我想要的方式工作时，我将把计数器更改为倒计时时钟，该时钟使用用户日期、时间和时区来倒计时到我输入倒计时的日期。感谢您的帮助。
这是小提琴的链接。
https://jsfiddle.net/trino98/db4086xn/50/
function getImg(num) {
var digits = String(num).split(""),
text = "";
// Getting the path to the numbers
for (var i = 0; i < digits.length; i++) {
text += '<img alt="' + digits[i] + '" src="https://okoutdoors.com/img/' + digits[i] + '.png" class="digits"/>';
}
return text;
}
// Images to change to
var oneDaySrc = function() {
document.getElementById("image").src = "https://okoutdoors.com/img/halloween-oneday.gif";
}
var duringSrc = function() {
document.getElementById("image").src = "https://okoutdoors.com/img/halloween-during.gif";
}
var afterSrc = function() {
document.getElementById("image").src = "https://okoutdoors.com/img/catandmoonl.jpg";
}
// Change the image as the count down counts down
var count = 5;
var counter = setInterval(timer, 1000);
function timer() {
count = count - 1;
if (count == 1) {
oneDaySrc();
} else if (count == 0) {
duringSrc();
} else if (count < 0) {
clearInterval(counter);
afterSrc();
}
document.getElementById("timer").innerHTML = getImg(count);
}body {
background-color: black;
color: yellow;
}
.imageOne {
width: 40%;
transform: translate(74%, 00%);
}
.imageTwo {
position: absolute;
top: 123.5%;
left: 50%;
transform: translate(-40%, -50%);
width: 12%;
height: auto;
}
.digits {
max-width: 150px;
width: 50%;
height: auto;
}<img id="image" class="imageOne" src="https://okoutdoors.com/img/halloween-before.gif">
<br>
<div><span class="imageTwo" id="timer"></span></div>如果我告诉它在“if”或第一个“else if”语句中清除Interval，它会停止计数器。我需要它来隐藏数字，但继续计数。我需要它来清除间隔或在-1处停止计数。
假设我理解你的问题，你可以更改
getImgfunction getImg(num) {
if (num < 1) {
return "<img src='https://raw.githubusercontent.com/make-github-pseudonymous-again/pixels/main/1x1%23000000.png' class='digits' />";
}
var digits = String(num).split(""),
text = "";
// Getting the path to the numbers
for (var i = 0; i < digits.length; i++) {
text += '<img alt="' + digits[i] + '" src="https://okoutdoors.com/img/' + digits[i] + '.png" class="digits"/>';
}
return text;
}
// Images to change to
var oneDaySrc = function() {
document.getElementById("image").src = "https://okoutdoors.com/img/halloween-oneday.gif";
}
var duringSrc = function() {
document.getElementById("image").src = "https://okoutdoors.com/img/halloween-during.gif";
}
var afterSrc = function() {
document.getElementById("image").src = "https://okoutdoors.com/img/catandmoonl.jpg";
}
// Change the image as the count down counts down
var count = 5;
var counter = setInterval(timer, 1000);
function timer() {
count = count - 1;
if (count == 1) {
oneDaySrc();
} else if (count == 0) {
duringSrc();
} else if (count < 0) {
clearInterval(counter);
afterSrc();
}
document.getElementById("timer").innerHTML = getImg(count);
}body {
background-color: black;
color: yellow;
}
p {
text-align: center;
font-size: 40px;
}
h1.u-center {
font-family: serif;
display: block;
font-size: 2em;
margin-top: 0.10em;
margin-bottom: 0.67em;
text-align: center;
text-decoration: underline;
font-weight: bold;
color: #254441;
font-style: italic;
}
hr {
display: block;
text-align: center;
width: 75%;
border-style: inset;
border-width: 2px;
border-color: #ff5f04;
}
.catAndMoon {
max-width: 100px;
width: 25%;
height: auto;
}
.image {
max-width: 200px;
width: 40%;
height: auto;
}
.imageOne {
width: 40%;
transform: translate(74%, 00%);
}
.imageTwo {
position: absolute;
top: 123.5%;
left: 50%;
transform: translate(-40%, -50%);
width: 12%;
height: auto;
}
.digits {
max-width: 150px;
width: 50%;
height: auto;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Image Countdown</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1 class="u-center">Image Countdown</h1>
<hr class="1">
<p align="center">
<img class="catAndMoon" src="https://www.okoutdoors.com/img/catandmoonr.jpg" alt="Happy">
<img class="image" src="https://www.okoutdoors.com/img/hallo_spooky.jpg" alt="Happy Halloween">
<img class="catAndMoon" src="https://www.okoutdoors.com/img/catandmoonr.jpg" alt="Halloween">
</p>
<p align="center">
<img class="image" src="https://www.okoutdoors.com/img/darkjack.gif" style="width:25%" alt="Spooky">
</p>
<!-- <div id="newcountdown"></div> -->
<img id="image" class="imageOne" src="https://okoutdoors.com/img/halloween-before.gif">
<br>
<div><span class="imageTwo" id="timer"></span></div>
</body>
</html>