主页 / 问题 / 1542560
Accepted
Bemfes
Asked:2023-09-26 00:46:34 +0000 UTC2023-09-26 00:46:34 +0000 UTC

如何在按下按钮后从头开始计时？

  • 772

我正在尝试重置计时器。

首先有一个方块和一个计时器；计时器到期后，方块消失并出现“重复”按钮。按下后，计时器应该会再次倒计时，但数字不会依次变化，只有起始数字。

同时，计时器本身也开始工作：时间结束后，方块就会消失。

如何让按下按钮后出现计时器数字？

const labelTimer = document.querySelector('span')
const div = document.querySelector('div')
const title = document.querySelector('h1')
const button = document.querySelector('button')

let timer

function start() {
    let time = 5;
    function tick() {

      const seconds = time % 60
      labelTimer.textContent = `${seconds}`;
     
      if (time == 0) {
        clearInterval(timer);
        div.style.opacity = 0
        title.textContent = 'Квадрат исчез!'
        button.style.opacity = 100
      }
      time--;
    }
    tick();
    const timer = setInterval(tick, 1000);
    return timer;
  }

start()

button.addEventListener('click', function() {
    title.innerHTML = `Этот квадрат исчезнет через: <span>5</span> секунд`
    div.style.opacity = 100
    button.style.opacity = 0
    timer = start();
})
javascript

2 个回答

  1. Best Answer

    如果您坚持使用代码，则只需将 h1 和 span 选择器移到函数内，一切都会按预期工作：

    const div = document.querySelector('div')
const button = document.querySelector('button')
let timer

function start() {
  let time = 5;
  const title = document.querySelector('h1');
  title.innerHTML = `Этот квадрат исчезнет через: <span>5</span> секунд`
  const labelTimer = document.querySelector('span');

  function tick() {

    const seconds = time % 60
    labelTimer.textContent = `${seconds}`;

    if (time === 0) {
      clearInterval(timer);
      div.style.opacity = 0
      title.textContent = 'Квадрат исчез!'
      button.style.opacity = 100
    }
    time--;
  }
  tick();
  const timer = setInterval(tick, 1000);
  return timer;
}

start()

button.addEventListener('click', function() {
  div.style.opacity = 100
  button.style.opacity = 0
  timer = start();
})
    <h1>Этот квадрат исчезнет через: <span>5</span> секунд</h1>
<div style="width: 100px; height: 100px; background-color: #20c997"></div>
<button>Начать</button>

    好吧，或者你可以稍微优化一下。定时器只能通过按钮启动

    const div = document.querySelector('div')
const button = document.querySelector('button')
const title = document.querySelector('h1');
let timer;

function start() {
  let time = 5;

  function tick() {
    title.innerHTML = `Этот квадрат исчезнет через: <span>${time % 60}</span> секунд`;

    if (time-- === 0) {
      clearInterval(timer);
      div.style.opacity = '0';
      title.innerHTML = 'Квадрат исчез!';
      button.style.opacity = '100';
    }
  }
  tick();
  return setInterval(tick, 1000);
}

button.addEventListener('click', function() {
  div.style.opacity = '100';
  button.style.opacity = '0';
  timer = start();
});
    <h1>Квадрата нет!</h1>
<div style="width: 100px; height: 100px; background-color: #20c997; opacity: 0"></div>
<button>Начать</button>

    • 1

  2. 问题是您正在使用innerHtml 条目创建一个新元素。每次执行此操作时，您都需要重新定义 labelTimer（因为现在，单击按钮后，labelTimer 变量包含指向 house 元素的链接，该元素不再位于树中，但在屏幕上已经是新的），或者将文本更改为其他内容，而不涉及每次按下按钮时创建新的范围，或者重写所有文本以及数字并在每个刻度处重新创建范围

    • 0

相关问题