HTML 按钮 - 按住按钮时会重复操作

Vu *_* Vo 4 html javascript

我是 HTML 的新手,我正在开发一个项目,当您按住它时需要使用按钮,它会重复相同的操作。这是我得到的代码,但没有用。

    !DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Button</title>
</head>
<body>
    <button id = "forward" accesskey="o" onmousedown="display(1)" onmouseup="stop()">forward</button>


    <script>

    function stop(){
        console.log(" ")
    }
    function display(value){
        if (value == 1){
            console.log("left");}}
    </script>



</body>
</html>
Run Code Online (Sandbox Code Playgroud)

Ano*_*sSB 5

你需要的是setIntervalclearInterval

代码

var wrapper = document.getElementById('counter');
  var counter;
  var count = 0;
  
  function start() {
    counter = setInterval(function() {
      wrapper.innerHTML = count;
      count++;
    }, 500);
  }
  function end() {
    clearInterval(counter)
  }
Run Code Online (Sandbox Code Playgroud)
<button onmousedown="start()" onmouseup="end()">Click and hold</button>
<p id="counter"></p>
Run Code Online (Sandbox Code Playgroud)

解释

如果您不熟悉setIntervalclearInterval,它们类似于setTimeout。您可以分配setInterval给一个变量,您可以clearInterval稍后传递给该变量以停止它。它的作用是将您传递给它的代码放在不同的堆栈中,因此您的其他代码可以继续执行,例如onmouseup可以清除它的事件。

实践

https://www.w3schools.com/jsref/met_win_setinterval.asp https://www.w3schools.com/jsref/met_win_clearinterval.asp

文档

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval