Question

当计时器变为0时，如何取消 onclick函数answer1（）？

我尝试使用setTimeout停止它，但这取决于onclick事件。

<script>        
    function answer1(){
        var answr = document.getElementById("answer1");
        var btn = document.getElementById("confirm1");
        var AlertZone = document.getElementById("alert1");
        var page = document.getElementById("taskTwo");
        var time = document.getElementById("timer");

        if (answr.value == 336){
            btn.style.background = "#4ce600";
            btn.style.borderColor = "#aaff80";
            AlertZone.innerHTML = "Correct!";
            AlertZone.style.color = "green";
            page.style.display = "block";
            }
        else
            {
                AlertZone.innerHTML = "Wrong answer!"
                AlertZone.style.color = "red";
                btn.style.background = "red";
                btn.style.borderColor = "#ffa0a0";
                page.style.display = "none";
            }
    }
        var timeleft = 10;
        var time = document.getElementById("timer");
        var btn = document.getElementById("confirm1");
        var timer = setInterval(function(){
        timeleft--;
        document.getElementById("timer").textContent = timeleft;
        if(timeleft <= 0)
            clearInterval(timer);
        if(time.innerHTML == 0){
            btn.style.background ='grey';
            btn.style.borderColor ='#aaa';
            btn.innerHTML ="You lost!";
            }
        },1000);
        </script>

我需要answer1（）函数，当计时器为0时，该函数会单击onclick停止工作，所以我将无法单击它。

Answer 1

这是一个使用setTimeout和一个标志的简单示例：

let timerExpired = false

function answer() {
  if (timerExpired) return
    
  console.log('answer!')
  
  setTimeout(() => {
    timerExpired = true
  }, 1000)
}

<button onclick="answer()">Click me</button>

或更妙的是，只需disable按钮本身即可：

function answer(button) {    
  console.log('answer!')

  setTimeout(() => {
    button.setAttribute('disabled', true)
  }, 1000)
}

<button onclick="answer(this)">Click Me</button>

Answer 2

将计时器用尽时将按钮的onclick设置为null即可。

<script>        
function answer1(){
    var answr = document.getElementById("answer1");
    var btn = document.getElementById("confirm1");
    var AlertZone = document.getElementById("alert1");
    var page = document.getElementById("taskTwo");
    var time = document.getElementById("timer");

    if (answr.value == 336){
        btn.style.background = "#4ce600";
        btn.style.borderColor = "#aaff80";
        AlertZone.innerHTML = "Correct!";
        AlertZone.style.color = "green";
        page.style.display = "block";
        }
    else
        {
            AlertZone.innerHTML = "Wrong answer!"
            AlertZone.style.color = "red";
            btn.style.background = "red";
            btn.style.borderColor = "#ffa0a0";
            page.style.display = "none";
        }
}
    var timeleft = 10;
    var time = document.getElementById("timer");
    var btn = document.getElementById("confirm1");
    var timer = setInterval(function(){
    timeleft--;
    document.getElementById("timer").textContent = timeleft;
    if(timeleft <= 0)
        clearInterval(timer);
    if(time.innerHTML == 0){
        btn.style.background ='grey';
        btn.style.borderColor ='#aaa';
        btn.innerHTML ="You lost!";
        btn.onclick = null;
        }
    },1000);
    </script>

Answer 3

在答案功能中添加一个条件，以检查答案是否可以接受。

const but = document.getElementById("answer");
const tim = document.getElementById("timeLeft");

but.addEventListener("click", answer);

function answer(){
  if(canAnswer){
    console.log("Answer accepted");
  } else {
    console.log("Answer denied");
  }
}

let canAnswer = true;
const timer = 10 * 1000; 
const end = Date.now() + timer;
const si = setInterval(function(){
  const timeLeft = Math.max(0, end - Date.now());
  tim.innerText = Math.floor(timeLeft/1000);
  if(timeLeft === 0){
    clearInterval(si);
    canAnswer = false;
    return;
  }
}, 200);

<p id="timeLeft"></p>
<button id="answer">Answer</button>

Answer 4

您可以使用.addEventListener()和.removeEventListener()代替内联事件处理程序来设置和删除事件处理程序：

function answer1() {
    console.log('ok');
}
// on dom ready
document.addEventListener('DOMContentLoaded', function(e) {
    // set click handler
    document.getElementById('btn').addEventListener('click', answer1);

    document.getElementById('rmclick').addEventListener('click', function(e) {
        // remove handler
        document.getElementById('btn').removeEventListener('click', answer1);
    });
})

<button id="btn">Click Me</button>
<button id="rmclick">Remove oclick handler</button>

Answer 5

您可以在3秒后通过将以下javascript代码包含到您的函数中来禁用按钮。如果按钮是＃button1：

Javascript：

<script>
  let button = document.getElementById("button1");
  setTimeout(() => {
    button.disabled = true;
  }, 3000);
</script>

时间到了，如何停止我的onclick功能？

5 个答案: