StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>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 <code>window.onload</code> you'll see that i assign the <code>onmouseup</code>, and <code>onmousedown</code> events to functions that just call the <code>increment()</code> or <code>decrement()</code> functions with your initial timeout, or the <code>ClearTimeout()</code> function to stop the counter. </p> <p>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. </p> <pre><code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="en"> <head> <title></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>  <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> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload