Question

我正在尝试使用jQuery创建一个简单的cookie clicker类型游戏（单击计数器）。我想要一个按钮，使点击的价值每秒增加一个。我怎么会这样做，我的编码有错误吗？我对这一切都很陌生。

这是我的代码：

$(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>

Answer 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>

Answer 2

如果我理解正确，那么您正在努力解决的问题就是每秒钟增加一次点击的价值。您将要使用setInterval

jsfiddle Demo

＆＃13;

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

＆＃13;

<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>

＆＃13;

jQuery点击计数器

2 个答案: