Làm cách nào để triển khai nút bấm và giữ javascript?

Question

Tôi là người mới hoàn thành, đang tìm kiếm hướng dẫn về cách triển khai javascript. Tôi đang cố gắng thay thế thanh trượt YUI bằng các nút và trường văn bản. Tôi đang cố gắng để đạt được các nút đó, khi được giữ lại, sẽ tiếp tục làm cho trường văn bản tăng lên, tốt nhất là với tốc độ nhanh hơn và nhanh hơn. (http://www.blackbird502.com/white.htm)I có điều này trong thẻ java vào đầu:

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

tôi không có đầu mối làm thế nào để thực hiện bấm và giữ vào sau trong cơ thể:

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

Có thể cám ơn?.

Answer 1

Mã này nên làm mọi thứ bạn đang tìm kiếm; nó dựa rất nhiều vào ví dụ của tj111. Tôi đã cố gắng làm cho nó có thể tái sử dụng càng tốt, và nó không cần JavaScript trộn lẫn với HTML.

Bạn cần thêm ID vào các nút (btnUP và btnDOWN) và trường văn bản (amount). Bạn có thể thay đổi các ID này trong câu lệnh window.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); 
} 

Answer 2

phương pháp dễ nhất là nên chỉ thêm một ID cho mỗi nút, sau đó sử dụng những để lấy các yếu tố và thêm các sự kiện.

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

Đây là loại nhanh chóng và dơ bẩn, nhưng nó sẽ giúp bạn bắt đầu. Về cơ bản bạn muốn thiết lập một vài "hằng số" ban đầu mà bạn có thể chơi để có được hành vi mong muốn. Thời gian ban đầu giữa các gia số là 1000 ms và trên mỗi lần lặp lại nếu trở thành 90% số đó (1000, 990, 891, ... 100) và ngừng nhận được nhỏ hơn ở 100 ms. Bạn có thể tinh chỉnh yếu tố này để tăng tốc nhanh hơn hoặc chậm hơn. Phần còn lại tôi tin là khá gần với những gì tôi nghĩ rằng bạn đang đi. Có vẻ như bạn đã bỏ lỡ bài tập sự kiện. Trong số window.onload bạn sẽ thấy rằng tôi chỉ định các sự kiện onmouseup và onmousedown cho các chức năng chỉ cần gọi các chức năng increment() hoặc decrement() với thời gian chờ ban đầu của bạn hoặc chức năng ClearTimeout() để dừng bộ đếm.

EDIT: Tôi đã thay đổi chút ít này để sửa lỗi. Bây giờ nếu bạn di chuyển con trỏ chuột của bạn ra khỏi nút và thả nó sẽ dừng bộ đếm.

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

Một khía cạnh không thể bỏ qua là bạn đang tham gia vào sự kiện onclick - xảy ra khi nhấp chuột hoàn tất (phím chuột xuống và nhấn phím). Có vẻ như bạn muốn nghe một sự kiện khác biệt, http://www.w3schools.com/jsref/jsref_onmousedown.asp'>onMouseDown. Tôi nghĩ rằng nếu bạn sau đó thực hiện một số giải pháp dựa trên bộ đếm thời gian khác, đã cho bạn sẽ nhận được chức năng mà bạn yêu cầu.

Chúc may mắn!