单击按钮更改计时器时间

Question

我目前正在尝试建立一个站点，该站点将具有可根据计时器切换的交替图像。我有一个功能设置的原型，但我想做一些额外的事情。我想要它，以便当我单击按钮时图像会自动更改。我设置了这个，但是现在我遇到了用户可能没有足够的时间来查看它的问题，所以我希望能够设置计时器，以便在单击按钮时它会回到设置的时间图像发生变化时，用户可以获得整整 30 秒的时间。有没有办法做到这一点？

点击按钮时基本上时间 = 30 或 60

    time = 60;
interval = setInterval(function() {
  time--;
  document.getElementById('Label1').innerHTML =
    "" + time + " seconds"
    if (time == 0) {
      document.getElementById('downtown').click ();
      time = 60;
    } else if (time == 30)
      document.getElementById('rockBottom').click();
}, 1000)

https://codepen.io/Aidan_Monner/pen/JjGMEPe

Answer 1

time = 60;
function Timer(fn, t) {
    var timerObj = setInterval(fn, t);
}
var timer = new Timer(function() {
    time--;
  document.getElementById('Label1').innerHTML =
    "" + time + " seconds"
    if (time == 0) {
      down();
      time = 60;
    } else if (time == 30)          document.getElementById('myImage').src='https://pbs.twimg.com/media/EVXFdi4WsAEqQEs.jpg';
}, 1000);
function rockbo() { 
 time = 60;
document.getElementById('myImage').src='https://pbs.twimg.com/media/EVXFdi4WsAEqQEs.jpg';
}
function down() { 
 time = 60;
document.getElementById('myImage').src='https://pbs.twimg.com/media/EVXFdi3WsAIIYse.jpg';
}

<p id='Label1'> Time </p>
  
  <img id="myImage" src="https://pbs.twimg.com/media/EVXFdi3WsAIIYse.jpg" height="200" width="350">
  
  
  <button id="rockBottom" onclick="rockbo()"> Rock Bottom </button>

<button id="downtown" onclick="down()"> Downtown Bikini Bottom </button>

应该是这样的：

HTML 正文：

<p id='Label1'> Time </p>
  
  <img id="myImage" src="https://pbs.twimg.com/media/EVXFdi3WsAIIYse.jpg" height="200" width="350">
  
  
  <button id="rockBottom" onclick="rockbo()"> Rock Bottom </button>

<button id="downtown" onclick="down()"> Downtown Bikini Bottom </button>

JS：

time = 60;
function Timer(fn, t) {
    var timerObj = setInterval(fn, t);
}
var timer = new Timer(function() {
    time--;
  document.getElementById('Label1').innerHTML =
    "" + time + " seconds"
    if (time == 0) {
      down();
      time = 60;
    } else if (time == 30)
      document.getElementById('myImage').src='https://pbs.twimg.com/media/EVXFdi4WsAEqQEs.jpg';
}, 1000);
function rockbo() { 
 time = 60;
document.getElementById('myImage').src='https://pbs.twimg.com/media/EVXFdi4WsAEqQEs.jpg';
}
function down() { 
 time = 60;
document.getElementById('myImage').src='https://pbs.twimg.com/media/EVXFdi3WsAIIYse.jpg';
}

希望能解决。