提高速度的jQuery计数器

-1

我试图创建一个函数，其中用户单击链接（mousedown行为），<a href="#" id="down"> - </a>或<a href="#" id="up"> + </a>。基于哪一个被点击，div中的值随着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

感谢您的输入！也许我还没有完全清楚我的目标：想在用户按下链接时减少和增加数字。当他释放数字'冻结'但定时器（或间隔）被重置。当我尝试将'click'改为'mousedown'时，我仍然无法正常工作...... – knalpiap

提高速度的jQuery计数器

回答

相关问题