0

クリック アンド ホールド機能を組み込みたい作業ツール (最初のコード ブロックを参照) があります。

左ボタンを押したままにすると急速に加算し、右ボタンを押したままにすると急速に減算したいと思います。すでにあるシングルクリック機能と同じですが、より高速なオプションです。

私はまったくの初心者なので、動作するデモは大歓迎です。ありがとうございました。

コード：

<!DOCTYPE html>
<html>
<head>
<script>

var Alexander = 
     {
      Strength: "AlexanderStrengthVal",
      Bonus: "AlexanderRemainingBonusVal",
      Limits: {
        Strength: { 
          max: 80,
          min: 60
        }
              }
    };

function add(character, stat)
{
  var txtNumber = document.getElementById(character[stat]);
  var newNumber = parseInt(txtNumber.value) + 1;
  if(newNumber > character.Limits[stat].max) return;
  var BonusVal = document.getElementById(character["Bonus"]);
  if(BonusVal.value == 0) return;
  var newBonus = parseInt(BonusVal.value) - 1;
  BonusVal.value = newBonus; 
  txtNumber.value = newNumber;
}

function subtract(e, character, stat)
{
  e.preventDefault();
  var txtNumber = document.getElementById(character[stat]);
  var newNumber = parseInt(txtNumber.value) - 1;
  if(newNumber < character.Limits[stat].min) return;
    var BonusVal = document.getElementById(character["Bonus"]);
  var newBonus = parseInt(BonusVal.value) + 1;
  BonusVal.value = newBonus; 
  txtNumber.value = newNumber;
}

</script>  
</head>
<body>

  <table cellpadding='5' border='1' style="text-align:center; color:#ffffff; background-color:#444444; font-family:arial; font-size:14px">
   <tr>
      <td><b>Character</b></td>
      <td><b>Strength</b></td>
      <td><b>Spending Bonus</b></td>
   </tr>
    <tr>
      <td>Alexander</td>
      <td>
        <input 
        id="AlexanderStrengthVal" 
        type="text" value="60" 
        style="width:30px; border:none; color:#ffffff; background-color:transparent; text-align:center" 
        onfocus="this.blur()" 
        onClick="add(Alexander, 'Strength')" 
        onContextMenu="subtract(event, Alexander, 'Strength');"   
        />
      </td>

      <td>
        <input 
        id="AlexanderRemainingBonusVal" 
        type="text" 
        value="30" 
        style="width:30px; border:none; color:#ffffff; background-color:transparent; text-align:center" 
        />
      </td>

    </tr>
  </table>
</body>
</html>
4

2 に答える 2

1

私は and を使用setIntervalしclearInterval、それらをmousedownandmouseupイベントに接続します。この例ではjQueryを使用しています。他の回答の1つで述べたように、イベントバインディングが間違っているため、例にコードを追加していません。

この質問に答えて、イベントを DOM にバインドし、関数を構造化する方法の例を示すことができると思いました。

var mouseDown;
jQuery(document).ready(function($){
  $('#number').on('mousedown',function(e){
    mouseDown = setInterval(add,150,this,1); // 150 is the number of ms you want
                                             // to delay each number addition
  })
  .on('mouseup',function(e){
    clearInterval(mouseDown);
  });
});

function add(n,val){
  var currentValue = parseInt($(n).text());
  $(n).text(currentValue+val);
}

ここにあるWorking demo

于 2013-10-16T21:27:24.793 に答える