Javascript 我更改了代码，但它没有更改；不显示秒数倒计时为什么？_Javascript_Html

Javascript 我更改了代码，但它没有更改；不显示秒数倒计时为什么？

javascript html

Javascript 我更改了代码，但它没有更改；不显示秒数倒计时为什么？,javascript,html,Javascript,Html,这是我现在使用的JavaScript代码： <!DOCTYPE html> <html> <head> <title>change picture</title> <script type = "text/javascript"> var counter = 7000; function displayNextImage() { x

这是我现在使用的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>


改变形象
var计数器=7000；
函数displayNextImage（）{
x=（x==images.length-1）？0:x+1；
document.getElementById（“img”）.src=images[x]；
}
函数displayPreviousImage（）{
x=（x首先，有几件事：

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




//初始化变量，0小时0分7秒。
//根据需要改变时间。
var交换时间=0；
var交换分钟数=0；
var swap_秒=7；
var停机时间；
var下降计数器分钟数；
var下降\u计数器\u秒；
document.onload=initTimer（）；
函数initTimer（）{
//根据要求的时间初始化计数器：
停机时间=交换时间；
下行计数器分钟数=交换分钟数；
下降计数器秒数=交换秒数；
//这会将计时器设置为每1000毫秒触发一次，也就是1秒。
计数器=设置间隔（开关，1000）；
}
函数切换器（）{
//如果计时器达到0，则减少计时器并初始化交换。
下计数器秒--；
//第一个条件是停止条件，如果计数器达到0：
如果（下柜台）我试图在我的代码中使用你的解决方案，但它不起作用。我想我做得不对。你能看看我做了什么，并告诉我如何修复它吗？我在问题中添加了我的代码。你能更具体地说明它如何不起作用吗？对我来说似乎很好：是的，它对我也起作用它没有显示计时器本身。同样，在你的JSFIDLE链接中，我看到图像发生了变化，但我想在图像上方看到计时器倒数7秒，或者如果是7分钟，则倒数7分钟，直到下一个图像发生变化。例如，在图像上方看到：小时：00分钟：00秒：00，或者以其他格式看到计时器回到下一张图片。哦，你需要将计时器输出到一个元素中，在我的示例中，我以3个divdiv\u hours/minutes/seconds输出计时器，但是你没有在html中添加这些div。。。
<!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>

//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"
    }
}