2017-02-28 4 views
-1

ユーザーがリンクをクリックすると(mousedownの動作)、<a href="#" id="down"> - </a>または<a href="#" id="up"> + </a>のいずれかの関数を作成しようとしています。 クリックすると、divの値は1で増減します。<div id="counter">1</div>jQueryカウンターの速度が増加する

最小値は1、最大値は100です。これまでのところ、実際の問題はありません。しかし...
...ユーザーがリンクを押したままにしている間は、最初に1000msごとに1回変更し、7回反復すると500msごとに1回に変更し、5回反復した後は250msごとに変更する必要がありますIF数字を5で割ることはできません。それ以外の場合、速度は500msにとどまります。

リリース時には、カウンタはただちに停止する必要があります。

私はこの種のことが意味をなされることを願っています。どこから始めたらいいのか分かりません。

おかげで、 Knal

+0

私は、速度要件を実装する関数を開始します。 – MaxZoom

+0

これはおそらく役に立ちます:[https://api.jquery.com/mousedown/](https://api.jquery.com/mousedown/) –

+0

@MaxZoom申し訳ありませんが、私はあなたのコメントを理解していません。 – knalpiap

答えて

0

まずあなたがhref属性を削除するアンカータグのclickイベントを検出したい場合。あなたの要件のために、私は以下のコードが役立つと思います。

var currentValue = 1; 
 
var totalNumberOfClicks = 0; 
 
$(document).ready(function() { 
 
$("#down").click(function(){ 
 
if(currentValue!=1) 
 
currentValue--; 
 
totalNumberOfClicks++; 
 
handleLogic(); 
 
}); 
 

 
$("#up").click(function(){ 
 
if(currentValue!=100) 
 
currentValue++ 
 
totalNumberOfClicks++; 
 
handleLogic(); 
 
}); 
 
}); 
 

 
function handleLogic() 
 
{ 
 
if(totalNumberOfClicks<=7) 
 
{ 
 
    $("#counter").delay(1000).text(currentValue); 
 
} 
 
else if(totalNumberOfClicks<=12) 
 
{ 
 
$("#counter").delay(500).text(currentValue); 
 
} 
 
else 
 
{ 
 
if(totalNumberOfClicks%5!=0) 
 
$("#counter").delay(500).text(currentValue); 
 
else 
 
$("#counter").delay(250).text(currentValue); 
 
} 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 
<a style="cursor:pointer;font-size:20px;" id="down"> - </a> or <a style="cursor:pointer;font-size:20px;" id="up"> + </a> 
 
<div id="counter">1</div> 
 
</body> 
 
</html>

+0

あなたの入力をありがとう! おそらく私は私の目標について完全にはっきりしていないかもしれません。ユーザーがリンクを押している間に数字を減らして増やしたいと思っています。リリースすると、番号が「フリーズ」しますが、タイマー(または間隔)はリセットされます。 あなたの 'クリック 'を' mousedown'に変更しようとすると、まだそれを動作させることができません... – knalpiap

関連する問題