单击按钮更改计时器时间

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';
}

希望能解决问题。

单击按钮更改计时器时间

Change Time on timer upon click of a button

javascript

html

button

timer

transition