javascript - 计数器不会按小数递增

Question

我正在尝试 JavaScript，到目前为止，我一直在尝试做的事情相对成功。尽管我意识到我正在做的大部分事情可能都做得不正确或效率低下。

对于我的第一个“项目”，我试图制作一款基本游戏。单击镐，它会为您的岩石总数添加+1。击中 5 个石头后，您可以购买一把铲子，它将开始以每秒 1 个的速度为您生成石头。目前，我必须将其设置为每秒 1 次，因为低于 1 的值似乎不起作用。

我的代码(它仍然有点困惑，因为我已经对其进行了很多调整):

<强> JSBIN DEMO

HTML:

Total Rocks: <input id="txtNumber" type="text" value="0" onfocus="this.blur()" style=" border:none; text-align:center; background-color:transparent;" />
<br>

<img style="border:0;" src="http://img2.wikia.nocookie.net/__cb20130308043142/minecraftpocketedition/images/6/6d/Pickaxe_1.jpeg" onclick="javascript:add()">
<br>

Rocks per second: <input id="perSec" type="text" value="0" onfocus="this.blur()" style="width:30px; border:none; text-align:center; background-color:transparent;" />
<br>     

Shovel(<input id="shovelCount" type="text" value="0" onfocus="this.blur()" style="width:20px; border:none; text-align:center; background-color:transparent;" />): 5 rocks 

<input id="shovelBuy" type="button" value="Buy" onclick="javascript:shovel()"/>

</body>

Javascript:

var totalRocks = 0;
var rocksPerSec = 0;
    function increment() {
       var txtNumber = document.getElementById("txtNumber");
       var newNumber = parseInt(txtNumber.value, 10) + rocksPerSec;
       txtNumber.value = newNumber;
    }
setInterval(function(){increment();}, 1000);

function add()
{
  var txtNumber = document.getElementById("txtNumber");
  var newNumber = parseInt(txtNumber.value, 10) + 1;
  txtNumber.value = newNumber;
}

function shovel()
{
  var txtNumber = document.getElementById("txtNumber");
  var value = parseInt(txtNumber.value, 10);
  if(value >= 5){
    var newNumber = parseInt(txtNumber.value, 10) - 5;
    txtNumber.value = newNumber;
    var shovelCount = document.getElementById("shovelCount");
    var newCount = parseInt(shovelCount.value, 10) + 1;
    shovelCount.value = newCount;

    rocksPerSec = rocksPerSec +1;
    return false;
  } 
}

我的问题:为什么我不能将计数器 (rockPerSec) 增加十进制值？

Answer 1

我做了this fiddle..你基本上必须用 parseFloat() 替换 parseInt() ，如果你问“为什么？”，答案是因为如果你想增加例如，岩石数量增加 0.2，parseInt(0.2) 始终为 0。因此，您总是将 0.2 添加到 0 并将其解析回 0..希望它有帮助..

var totalRocks = 0;
var rocksPerSec = 0;
    function increment() {
       var txtNumber = document.getElementById("txtNumber");
       var newNumber = parseFloat(txtNumber.value, 10) + rocksPerSec;
       txtNumber.value = newNumber;
    }
setInterval(function(){increment();}, 1000);

function add()
{
  var txtNumber = document.getElementById("txtNumber");
  var newNumber = parseFloat(txtNumber.value, 10) + 1;
  txtNumber.value = newNumber;
}

function shovel()
{
  var txtNumber = document.getElementById("txtNumber");
  var value = parseFloat(txtNumber.value, 10);
  if(value >= 5){
    var newNumber = parseInt(txtNumber.value, 10) - 5;
    txtNumber.value = newNumber;
    var shovelCount = document.getElementById("shovelCount");
    var newCount = parseFloat(shovelCount.value, 10) + 1;
    shovelCount.value = newCount;

    rocksPerSec = rocksPerSec + 0.2;
    return false;
  } 
}