添加分钟到DOM倒计时器

huangapple go评论68阅读模式
英文:

Add minutes to dom countdown timer

问题

我制作了一个倒计时计时器,但想要通过按钮添加额外的分钟。

我创建了一个函数来向计时器添加1分钟,但我无法让它添加这一分钟。我应该如何实现这个目标?

我已经注释掉了这段代码,因为它破坏了我的其他代码。

当计时器没有运行时,add1Minute() 函数应该向计时器添加1分钟。

我尝试通过将1添加到变量,然后将其添加到计时器来实现这一目标。

以下是您提供的代码的翻译:

let countdown;

function create() {
  const mainDiv = document.createElement("div");
  document.body.appendChild(mainDiv);

  const timeDiv = document.createElement("div");
  timeDiv.setAttribute("id", "timeText");
  timeDiv.innerHTML = "25:00";
  mainDiv.appendChild(timeDiv);

  const startButton = document.createElement("button");
  startButton.setAttribute("class", "button");
  startButton.addEventListener("click", startTimer);
  startButton.innerHTML = "start";
  mainDiv.appendChild(startButton);

  const restartButton = document.createElement("button");
  restartButton.setAttribute("class", "button");
  restartButton.addEventListener("click", restartTimer);
  restartButton.innerHTML = "restart";
  mainDiv.appendChild(restartButton);

  // 以下是您注释掉的部分
  /*
  const minute1Button = document.createElement("button");
  minute1Button.setAttribute("class", "button");
  startButton.addEventListener('click', add1Minute);
  minute1Button.innerHTML = "+ 1 minute";
  mainDiv.appendChild(minute1Button);

  const minute10Button = document.createElement("button");
  minute10Button.setAttribute("class", "button");
  minute10Button.addEventListener('click', add10Minute);
  minute10Button.innerHTML = "+ 10 minutes";
  mainDiv.appendChild(minute10Button);
  */
}

function startTimer(sMin1) {
  let sMin = 0.15;

  function add1Minute(sMin) {
    sMin + 1;
    return sMin;
  }

  let time = sMin * 60;
  countdown = setInterval(update, 1000);

  function update() {
    let min = Math.floor(time / 60);
    let sec = time % 60;
    sec = sec < 10 ? "0" + sec : sec;
    timeText.innerHTML = min + ":" + sec;
    time--;
    min == 0 && sec == 0 ? clearInterval(countdown) : countdown;
  }
}

function add10Minute() {}

function restartTimer() {
  clearInterval(countdown);
  document.body.innerHTML = "";
  create();
}

create();

希望这有助于您理解代码的翻译。如果您有任何其他问题,请随时提出。

英文:

I made a count down timer but would like to add extra minutes to it with a button.

I made a function to add 1 minute to the timer but i can't get it to add the minute. How would I achieve this?

I commented out the code since it breaks the rest of my code.

The add1Minute() function should add 1 minute to the timer when it isn't running.

I tried doing this by adding 1 to the variable and after that add it to the timer.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let countdown;
create();
function create() {
const mainDiv = document.createElement(&quot;div&quot;);
document.body.appendChild(mainDiv);
const timeDiv = document.createElement(&quot;div&quot;);
timeDiv.setAttribute(&quot;id&quot;, &quot;timeText&quot;);
timeDiv.innerHTML = &quot;25:00&quot;;
mainDiv.appendChild(timeDiv);
const startButton = document.createElement(&quot;button&quot;);
startButton.setAttribute(&quot;class&quot;, &quot;button&quot;);
//startButton.addEventListener (&quot;id&quot;, &quot;startButton&quot;);
startButton.addEventListener(&quot;click&quot;, startTimer);
startButton.innerHTML = &quot;start&quot;;
mainDiv.appendChild(startButton);
const restartButton = document.createElement(&quot;button&quot;);
restartButton.setAttribute(&quot;class&quot;, &quot;button&quot;);
restartButton.addEventListener(&quot;click&quot;, restartTimer);
restartButton.innerHTML = &quot;restart&quot;;
mainDiv.appendChild(restartButton);
/*
const minute1Button = document.createElement(&quot;button&quot;);
minute1Button.setAttribute(&quot;class&quot;, &quot;button&quot;);
startButton.addEventListener (&#39;click&#39;, add1Minute);
minute1Button.innerHTML = &quot;+ 1 minute&quot;;
mainDiv.appendChild(minute1Button);
const minute10Button = document.createElement(&quot;button&quot;);
minute10Button.setAttribute(&quot;class&quot;, &quot;button&quot;);
minute10Button.addEventListener (&#39;click&#39;,add10Minute);
minute10Button.innerHTML = &quot;+ 10 minutes&quot;;
mainDiv.appendChild(minute10Button);
*/
}
//startTimer()
function startTimer(sMin1) {
let sMin = 0.15;
function add1Minute(sMin) {
sMin + 1;
return sMin;
}
//if(sMin1 != null){
//sMin + sMin1;
//}
let time = sMin * 60;
countdown = setInterval(update, 1000);
function update() {
let min = Math.floor(time / 60);
let sec = time % 60;
sec = sec &lt; 10 ? &quot;0&quot; + sec : sec;
timeText.innerHTML = min + &quot;:&quot; + sec;
time--;
min == 0 &amp;&amp; sec == 0 ? clearInterval(countdown) : countdown;
}
}
//function add1Minute(sMin){
// sMin + 1;
// return sMin1;
//}
function add10Minute() {}
function restartTimer() {
clearInterval(countdown);
document.body.innerHTML = &quot;&quot;;
create();
}

<!-- end snippet -->

答案1

得分: 0

尝试:

let sMin = 0.15;

function add1Minute() {
  if (!countdown) {
    sMin += 1;
  }
}

function startTimer() {
  let time = sMin * 60;

  countdown = setInterval(update, 1000);

  function update() {
    let min = Math.floor(time / 60);
    let sec = time % 60;
    sec = sec < 10 ? "0" + sec : sec;
    timeText.innerHTML = min + ":" + sec;
    time--;
    min == 0 && sec == 0 ? clearInterval(countdown) : countdown;
  }
}
英文:

try:

let sMin = 0.15;
function add1Minute() {
if (!countdown) {
sMin += 1;
}
}
function startTimer() {
let time = sMin * 60;
countdown = setInterval(update, 1000);
function update() {
let min = Math.floor(time / 60);
let sec = time % 60;
sec = sec &lt; 10 ? &quot;0&quot; + sec : sec;
timeText.innerHTML = min + &quot;:&quot; + sec;
time--;
min == 0 &amp;&amp; sec == 0 ? clearInterval(countdown) : countdown;
}
}

huangapple
  • 本文由 发表于 2023年2月10日 14:30:19
  • 转载请务必保留本文链接:https://go.coder-hub.com/75407626.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定