我改变了我的代码，但它没有显示倒计时的原因？

这是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秒ocunting回。这次它是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>

但它不工作。

来源

2014-10-28 yair shalvi

首先，几件事情：

你不能同时设置了数量和超时功能，以相同的变量。使用单独的变量。
不使用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" 
    } 
}

来源

2014-10-28 15:12:03 Banana

香蕉我试图用您的解决方案在我的代码，但它不工作。我想我没有做对。你能看看我做了什么，并告诉我如何解决它？我将我的代码添加到问题中。 – 2014-10-28 16:02:01

你能否更具体地了解它不能正常工作？似乎为我工作正常：http://jsfiddle.net/TheBanana/0trzh854/ – Banana 2014-10-28 16:07:15

是它的工作同样为我太多，但它没有显示计时器它的自我。也在你的链接jsfiddle我看到图像的变化，但我想在图像上方看到计时器计时7秒后，或者如果它是7分钟，然后7分钟后，直到下一个图像变化。例如在要查看的图像上方：小时：00分钟：00秒：00或者可能采用其他格式，并看到计时器计数回到下一张图像。 – 2014-10-28 16:16:32

我改变了我的代码，但它没有显示倒计时的原因？

回答

相关问题