Question

我有这个脚本，每次点击一个按钮时都会将值加1：

<script>
    function incrementValue(id) {
       var value = parseInt(document.getElementById(id).innerHTML);
       value = value + 1;
       document.getElementById(id).innerHTML = value;
    }
</script>

<button onclick="incrementValue('skill_1')"> add </button><br>
<span id=skill_1>0</span>

但是我想调整它，这样如果我按住鼠标按钮，它就会重复，所以我不必一遍又一遍地按下它。

使用javascript的任何方式吗？或者jquery适合吗？

Answer 1

不是从HTML中读取值，而是将其写回，而是更容易将值保存在变量中，然后将其增加，然后将其写出来。

您是否知道可以使用简单的HTML微调器执行此操作？

bootstrap

Answer 2

要实现此目的，您需要使用mousedown事件来启动超时（这是增量计数开始之前的延迟）和间隔（执行重复计数）。您还需要mouseup和mouseleave处理程序来删除这两个计时器。试试这个：

＆＃13;

var timeout, interval;

[].forEach.call(document.querySelectorAll('.add'), function(button) {
  button.addEventListener('mousedown', function() {
    var id = button.dataset.target;
    incrementValue(id);
    
    timeout = setTimeout(function() {
      interval = setInterval(function() {
        incrementValue(id);
      }, 50);    
    }, 300);
  });
  
  button.addEventListener('mouseup', clearTimers);
  button.addEventListener('mouseleave', clearTimers); 
  
  function clearTimers() {
    clearTimeout(timeout);
    clearInterval(interval);
  }
});

function incrementValue(id) {
  var el = document.getElementById(id);
  var value = parseInt(el.textContent, 10);
  document.getElementById(id).textContent = ++value;
}

＆＃13;

<button class="add" data-target="skill_1">add</button><br />
<span id="skill_1">0</span>

＆＃13;

Answer 3

您需要3个事件处理程序：

mousedown将调用一个函数，在按下鼠标按钮时会调用自身超时（continuosIncerment）。
mousedown将在释放按钮时清除超时。
mouseleave，当鼠标离开按钮区域时清除超时。

＆＃13;

value = 0;
var btn = document.getElementById('btn');
var skill_1 = document.getElementById('skill_1');
var timer;

function continuosIncerment() {
  skill_1.innerHTML = ++value;
  
  timer = setTimeout(function() {
    continuosIncerment();
  }, 200);
}

function timeoutClear() {
  clearTimeout(timer);
}

btn.addEventListener('mousedown', function() {
  continuosIncerment()
});

btn.addEventListener('mouseup', timeoutClear);

btn.addEventListener('mouseleave', timeoutClear);

＆＃13;

<button id="btn"> add </button><br>
<span id="skill_1">0</span>

＆＃13;

Answer 4

我选择这样的解决方案：在鼠标按下事件时启动一个重复计时器，触发你的功能，并在鼠标注册事件发生时停止。

＆＃13;

function incrementValue(id) {
           var value = parseInt(document.getElementById(id).innerHTML);
           value = value + 1;
           document.getElementById(id).innerHTML = value;
        }

＆＃13;

    <button 
        onmousedown="inter=setInterval(incrementValue('skill_1')), 500" 
        onmouseup="clearInterval(inter);"> add </button><br>
    <span id=skill_1>0</span>

＆＃13;

使用鼠标保持Javascript增加值更快

4 个答案: