按键复位功能

Question

我有一个按钮，该按钮在一秒钟后消失。 如果我单击该按钮，我希望该功能将重置并且我将再获得一秒钟的时间来单击。而且-如果我没有点击这一秒，我希望按钮会消失。 （如果我点击一秒钟，按钮不会消失，如果我错过一秒钟，它就会消失，但如果我点击，我会再获得一秒钟，依此类推......）

这是我的代码：

HTML：

<button id="btn">click
</button>

JavaScript：

let btn = document.querySelector('#btn');
    btn.addEventListener('click', ()=>{
    click();
    })
    setTimeout(function click() {
        btn.style.display = ('none');
            }, 1000);

该代码不起作用。 我是一个绝对的初学者，所以任何反馈都会对我有所帮助。

如果我的问题不明白，请在 cmets 中给我写信或编辑问题。

Answer 1

将您的 javascript 更改为以下内容：

let btn = document.querySelector('#btn');

btn.addEventListener('click', ()=>{
    click();
})

function click() {
    setTimeout(function() {
        btn.style.display = 'none';
    }, 1000);
}

点击未正确定义:) 你应该试试jQuery，它会让你的学习更轻松！ 也可以在谷歌浏览器上按 f12 来显示开发者控制台，那里会显示错误。

Answer 2

您需要在setTimeout 中应用display:none。这是一个例子。

let btn = document.querySelector('#btn');
let time = document.querySelector('#time');
const timeLimit = 10;
let timeoutId, intervalId;

time.innerText = timeLimit;

let startTime;

window.onload = () => {
  startTime = Date.now();
  startTimer();
  removeButton();
}


btn.addEventListener('click', stop);


function stop() {
  intervalId && clearInterval(intervalId);
  timeoutId && clearTimeout(timeoutId);
}


function startTimer() {
  let count = 1;
  
  intervalId = setInterval(() => {
    if(count === 10) clearInterval(intervalId);
  
    time.innerText = timeLimit - count;
    count++;
  }, 1000);
}


function removeButton() {
  timeoutId = setTimeout(() => {
    btn.style.display = 'none';
  }, timeLimit*1000);
}

<button id="btn">Click me. I am disappearing ⏳ <span id="time"></span></button>

Answer 3

这是我的建议：

var c = 10;
var timer;

clock();

function clock() {
  timer = setInterval(countdown, 1000);
}

function countdown() {
  counter.innerHTML = --c;
  if (c === 0) {
    btn.style.display = 'none';
    clearInterval(timer);
  }
}

btn.onclick = function() {
  clearInterval(timer);
  c = 10;
  counter.innerHTML = c;
  clock();
};

<button id="btn">Click me before it's too late (<span id="counter">10</span>)</button>