Question

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

但它没有用。

Answer 1

首先，一些事情：

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

的 Live Example

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

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

1 个答案: