Question

我正在尝试创建一个用户单击链接（mousedown行为）的功能，<a href="#" id="down"> - </a>或<a href="#" id="up"> + </a>。根据单击哪一个，div中的值以1：<div id="counter">1</div>

增加或减少

最小值为1，最大值为100.到目前为止，没有实际问题。但是......
...当用户按下链接时，数字应首先每1000毫秒更改一次，经过7次迭代后应更改为每500毫秒一次，经过5次迭代后，每隔250毫秒更改一次 IF 不能除以5，否则速度'保持'500ms。

释放时，计数器应立即停止。

我希望这种情况有道理，我真的不知道从哪里开始。

谢谢， Knal

Answer 1

首先，如果要检测锚标记上的click事件，请删除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>

jQuery计数器的速度越来越快

1 个答案: