如何每次数五而不是一

Question

你看，当我第一次点击按钮时，它增加了 6 而不是 5，之后它每次都只增加 1。我不知道如何解决这个问题，因为我对 javascript 一无所知。当它达到 100¢ 时是否有可能变成 1 美元然后如果你再次点击它它会变成 1.01 美元然后变成 1.02 美元等等。

var number = 5

function plusOne(value) {
  number++;
  count.textContent = number.toString();
}

#coin {
  background-image: url("http://pngimg.com/uploads/coin/coin_PNG36868.png");
  border: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 200px 200px;
  background-color: white;
  width: 200px;
  height: 200px;
}
#coin:active {
  width: 190px;
  height: 190px;
  background-size: 190px 190px;
}

<!DOCTYPE html>
<html>
<head>
<title>Coin Clicker</title>
</head>
</html>

<html>
<body>

<div>
  <span id="count">0</span><span>¢</span>
</div>

<div>
  <button id="coin" onclick="plusOne(value)" alt="coin"></button>
</div>

</body>
</html>

Answer 1

如果想从 1 开始，将 var number 改为 1

并将此添加到增加 5 的函数中：

number = number + 5 ;

并将此添加到增加 0.01 的函数中：

numberChange = numberChange + 0.01 ;

增加 0.01 而不是 number++，因为它会在每次点击时增加 1。

你可能会问为什么用number += 0.01虽然上面的表达方式不同，但它和number= number + 0.01是一样的。它是这样工作的：

var number = 1;  
number = 1 + 0.01  
number = 1.01 
then number = number + 0.01  
number = 1.01 + 0.01
number  = 1.02  
then so on .....

toFixed(2) 仅显示最多 2 位小数的结果，因为在添加小数时每次迭代都会有差异，因此将其删除。
See this for .toFixed

var number = 90
var numberChange = 1

function plusOne(value) {
  number += 5;
  count.textContent = number.toString();
  changeCurSign.innerHTML = "¢";
  if (number > 99) {
    numberChange += 0.01;
    var reed = numberChange.toFixed(2)
    count.textContent = reed.toString();
    changeCurSign.innerHTML = "$";
  }
}

#coin {
  background-image: url("http://pngimg.com/uploads/coin/coin_PNG36868.png");
  border: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 200px 200px;
  background-color: white;
  width: 200px;
  height: 200px;
}

#coin:active {
  width: 190px;
  height: 190px;
  background-size: 190px 190px;
}

<!DOCTYPE html>
<html>

<head>
  <title>Coin Clicker</title>
</head>

</html>

<html>

<body>

  <div>
    <span id="count">0</span><span id="changeCurSign">¢</span>
  </div>

  <div>
    <button id="coin" onclick="plusOne(value)" alt="coin"></button>
  </div>

</body>

</html>

Answer 2

从“0”开始变量，因为当您单击按钮时，脚本已经将 +5 添加到变量。使用 number = number + 5;

更容易更改变量的值

如果你想回答你的第二个问题，请打开第二个问题并展示解决第二个问题的尝试。

var number = 0;

function plusOne(value) {
  number = number + 5;
  count.textContent = number.toString();
}

#coin {
  background-image: url("http://pngimg.com/uploads/coin/coin_PNG36868.png");
  border: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 200px 200px;
  background-color: white;
  width: 200px;
  height: 200px;
}
#coin:active {
  width: 190px;
  height: 190px;
  background-size: 190px 190px;
}

<!DOCTYPE html>
<html>
<head>
<title>Coin Clicker</title>
</head>
</html>

<html>
<body>

<div>
  <span id="count">0</span><span>¢</span>
</div>

<div>
  <button id="coin" onclick="plusOne(value)" alt="coin"></button>
</div>

</body>
</html>

Answer 3

How to count five every time instead of one

number++ 基本上就是 number + 1。只需将 number 的初始值更改为 0 并将 number++ 更改为 number = number + 5 ，如下所示：

function plusOne(value) {
  number += 5; // this is equivalent to "number = number + 5"
  count.innerHTML = number.toString();
}

And when it gets to 100¢ is it possible to make it and then if you click it again it goes to .01 and then .02 and so on.

只需添加第二个名为 dollar 的变量，并在达到 100¢ 后使用 if/else 条件来添加美元价值以及 0.01 加法像这样：

let number = 0;
let dollar = 1;

function plusOne() {
  if(number < 95) {
    number += 5; // this is equivalent to "number = number + 5"
    count.innerHTML = number.toString() + '</span><span>¢</span>';
  } else {
    dollar += 0.01;
    count.innerHTML = dollar.toFixed(2).toString() + '</span><span>$</span>';
  }
}

检查并运行以下代码片段以获取上述代码的实际示例：

let number = 0;
let dollar = 1;

function plusOne() {
  if(number < 95) {
    number += 5; // this is equivalent to "number = number + 5"
    count.innerHTML = number.toString() + '</span><span>¢</span>';
  } else if(number < 100) {
    number += 5; // add 5 to number but start inserting the "dollar" value to html now
    count.innerHTML = dollar.toString() + '</span><span>$</span>';
  } else {
      dollar += 0.01;
      count.innerHTML = dollar.toFixed(2).toString() + '</span><span>$</span>';
  }
}

document.querySelector('#coin').addEventListener('click', plusOne);

#coin {
  background-image: url("http://pngimg.com/uploads/coin/coin_PNG36868.png");
  border: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 200px 200px;
  background-color: white;
  width: 200px;
  height: 200px;
}
#coin:active {
  width: 190px;
  height: 190px;
  background-size: 190px 190px;
}

<div>
  <span id="count">0</span>
</div>

<div>
  <button id="coin" alt="coin"></button>
</div>

如何每次数五而不是一

How to count five every time instead of one

html

javascript

css

operators

onclick