按键复位功能

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);

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

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

Answer 1

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

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

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

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

点击未正确定义:) 你应该试试jQuery，它会让你的学习更轻松！同时在 Google Chrome 上按 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>

按键复位功能

Reset function by button

javascript

function

dom-events