如何实现按住按钮javascript？

我是一个完全的新手，正在寻找关于实现javascript的说明。我试图用按钮和文本字段替换YUI滑块。我试图实现的按钮，按下时，将继续使文本字段增加，最好是在一个更快的速度。（在头部的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>

---

有可能吗？谢谢。

最简单的方法是在每个按钮上添加一个ID，然后使用这些ID检索元素并添加事件

//should only be called after the window/DOM has been loaded
window.onload = function() {
  //the buttons
  var btnUP = document.getElementById('btnUP');
  var btnDOWN = document.getElementById('btnDOWN');

  //the amount
  var amount = document.getElementById('amount');

  //actions to occur onclick
  var upClick = function() {
    amount.value++;
  }
  var downClick = function() {
    amount.value--;
  }

  //assign the actions here
  holdit(btnUP, upClick, 1000, 2);
  holdit(btnDOWN, downClick, 1000, 2); 

}


<form>
  <input type=button value="UP"  class="btn" id='btnUP'>
  <br />
  <input type=text name=amount value=5 class="text" id='amount'>
  <br /> 
  <input type=button value="DOWN"  class="btn" id='btnDOWN'>
</form>

//仅应在加载窗口/DOM后调用
window.onload=函数（）{
//按钮
var btnUP=document.getElementById（'btnUP'）；
var btnDOWN=document.getElementById（'btnDOWN'）；
//金额
var amount=document.getElementById（'amount'）；
//单击时要执行的操作
var upClick=function（）{
金额.value++；
}
var downClick=function（）{
金额.价值--；
}
//在此处分配操作
保持（btnUP，向上点击，1000，2）；
按住它（b向下，下击，1000，2）；
}

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

您确实需要向按钮（

btnUP

和

btnDOWN

）和文本字段（

amount

）添加ID。您可以在

窗口中更改这些ID。onload

语句

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

//此函数创建一个闭包，并在“button”参数中指定的元素上放置一个mousedown处理程序。
函数makeButtonIncrement（按钮、动作、目标、初始延迟、乘数）{
var holdTimer，changeValue，timerIsRunning=false，delay=initialDelay；
changeValue=函数（）{
如果（操作==“添加”&&target.value<1000）
target.value++；
否则如果（操作==“减去”&&target.value>0）
目标价值--；
holdTimer=setTimeout（更改值、延迟）；
如果（延迟>20）延迟=延迟*乘数；
如果（！timerIsRunning）{
//第一次调用该函数时，它会在整个文档上放置一个onmouseup处理程序
//这会在释放鼠标时停止进程。如果用户移动，这一点很重要
//光标从按钮上移开。
document.onmouseup=函数（）{
clearTimeout（保持计时器）；
document.onmouseup=null；
timerIsRunning=false；
延迟=初始延迟；
}
timerIsRunning=true；
}
}
button.onmousedown=更改值；
}
//应仅在加载窗口/DOM后调用
window.onload=函数（）{
makeButtonIncrement（document.getElementById（'btnUP'），“add”，document.getElementById（'amount'），500，0.7）；
makeButtonIncrement（document.getElementById（'btnDOWN'），“subtract”，document.getElementById（'amount'），500，0.7）；
}

这有点快而且脏，但它应该给你一个开始。基本上你想设置一些初始“常数”，你可以使用它们来获得所需的行为。增量之间的初始时间是1000毫秒，每次迭代时，如果变为90%（1000，990，891，…100）并且在100毫秒时停止变小。你可以调整这个因子以获得更快或更慢的加速。我相信其余的与我认为你想要的非常接近。看起来你只是错过了事件分配。在

窗口中。onload

你会看到我分配了

onmouseup

，和

onmouseudown

>事件到只调用带有初始超时的

increment（）

或

decrement（）

函数的函数，或调用

ClearTimeout（）

函数停止计数器的函数

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
    <title><!-- Insert your title here --></title>
    <script>

      // Fake Constants
      var INITIAL_TIME = 1000;
      var ACCELERATION = .9;
      var MIN_TIME = 100;

      // create global variables to hold DOM objects, and timer
      var up = null,
        down = null,
        count = null,
        timer = null;

      // Increment the counter
      function increment (time) {
        // decrease timeout by our acceleration factor, unless it's at the minimum
        time = (time * ACCELERATION > MIN_TIME) ? (time * ACCELERATION) : MIN_TIME;
        count.value ++ ;
        // set the timeout for the next round, and pass in the new smaller timeout
        timer = setTimeout(
                  function () {
                    increment(time);
                  }, time);
      }
      // Same as increment only subtracts one instead of adding.
      // -- could easily make one function and pass an pos/neg factor instead
      function decrement (time) {
        time = time * ACCELERATION > MIN_TIME ? (time * ACCELERATION) : MIN_TIME;
        count.value --;
        timer = setTimeout(
                  function () {
                    decrement(time);
                  }, time);
     }

     // Initialize the page after all the forms load
     window.onload = function () {
       // initialization function

       // assign DOM objects to our vars for ease of use.
       up = document.getElementById('up_btn');
       down = document.getElementById('dwn_btn');
       count = document.getElementById('count');

       // create event handlers for mouse up and down
       up.onmousedown = function () {
         increment(INITIAL_TIME);
       }
        down.onmousedown = function () {
         decrement(INITIAL_TIME);
       }

       document.onmouseup = function () {
         clearTimeout(timer);
       }

     }

  </script>
</head>
<body>
  <!-- Insert your content here -->

  <form name="the_form">
    <input type="button" value="Up" id="up_btn" /><br />
    <input type="button" value="Down" id="dwn_btn" /></br>

    <br />
    Count: 
    <input type="text" value="0" id="count" />

  </form> 

</body>
</html>

编辑：为了修复这个错误，我稍微修改了一下。现在，如果你把鼠标指针从按钮上移开，松开它，计数器就会停止工作

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
    <title><!-- Insert your title here --></title>
    <script>

      // Fake Constants
      var INITIAL_TIME = 1000;
      var ACCELERATION = .9;
      var MIN_TIME = 100;

      // create global variables to hold DOM objects, and timer
      var up = null,
        down = null,
        count = null,
        timer = null;

      // Increment the counter
      function increment (time) {
        // decrease timeout by our acceleration factor, unless it's at the minimum
        time = (time * ACCELERATION > MIN_TIME) ? (time * ACCELERATION) : MIN_TIME;
        count.value ++ ;
        // set the timeout for the next round, and pass in the new smaller timeout
        timer = setTimeout(
                  function () {
                    increment(time);
                  }, time);
      }
      // Same as increment only subtracts one instead of adding.
      // -- could easily make one function and pass an pos/neg factor instead
      function decrement (time) {
        time = time * ACCELERATION > MIN_TIME ? (time * ACCELERATION) : MIN_TIME;
        count.value --;
        timer = setTimeout(
                  function () {
                    decrement(time);
                  }, time);
     }

     // Initialize the page after all the forms load
     window.onload = function () {
       // initialization function

       // assign DOM objects to our vars for ease of use.
       up = document.getElementById('up_btn');
       down = document.getElementById('dwn_btn');
       count = document.getElementById('count');

       // create event handlers for mouse up and down
       up.onmousedown = function () {
         increment(INITIAL_TIME);
       }
        down.onmousedown = function () {
         decrement(INITIAL_TIME);
       }

       document.onmouseup = function () {
         clearTimeout(timer);
       }

     }

  </script>
</head>
<body>
  <!-- Insert your content here -->

  <form name="the_form">
    <input type="button" value="Up" id="up_btn" /><br />
    <input type="button" value="Down" id="dwn_btn" /></br>

    <br />
    Count: 
    <input type="text" value="0" id="count" />

  </form> 

</body>
</html>

//假常数
var初始时间=1000；
var加速度=.9；
var MIN_TIME=100；
//创建全局变量以保存DOM对象和计时器
var up=null，
down=null，
计数=空，
定时器=空；
//递增计数器
函数增量（时间）{
//通过我们的加速因子减少超时，除非它是最小值
时间=（时间*加速度>最小时间）？（时间*加速度）：最小时间；
count.value++；
//设置下一轮的超时，并传入新的较小超时
定时器=设置超时(
函数（）{
增量（时间）；
}，时间）；
}
//与增量相同，仅减去一，而不是相加。
//--可以轻松生成一个函数并传递一个pos/neg因子
功能减量（时间）{
时间=时间*加速度>最小时间？（时间*加速度）：最小时间；
计数值--；
定时器=设置超时(
函数（）{
减量（时间）；
}，时间）；
}
//加载所有表单后初始化页面
window.onload=函数（）{
//初始化函数
//为我们的变量分配DOM对象以便于使用。
up=document.getElementById（'up_btn'）；
down=document.getElementById（'dwn_btn'）；
count=document.getElementById（'count'）；
//为鼠标上下移动创建事件处理程序
up.onmousedown=函数（）{
增量（初始时间）；
}
down.onmousedown=函数（）{
减量（初始时间）；
}
document.onmouseup=函数（）{
清除超时（计时器）；
}
}






计数：

一个方面没有