Basın ve tutma düğmesine javascript'i nasıl uygularım?

Question

Tam bir acemiim, javascript'i uygulama ile ilgili talimatları arıyorum. YUI kaydırıcısını düğmeli ve metin alanıyla değiştirmeye çalışıyorum. Tutulduğunda, metin alanını artırmaya, tercihen daha hızlı ve daha hızlı bir hızda yapmaya devam edecek düğmeler elde etmeye çalışıyorum. (http://www.blackbird502.com/white.htm)I kafasında java etiketinde bu var:

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

mümkün mü Teşekkür:

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

basına uygulamak ve vücutta aşağıdaki içine nasıl tutacağını hiçbir ipucu var.

Answer 1

Bu kod, aradığınız her şeyi yapmalıdır; tj111'in örneğine çok gevşek bir şekilde dayanıyor. Mümkün olduğunca yeniden kullanılabilir hale getirmeye çalıştım ve HTML ile karıştırılmış JavaScript'e ihtiyaç duymuyor.

Düğmelere (btnUP ve btnDOWN) ve metin alanına (amount) kimlik eklemeniz gerekir. Bu kimlikleri window.onload ifadesinde değiştirebilirsiniz.

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

Answer 2

kolay yöntem sadece, sonra düğmelerin her birine bir kimlik eklemek elemanlarını almak için bu kullanmak ve olayları eklemek olacaktır.

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

Answer 3

Bu bir çeşit hızlı ve kirli, ancak size bir başlangıç ​​vermelidir. Temel olarak, istenen davranışı elde etmek için oynayabileceğiniz birkaç ilk "sabit" kurmak istersiniz. Artımlar arasındaki başlangıç ​​süresi 1000 ms'dir ve her yinelemede bunun% 90'ı (1000, 990, 891, ... 100) ise 100 ms'de küçülmeyi durdurur. Daha hızlı veya daha yavaş hızlanma elde etmek için bu faktörü değiştirebilirsiniz. İhtiyacım olan geri kalanına, düşündüğüm şeye oldukça yakın. Olay ödevlerini kaçırıyor gibisiniz. window.onload'da onmouseup ve onmousedown olaylarını, ilk zaman aşımıylaveya decrement() işlevlerini çağıran işlevlere veya sayacı durdurmak için ClearTimeout() işlevine atadığımı göreceksiniz.

DÜZENLEME: Bu hatayı düzeltmek için biraz değiştirdim. Şimdi, fare imlecinizi düğmeden çıkarırsanız ve bıraktığınızda, sayaç duracaktır. Gözden kaçırılmaması gereken

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

Answer 4

bir yönü size onclick olayına takılıyoruz olmasıdır - tam bir tıklama (fare aşağı tuşu ve anahtar kadar) olur ki. Başka bir ayrı etkinliği dinlemek istediğiniz gibi geliyor, http://www.w3schools.com/jsref/jsref_onmousedown.asp'>onMouseDown. Daha sonra diğer zamanlayıcı tabanlı çözümlerin bazılarını uygularsanız, daha önce sorduğunuz işlevselliği elde edersiniz.

İyi şanslar!