具有最大值和最小值的jQuery计数器
具有最大值和最小值的jQuery计数器
提问于 2014-12-20 18:38:02
我正在构建一个计数器，它应该增加到一个maxValue，并且不会比按下鼠标时进一步减少。我还可以选择将计数器重置为它的初始值：。另外，如果maxValue是偶数，它应该计算到这个数字。然而，如果maxValue是一个奇数，它应该计算到数字-1.
柜台似乎运转得很好。但有时它往往停留在两个价值之间。我很肯定，当我按下其中一个按钮，然后在另一个按钮上按下另一个按钮时，就会发生这种情况。有什么办法可以防止这种情况发生吗？我还想知道我的代码是否正确，是否有一种更简单的方法(可能有循环)？
总之，这是我的代码：
$(document).ready(function(){
var maxValue = 3;
var count = 0;
// intervals used to regulate how fast the value will change on mousedown
var upInterval;
var downInterval;
$('#counter').html("<p>" + parseInt(count) + "</p>");
$('#up').mousedown(function(){
// if the maxValue is an even number
if(maxValue % 2 == 0) {
upInterval = setInterval(function(){
if(count < maxValue) {
count++;
$('#counter').html("<p>" + parseInt(count) + "</p>");
}
},180);
}
// if it's an odd number, subtract one
else {
upInterval = setInterval(function(){
if(count < maxValue-1) {
count++;
$('#counter').html("<p>" + parseInt(count) + "</p>");
}
},180);
}
}).mouseup(function() {
clearInterval(upInterval);
});
$('#down').mousedown(function(){
downInterval = setInterval(function(){
if(count > 0) {
count--;
$('#counter').html("<p>" + parseInt(count) + "</p>");
}
},180);
}).mouseup(function() {
clearInterval(downInterval);
});
$('#reset').click(function(){
count = 0;
$('#counter').html("<p>" + parseInt(count) + "</p>");
});
});请记住，当我按下鼠标时，时间间隔可以调节数字的变化速度，并阻止它的递增或递减。
这是一个小提琴
谢谢!
Stack Overflow用户
回答已采纳
发布于 2014-12-20 19:23:24
http://jsbin.com/nobigo/3/edit
在上面的演示中，我创建了一个用例，您可以在其中处理多个元素。它还有，一个更好的UX，因为它使用setTimeout (而不是interval)，只要您持有它，它就会逐渐提高计数速度。
http://jsbin.com/pocici/3/edit?html,js,output
$(document).ready(function(){
var $counter = $("#counter p"), // Get the 'p' element
max = 10,
c = 0,
up = true, // boolean // This will keep track of the clicked up/dn button
itv;
function incDec(){
c = up ? ++c : --c; // value of `up` is true? increment, else: decrement
c = Math.min(Math.max(c, 0), max); // dididababaduuuu!
$counter.text(c); // Set current `c` into element
}
$('#up, #down').on("mousedown", function(e){
up = this.id==="up"; // set to true if button in "up"; else: false
incDec(); // Trigger on sligle click
clearInterval(itv); // Clear some ongoing intervals
itv=setInterval(incDec, 180); // Do every 180 untill..
}).on("mouseup mouseleave", function(){ // ..mouseup or mouseleave
clearInterval(itv);
});
$('#reset').click(function(){
c = 0; // Reset to 0
$counter.text(c); // Show that "0"
}).click(); // Trigger a reset click on DOM ready
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27583172
复制相关文章
相似问题
腾讯云开发者
