Question

我的网站上有这个Javascript代码：

<!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];
          }

          function startTimer() {
              setInterval(displayNextImage, 10000);
          }

          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 = "startTimer()">
       <img id="img" src="http://newsxpressmedia.com/files/theme/radar000005.Gif">
       <button onclick="displayPreviousImage()">Previous</button>
       <button onclick="displayNextImage()">Next</button>
   </body>
</html>

我希望每个图像上方显示以00:00格式计算秒数为10的计时器分钟的第一个00和秒的第二个00。

在这种情况下只有几秒钟，但我想显示00:00，只有正确的00才会计算，因为现在只有几秒钟。

计时器将每10秒重置一次，显示的图像将会改变。

Answer 1

好的，请尝试使用此代码，它会对您有所帮助：

<强> JAVASCRIPT：

var counter = 0;

setInterval(function () {
if (counter<10)
++counter;
else counter =0;
document.getElementById("count").innerHTML="00:"+counter;
}, 1000);

<强> HTML：

<p id="count"></p>

您可以对其进行测试here。

<强> 编辑：

为了使其适合您的问题，请尝试使用此功能：

function swap(one, two) {
document.getElementById(one).style.display = 'block';
document.getElementById(two).style.display = 'none';
}

您的代码将是：

setInterval(function () {
if (counter<10){
    ++counter;
} else {
    counter =0;
    swap(one,two);
}
    document.getElementById("count").innerHTML="00:"+counter;
}, 1000);

和＆＃34;一个＆＃34;和＆＃34;两个＆＃34;这是你的imgages标签的ID。

如何显示计时10秒的计时器

1 个答案: