如何实现按住按钮javascript？

I'm a complete novice, looking for instructions on implementing javascript. I am attempting to replace a YUI slider with buttons and a text field. I am trying to achieve buttons that, when held down, will continue to make the text field increase, preferably at a faster and faster rate. (http://www.blackbird502.com/white.htm)I have this in the java tag in the head:

我是一个完整的新手,正在寻找有关实现javascript的说明。我试图用按钮和文本字段替换YUI滑块。我试图实现按钮,当按下时,将继续使文本字段增加,优选地以更快和更快的速率增加。 (http://www.blackbird502.com/white.htm)我在脑中的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 */

I have no clue how to implement the press and hold into the following in the body:

我不知道如何实施印刷机并在机身中保持以下内容:

<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>

Is it possible? Thanks.

可能吗?谢谢。

4 个解决方案

#1

This code should do everything you're looking for; it's based very loosely on tj111's example. I tried to make it as reusable as possible, and it doesn't need JavaScript mixed in with the HTML.

这段代码应该做你想要的一切;它基于tj111的例子非常宽松。我试图让它尽可能重用,并且它不需要与HTML混合使用JavaScript。

You do need to add IDs to the buttons (btnUP and btnDOWN) and text field (amount). You can change these IDs in the window.onload statement.

您需要为按钮(btnUP和btnDOWN)和文本字段(金额)添加ID。您可以在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);
}

#2

This is kind of quick and dirty, but it should give you a start. Basically you want to set up a few initial "constants" that you can play with to get the desired behavior. The initial time between increments is 1000 ms, and on each iteration if become 90% of that (1000, 990, 891, ... 100) and stops getting smaller at 100 ms. You can tweak this factor to get faster or slower acceleration. The rest I believe is pretty close to what I think you were going for. It seems like you were just missing the event assignments. In the window.onload you'll see that i assign the onmouseup, and onmousedown events to functions that just call the increment() or decrement() functions with your initial timeout, or the ClearTimeout() function to stop the counter.

这有点快速和肮脏,但它应该给你一个开始。基本上你想设置一些你可以玩的初始“常量”来获得所需的行为。增量之间的初始时间为1000毫秒,如果每次迭代变为90%(1000,990,891,... 100),则在100毫秒时停止变小。您可以调整此因子以获得更快或更慢的加速度。其余的我认为非常接近我的想法。看起来你只是错过了事件分配。在window.onload中,您将看到我将onmouseup和onmousedown事件分配给刚刚使用初始超时调用increment()或decrement()函数的函数,或者使用ClearTimeout()函数来停止计数器。

EDIT: I changed this slightly to fix the bug. Now if you move your mouse pointer off the button and release it will stop the counter.

编辑:我稍微改变了这个来修复bug。现在,如果您将鼠标指针从按钮上移开并释放它将停止计数器。

<!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>

#3

The easiest method would be to just add an ID to each of the buttons, then use those to retrieve the elements and add the events.

最简单的方法是只为每个按钮添加一个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>

#4

One aspect not to be overlooked is that you're hooking into the onclick event - which happens on a complete click (Mouse key down and key up). It sounds like you would want to listen for another distinct event, http://www.w3schools.com/jsref/jsref_onmousedown.asp'>onMouseDown . I think if you were to then implement some of the other timer based solutions, already given you would get the functionality you're asking for.

一个不容忽视的方面是你正在接触onclick事件 - 这发生在完全点击(鼠标键向下和键盘上)。听起来你想听另一个不同的事件,http://www.w3schools.com/jsref/jsref_onmousedown.asp'>onMouseDown。我想如果你要实现一些其他基于计时器的解决方案,已经给出了你将获得你要求的功能。

Good luck!

#1