私はどのようにしてボタンとJavaScriptのボタンを実装しますか？

私は完全な初心者で、javascriptの実装方法を探しています。私はYUIスライダをボタンとテキストフィールドに置き換えようとしています。私は、押されたときに、テキストフィールドを、好ましくはより速くより速い速度で増加させるボタンを達成しようとしています。（http://www.blackbird502.com/white.htm)Iは頭の中でJavaのタグでこれを持っている：私はどのようにしてボタンとJavaScriptのボタンを実装しますか？

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

ことが可能ですありがとう：？

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

私はプレスを実装し、体内の次に保持するために、どのよう見当もつかない。

出典

2009-03-31 couchua

このコードは、探しているものすべてを処理する必要があります。それはtj111の例に非常にゆるやかに基づいています。私は可能な限り再利用可能にしようとしましたが、JavaScriptにHTMLを混在させる必要はありません。

ボタンにID（btnUPとbtnDOWN）とテキストフィールド（amount）を追加する必要があります。これらのIDは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); 
}

出典

2009-03-31 22:58:49 s4y

これは完全に動作します：http://www.blackbird502.com/white2.htm ありがとうございます！ – couchua

0-1000程度のように、「金額」に最小値/最大値を設定する方法がありますか？ – couchua

制限を追加する答えが更新されました。私はこのコードをかなり読めるようにしようとしていました。是非、遊び、壊して、改善してください。それはどんな言語を学ぶための最良の方法です。 – s4y

最も簡単な方法は、単に要素を取得し、イベントを追加したものを使用し、その後、ボタンのそれぞれに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>

出典

2009-03-31 17:46:45 tj111

これはすばやく汚れていますが、始める必要があります。基本的には、最初の "定数"をいくつか設定して、目的の動作を得ることができます。インクリメント間の初期時間は1000ミリ秒で、各繰り返しではその90％（1000、990、891、... 100）になり、100ミリ秒で小さくなるのを止めます。この要素を微調整して、より速い加速または遅い加速を得ることができます。私が信じている残りの部分は、私があなたが行っていると思っているものにかなり近いです。イベントの割り当てが不足しているようです。 window.onloadでは、私はonmouseupとonmousedownイベントを、最初のタイムアウトで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>

出典

2009-03-31 22:59:34

私のコードはonmouseupイベントをボタンに設定していますので、SydneySMが彼の解決策で言及しているバグがあります。 –

私はちょうどこのページの中で作業し、それは完全に動作します：http://www.blackbird502.com/white1。htm 私はSidneySMの「バグ」を回避しようと試みていますが、初心者の立場からの「バグ」の証拠はありません。ありがとう！ – couchua

バグを修正するコードを変更しました。私はonmouseupイベントをドキュメントに添付しました。それをキャッチするためにSidneySMにクレジットが送られます。 –

あなたはonclickイベントにフックしていますが、これは完全なクリック（マウスキーダウンとキーアップ）で発生します。別の別のイベント（http://www.w3schools.com/jsref/jsref_onmousedown.asp'>onMouseDown）を聞きたいと思うようです。私は、他のタイマーベースのソリューションのいくつかを実装していれば、すでに求めている機能を得ることができればと思います。

幸運を祈る！

出典

2009-04-01 02:53:36

私はどのようにしてボタンとJavaScriptのボタンを実装しますか？

答えて

関連する問題