我更改了代码，但它没有;t显示倒计时的秒数

I changed my code but it dosen't show the seconds counting down why?

本文关键字：显示倒计时代码更新时间：2023-09-26

这是我现在使用的JavaScript代码：

<!DOCTYPE html>
<html>
   <head>
      <title>change picture</title>
      <script type = "text/javascript">
      var counter = 7000;
          function displayNextImage() {
              x = (x === images.length - 1) ? 0 : x + 1;
              document.getElementById("img").src = images[x];
          }
          function displayPreviousImage() {
              x = (x <= 0) ? images.length - 1 : x - 1;
              document.getElementById("img").src = images[x];
          }
          function startTimer() {
              counter = setInterval(displayNextImage, counter);
              var count = 60;
              count = count - 1;
              if (count == -1) {
                  clearInterval(counter);
                  return;
              }
              counter = count % 60;
              var minutes = Math.floor(count / 60);
              var hours = Math.floor(minutes / 60);
              minutes %= 60;
              hours %= 60;
              document.getElementById("startTimer").innerHTML = hours + " Hours " + minutes + " Minutes and " + seconds + " Seconds left untill the next news update.";
          }
          var images = [], x = -1;
          images[0] = "http://newsxpressmedia.com/files/theme/radar000116.Gif";
          images[1] = "http://newsxpressmedia.com/files/theme/radarClosed.gif";
      </script>
      <br><br><span id="startTimer"></span><br><br>
   </head>
   <body onload = "startTimer()">
       <img id="img" src="http://newsxpressmedia.com/files/theme/radar000005.Gif">
       <button onclick="displayPreviousImage()">Previous</button>
       <button onclick="displayNextImage()">Next</button>
   </body>
</html>

变量计数器全局设置为7秒。当我加载我的网站时，它会每7秒更改一次图像。

但我想在计时器中显示在网站上的7秒。这一次是7秒，但如果我把计数器设置为50000，那么它应该倒计时5分钟，每次也显示倒计时的秒数。

如何使用一个全局变量计数器？
如果我将使用3个全局变量，持续数小时、分秒，我该如何使其工作？

在这两种方式中，结果应该是相同的，以显示计数器倒计时直到下一个图像。在我的代码中重复的地方，我稍后会修复它，但首先我希望它能正常工作。

编辑

我试过这个：

<!DOCTYPE html>
<html>
   <head>
      <title>change picture</title>
      <script type = "text/javascript">
          function displayNextImage() {
              x = (x === images.length - 1) ? 0 : x + 1;
              document.getElementById("img").src = images[x];
          }
          function displayPreviousImage() {
              x = (x <= 0) ? images.length - 1 : x - 1;
              document.getElementById("img").src = images[x];
          }
          //init vars, 0 hours 0 minutes and 7 seconds.
//alter the times as you need.
var swap_hours = 0;
var swap_minutes = 0;
var swap_seconds = 7;
var down_counter_hours;
var down_counter_minutes;
var down_counter_seconds;
function initTimer() {
    //init the counter according to the required times:
    down_counter_hours = swap_hours;
    down_counter_minutes = swap_minutes;
    down_counter_seconds = swap_seconds;
    //this sets a timer to fire ever 1000 milliseconds - aka 1 second.
    counter = setInterval(switcher, 1000);
}
function switcher() {
    //decrease the timers and init the swap if timer reaches 0.
    down_counter_seconds--;
    //first condition is the stop condition, if counter reaches 0:
    if (down_counter_hours <= 0 && down_counter_minutes <= 0 && down_counter_seconds <= 0) {
        //do the swapping
        swapColor();
        //restart the counter:
        down_counter_hours = swap_hours;
        down_counter_minutes = swap_minutes;
        down_counter_seconds = swap_seconds;
    }
    //second condition, if seconds =0 but minutes >0
    if (down_counter_seconds <= 0 && down_counter_minutes > 0) {
        //decrease one minute
        down_counter_seconds = 60;
        down_counter_minutes--;
    }
    //third condition, if minutes =0 but hours > 0
    if (down_counter_minutes <= 0 && down_counter_hours > 0) {
        //decrease one hour
        down_counter_minutes = 60;
        down_counter_hours--;
    }
    //eventually, output the counter time:
    document.getElementById("div_hours").innerText = down_counter_hours;
    document.getElementById("div_minutes").innerText = down_counter_minutes;
    document.getElementById("div_seconds").innerText = down_counter_seconds;
}
function swapColor() {
    displayNextImage();
}
          var images = [], x = -1;
          images[0] = "http://newsxpressmedia.com/files/theme/radar000116.Gif";
          images[1] = "http://newsxpressmedia.com/files/theme/radarClosed.gif";
      </script>
   </head>
   <body onload = "initTimer()">
       <img id="img" src="http://newsxpressmedia.com/files/theme/radar000005.Gif">
       <button onclick="displayPreviousImage()">Previous</button>
       <button onclick="displayNextImage()">Next</button>
   </body>
</html>

但它不起作用。

首先，有几件事：

不能将数字和超时函数都设置为同一个变量。使用单独的变容管
如果每次都要清除setInterval，请不要使用它。用户CCD_ 2，则它将仅激发一次
如果你每次都要重置它，最好设置一个setInterval，不要清除它，让它运行，只在运行时操作计数器。

实时示例

//init vars, 0 hours 0 minutes and 7 seconds.
//alter the times as you need.
var swap_hours = 0;
var swap_minutes = 0;
var swap_seconds = 7;
var down_counter_hours;
var down_counter_minutes;
var down_counter_seconds;
document.onload = initTimer();
function initTimer() {
    //init the counter according to the required times:
    down_counter_hours = swap_hours;
    down_counter_minutes = swap_minutes;
    down_counter_seconds = swap_seconds;
    //this sets a timer to fire ever 1000 milliseconds - aka 1 second.
    counter = setInterval(switcher, 1000);
}
function switcher() {
    //decrease the timers and init the swap if timer reaches 0.
    down_counter_seconds--;
    //first condition is the stop condition, if counter reaches 0:
    if (down_counter_hours <= 0 && down_counter_minutes <= 0 && down_counter_seconds <= 0) {
        //do the swapping
        swapColor();
        //restart the counter:
        down_counter_hours = swap_hours;
        down_counter_minutes = swap_minutes;
        down_counter_seconds = swap_seconds;
    }
    //second condition, if seconds =0 but minutes >0
    if (down_counter_seconds <= 0 && down_counter_minutes > 0) {
        //decrease one minute
        down_counter_seconds = 59;
        down_counter_minutes--;
    }
    //third condition, if minutes =0 but hours > 0
    if (down_counter_minutes <= 0 && down_counter_hours > 0) {
        //decrease one hour
        down_counter_minutes = 59;
        down_counter_hours--;
    }
    //eventually, output the counter time:
    document.getElementById("div_hours").innerText = down_counter_hours;
    document.getElementById("div_minutes").innerText = down_counter_minutes;
    document.getElementById("div_seconds").innerText = down_counter_seconds;
}
function swapColor() {
    //do your changes here
    var myDiv = document.getElementById("div_switcher");
    if (myDiv.style["background"] == "red") {
        myDiv.style["background"] = "blue"
    } else {
        myDiv.style["background"] = "red"
    }
}