计数器不会按小数递增答案

【问题标题】：Counter wont increment by decimals计数器不会按小数递增
【发布时间】：2014-08-01 22:18:30
【问题描述】：

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

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

我的代码（它仍然有些混乱，因为我已经调整了很多）：

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) 增加一个十进制值？

【问题讨论】：

你可以在任何地方使用 parseFloat 而不是 parseInt ;)
我几乎一无所知。我实际上是在拼凑代码并调整它们，直到我理解它们的作用。我会查查的。谢谢。

标签： javascript html

【解决方案1】：

我做了this 小提琴..你基本上必须用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;
  } 
}

【讨论】：

Icepickle 在 cmets 中提到了这一点，并修复了它。（：但是我会复制我留给他的评论。“什么会导致我在这里看到的结果？jsbin.com/mibay/21/edit 点击 5 次，买一把铲子，看着柜台上涨。这是增加 0.01 但最终显示额外的小数位”
This 可能会帮助你...
嗯，读起来很有趣。虽然，我没有看到太多关于如何将其限制为小数点后两位的内容。
你可以使用 Math.round(num * 100) / 100
我确实试过了，但似乎没什么区别。要么是那个，要么是我做错了。在这一点上，我对 JS 知之甚少。哈哈

【解决方案2】：

作为对您第一个项目的帮助，我认为我提出了结构化代码的建议

jsfiddle：http://jsfiddle.net/j8CJS/

您可以在哪里使用

开始代码

var miner = new Miner();
miner.start();

它还允许重置和停止（或者暂停）您当前的游戏。当相关属性发生更改时，您的 html 代码会发生更改，并添加了一些我通常会从 jquery 借用的功能:)

【讨论】：