2016-04-30 100 views
1

我想用jQuery制作一个简单的cookie点击器类型游戏(点击计数器)。我想要一个按钮,使点击的价值每秒上升一个。我会如何去解决这个问题,并且在我的编码中是否有错误?我对这一切都很陌生。jQuery点击计数器

这里是我的代码:

$(function() { 
 
    $('#target').click(function() { 
 
    $('#output').html(function(i, val) { 
 
     return val * 1 + 1; 
 
    }); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"> 
 
    <button id="target" type="button">Click</button> 
 
    <div id="output">0</div> 
 
</div>

+0

为了避免解析每次更新的数量,您可能希望创建一个名为'你操控count'和显示来自JS变量。 – 4castle

回答

0

如果我正确认识你,你挣扎比特每秒一次增加每次点击的价值。你要使用setInterval

jsfiddle Demo

var score = parseInt($('#output').html()); 
 
$(function() { 
 
    setInterval(function() { 
 
    score += 1; 
 
    $('#output').html(score); 
 
    }, 1000); 
 

 
    $('#target').click(function() { 
 
    score += 1; 
 
    $('#output').html(score); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"> 
 
    <button id="target" type="button">Target</button> 
 
    <br/> 
 
    <div id="output">0</div> 
 
</div>

+0

我刚试过这个,但是价值并不是每秒都在增加?对不起,我是一个普通的编码巨大的noob。 –

+0

对不起 - 它1:30 am - 有点累。它的工作现在 – Erresen

+0

嗨,它只是随机增加现在的价值?我试图做的是制作一个按钮,点击后每秒增加一个值。当我点击主按钮时,它会将值增加1。 –

1

一个按钮自动“点击”按钮将需要添加一个setInterval,不断刷新的数字,和另一个按钮这会更改每次刷新时添加的点击次数。

下面是我该怎么做。我已经用这种方式编码它,您可以轻松地添加其他按钮,以其他方式更改点击率。注意增加count和递增countRate之间的差异。 JSFiddle

$(function() { 
 
    var count = 0, countRate = 0, output = $('#output'); 
 

 
    setInterval(function(){ output.html(count) }, 1); // update continually 
 
    setInterval(function(){ count += countRate }, 1000); // update once-per-second 
 

 
    $('#click').click(function(){ count += 1 }); 
 
    $('#autoClick').click(function(){ countRate += 1 }); 
 
});
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> 
 

 
<button id="click">Click</button> 
 
<button id="autoClick">Auto Click</button> 
 
<div id="output">0</div>

+0

我已经更新了我的算法几次。现在好多了。 – 4castle