속도가 증가하는 jQuery 카운터

-1

사용자가 링크 (마우스 동작)를 클릭하는 기능을 만들려고합니다 (<a href="#" id="down"> - </a> 또는 <a href="#" id="up"> + </a>). 가 클릭되는 하나에 기초하여, 사업부의 증가 값 또는 감소는 1 : <div id="counter">1</div>속도가 증가하는 jQuery 카운터

최소값은 1이 최대가 지금까지 실제적인 문제 100 없다. 하지만 ...
... 사용자가 링크를 누른 상태에서 번호를 먼저 1000ms마다 한 번씩 변경해야합니다. 7 회 반복하면 500ms마다 한 번씩 변경해야하고 5 회 반복하면 250ms마다 변경해야합니다. IF 숫자를 5로 나눌 수 없습니다. 그렇지 않으면 속도가 500ms로 유지됩니다.

릴리스시 카운터는 즉시 중지되어야합니다.

나는이 종류가 의미가 있기를 바란다, 나는 어디에서 시작해야하는지 정말로 모른다.

감사합니다, Knal

출처

2017-02-28 knalpiap

나는 속도 요구 사항을 구현하는 기능을 시작합니다. – MaxZoom

아마도 도움이 될 것입니다 : [https://api.jquery.com/mousedown/](https://api.jquery.com/mousedown/) –

@MaxZoom 죄송합니다. 귀하의 의견을 이해할 수 없습니다. – knalpiap

먼저 다음 href 속성을 제거 앵커 태그에 클릭 이벤트를 감지합니다. 귀하의 요구 사항을 위해 나는 아래의 코드가 도움이된다고 생각합니다.

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>

출처

2017-02-28 21:06:47

입력 해 주셔서 감사합니다! 어쩌면 나는 내 목표에서 완전히 명확하지 않다. 사용자가 링크를 누른 상태에서 숫자를 줄이고 늘리 길 원할 것이다. 그가 풀어 자마자 '동결'하지만 타이머 (또는 간격)가 재설정됩니다. 'mousedown'으로 '클릭'을 변경하려고해도 여전히 작동하지 않습니다 ... – knalpiap

속도가 증가하는 jQuery 카운터

답변

관련 문제