Question

你好，我是新手；我想在网页中添加一个按钮；通过单击它，将启动一个十秒钟的计时器，当它停止时，一条消息将显示为“再次单击”。但是图片没有改变，但是计时器工作正常;我该怎么办？

我希望每次点击随机更改图片，并在每次点击计时器上运行。

我的html是这样的：

var ads1 = [
  '<img src="https://pixabay.com/photos/water-norway-landscape-nature-4013446/" width="390" height="200" > ',
  '<img src="https://pixabay.com/go/?t=image-details-adobe&id=178395371" width="390" height="200" > ',
  '<img src="https://stock.adobe.com/images/id/138587767?as_campaign=pixabay&as_content=api&tduid=c66573971e4ad1263047e381a1b74ca9&as_channel=affiliate&as_campclass=redirect&as_source=arvato" width="390" height="200" > '


]

function ads1Name() {
  var randomNumber = Math.floor(Math.random() * (ads1.length));
  document.getElementById('ads1Display').innerHTML = ads1[randomNumber];
}


var ads2 = [
  '<img src="https://pixabay.com/photos/water-norway-landscape-nature-4013446/" width="390" height="200" > ',
  '<img src="https://pixabay.com/go/?t=image-details-adobe&id=178395371" width="390" height="200" > ',
  '<img src="https://stock.adobe.com/images/id/138587767?as_campaign=pixabay&as_content=api&tduid=c66573971e4ad1263047e381a1b74ca9&as_channel=affiliate&as_campclass=redirect&as_source=arvato" width="390" height="200" > '


]

function ads2Name() {
  var randomNumber = Math.floor(Math.random() * (ads2.length));
  document.getElementById('ads2Display').innerHTML = ads2[randomNumber];
}


var ads3 = [
  '<img src="https://pixabay.com/photos/water-norway-landscape-nature-4013446/" width="390" height="200" > ',
  '<img src="https://pixabay.com/go/?t=image-details-adobe&id=178395371" width="390" height="200" > ',
  '<img src="https://stock.adobe.com/images/id/138587767?as_campaign=pixabay&as_content=api&tduid=c66573971e4ad1263047e381a1b74ca9&as_channel=affiliate&as_campclass=redirect&as_source=arvato" width="390" height="200" > '


]

function ads3Name() {
  var randomNumber = Math.floor(Math.random() * (ads3.length));
  document.getElementById('ads3Display').innerHTML = ads3[randomNumber];
}

<body onLoad="ads1Name(); ads2Name(); ads3Name();">
  <p id="timer">Click Now</p>
  <button id="up" onclick="timedText(); up('100')">Click Here !!</button>

  <div>
    <input id="myNumber" value="0" />
    <table>
      <tr>
        <td id="ads1Display"></td>
        <td id="ads1Display"></td>
        <td id="ads1Display"></td>
      </tr>
    </table>
  </div>


  <script>
    function timedText() {
      setTimeout(myTimeout1, 900)
      setTimeout(myTimeout2, 1800)
      setTimeout(myTimeout3, 2700)
      setTimeout(myTimeout4, 3600)
      setTimeout(myTimeout5, 4500)
      setTimeout(myTimeout6, 5400)
      setTimeout(myTimeout7, 6300)
      setTimeout(myTimeout8, 7200)
      setTimeout(myTimeout9, 8100)

    }

    function myTimeout1() {
      document.getElementById("timer").innerHTML = "8 second";
    }

    function myTimeout2() {
      document.getElementById("timer").innerHTML = "7 seconds";
    }

    function myTimeout3() {
      document.getElementById("timer").innerHTML = "6 seconds";
    }

    function myTimeout4() {
      document.getElementById("timer").innerHTML = "5 seconds";
    }

    function myTimeout5() {
      document.getElementById("timer").innerHTML = "4 seconds";
    }

    function myTimeout6() {
      document.getElementById("timer").innerHTML = "3 seconds";
    }

    function myTimeout7() {
      document.getElementById("timer").innerHTML = "2 seconds";
    }

    function myTimeout8() {
      document.getElementById("timer").innerHTML = "1 seconds";
    }

    function myTimeout9() {
      document.getElementById("timer").innerHTML = "Click again";
    }
  </script>

  <script>
    function up(max) {
      document.getElementById("myNumber").value = parseInt(document.getElementById("myNumber").value) + 1;
      if (document.getElementById("myNumber").value >= parseInt(max)) {
        document.getElementById("myNumber").value = max;
      }
    }
  </script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
  <script src="demp.js"></script>

</body>

Answer 1

您可以使用setTimeout代替setInterval，将其放入变量中，并在计时器为0或用户再次单击时将其清除：

var interval;

function timedText() {
  var i = 9;
  clearInterval(interval);

  interval = setInterval(() => {
    i--;
    if (i === 0) {
      clearInterval(interval);
      document.getElementById("timer").innerHTML = "Click again";
    } else {
      document.getElementById("timer").innerHTML = i + " second";
    }
  }, 1000);
}

var interval;

function timedText() {
  var i = 9;
  clearInterval(interval);

  interval = setInterval(() => {
    i--;
    if (i === 0) {
      clearInterval(interval);
      document.getElementById("timer").innerHTML = "Click again";
    } else {
      document.getElementById("timer").innerHTML = i + " second";
    }
  }, 1000);
}

function up(max) {
  document.getElementById("myNumber").value = parseInt(document.getElementById("myNumber").value) + 1;
  if (document.getElementById("myNumber").value >= parseInt(max)) {
    document.getElementById("myNumber").value = max;
  }
}
var ads1 = [
  '<img src="https://pixabay.com/photos/water-norway-landscape-nature-4013446/" width="390" height="200" > ',
  '<img src="https://pixabay.com/go/?t=image-details-adobe&id=178395371" width="390" height="200" > ',
  '<img src="https://stock.adobe.com/images/id/138587767?as_campaign=pixabay&as_content=api&tduid=c66573971e4ad1263047e381a1b74ca9&as_channel=affiliate&as_campclass=redirect&as_source=arvato" width="390" height="200" > '


]

function ads1Name() {
  var randomNumber = Math.floor(Math.random() * (ads1.length));
  document.getElementById('ads1Display').innerHTML = ads1[randomNumber];
}


var ads2 = [
  '<img src="https://pixabay.com/photos/water-norway-landscape-nature-4013446/" width="390" height="200" > ',
  '<img src="https://pixabay.com/go/?t=image-details-adobe&id=178395371" width="390" height="200" > ',
  '<img src="https://stock.adobe.com/images/id/138587767?as_campaign=pixabay&as_content=api&tduid=c66573971e4ad1263047e381a1b74ca9&as_channel=affiliate&as_campclass=redirect&as_source=arvato" width="390" height="200" > '


]

function ads2Name() {
  var randomNumber = Math.floor(Math.random() * (ads2.length));
  document.getElementById('ads2Display').innerHTML = ads2[randomNumber];
}


var ads3 = [
  '<img src="https://pixabay.com/photos/water-norway-landscape-nature-4013446/" width="390" height="200" > ',
  '<img src="https://pixabay.com/go/?t=image-details-adobe&id=178395371" width="390" height="200" > ',
  '<img src="https://stock.adobe.com/images/id/138587767?as_campaign=pixabay&as_content=api&tduid=c66573971e4ad1263047e381a1b74ca9&as_channel=affiliate&as_campclass=redirect&as_source=arvato" width="390" height="200" > '


]

function ads3Name() {
  var randomNumber = Math.floor(Math.random() * (ads3.length));
  document.getElementById('ads3Display').innerHTML = ads3[randomNumber];
}

  <p id="timer">Click Now</p>
  <button id="up" onclick="timedText(); up('100')">Click Here !!</button>

  <div>
    <input id="myNumber" value="0" />
    <table>
      <tr>
        <td id="ads1Display"></td>
        <td id="ads1Display"></td>
        <td id="ads1Display"></td>
      </tr>
    </table>
  </div>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
  <script src="demp.js"></script>

我想要一个按钮中有两个功能

1 个答案: