javascript - 如何实现按住按钮 javascript？

Question

我是一个完全的新手，正在寻找有关实现 javascript 的说明。我正在尝试用按钮和文本字段替换 YUI slider 。我正在尝试实现按钮，当按住这些按钮时，它们将继续使文本字段增加，最好以越来越快的速度增加。 (http://www.blackbird502.com/white.htm)I 在头部的 java 标记中有这个:

function holdit(btn, action, start, speedup) {
var t;

var repeat = function () {
    action();
    t = setTimeout(repeat, start);
    start = start / speedup;
}

btn.mousedown = function() {
    repeat();
}

btn.mouseup = function () {
    clearTimeout(t);
}

/* to use */
holdit(btn, function () { }, 1000, 2); 
/* x..1000ms..x..500ms..x..250ms..x */

我不知道如何在正文中实现按住:

<form><input type=button value="UP"  class="btn" onClick="javascript:this.form.amount.value++;"><br /><input type=text name=amount value=5 class="text"><br /> <input type=button value="DOWN"  class="btn" onClick="javascript:this.form.amount.value--;" ></form>

这可能吗？谢谢。

Answer 1

这段代码应该可以满足您的所有需求；它非常松散地基于 tj111 的示例。我试图让它尽可能地可重用，并且它不需要将 JavaScript 与 HTML 混合在一起。

您确实需要将 ID 添加到按钮(btnUP 和 btnDOWN)和文本字段(amount)。您可以在 window.onload 语句中更改这些 ID。

// This function creates a closure and puts a mousedown handler on the element specified in the "button" parameter.
function makeButtonIncrement(button, action, target, initialDelay, multiplier){
    var holdTimer, changeValue, timerIsRunning = false, delay = initialDelay;
    changeValue = function(){
        if(action == "add" && target.value < 1000)
            target.value++;
        else if(action == "subtract" && target.value > 0)
            target.value--;
        holdTimer = setTimeout(changeValue, delay);
        if(delay > 20) delay = delay * multiplier;
        if(!timerIsRunning){
            // When the function is first called, it puts an onmouseup handler on the whole document 
            // that stops the process when the mouse is released. This is important if the user moves
            // the cursor off of the button.
            document.onmouseup = function(){
                clearTimeout(holdTimer);
                document.onmouseup = null;
                timerIsRunning = false;
                delay = initialDelay;
            }
            timerIsRunning = true;
        }
    }
    button.onmousedown = changeValue;
}

//should only be called after the window/DOM has been loaded
window.onload = function() {
    makeButtonIncrement(document.getElementById('btnUP'), "add", document.getElementById('amount'), 500, 0.7);
    makeButtonIncrement(document.getElementById('btnDOWN'), "subtract", document.getElementById('amount'), 500, 0.7);
}