提案

Question

我正在开发一个小应用程序来提高我的js技能。它意味着允许用户输入一定数量的便士，并且从这里计算出正确和最小量的变化以计算这个数量。

目前，我有适当面额（1p，2p，5p，10p，20p，50p，£1，£2）的便士输入，但我不知道如何让它显示最小的变化需要弥补便士的总数？

以下是我的代码到目前为止，任何帮助将不胜感激，因为我真的想学习如何做这件事：

function calculate() {
  var list = []
  var x = document.getElementById("pennies").value;

  resultTwoPounds = x / 200;
  resultTwoPounds * 2;
  list.push(Math.floor(resultTwoPounds));

  resultPounds = x / 100;
  list.push(Math.floor(resultPounds));

  remaining = x % 100;
  remainPennyFifty = Math.floor(remaining / 50);
  list.push(remainPennyFifty);

  remaining = x % 100;
  remainPennyTwenty = Math.floor(remaining / 20);
  list.push(remainPennyTwenty);

  remaining = x % 100;
  remainPennyTen = Math.floor(remaining / 10);
  list.push(remainPennyTen);

  remaining = x % 10;
  list.push(Math.floor(remaining / 5));

  remaining = x % 10;
  list.push(Math.floor(remaining / 2));

  remaining = x % 10;
  list.push(Math.floor(remaining));

  if (x > 0) {
    resultLine = "You have <strong>" + x + " pennies</strong>, breakdown as follows: <br><br><strong>£2</strong> *" + list[0] + "<br><br><strong>" + "£1</strong> *" + list[1] + "<br><br><strong>50p</strong>" + " *" + list[2] + "<br><br><strong>20p</strong>" + " *" + list[3] + "<br><br><strong>10p</strong>" + " *" + list[4] + "<br><br><strong>5p</strong>" + " *" + list[5] + "<br><br><strong>2p</strong>" + " *" + list[6] + "<br><br><strong>1p</strong>" + " *" + list[7]
  } else {
    resultLine = "Please enter an amount"
  }

  document.getElementById('result').innerHTML = resultLine;

  $("#submit").submit(function(e) {
    e.preventDefault();
  });
}

#pennies {
  width: 6em;
  vertical-align: middle;
}

#submit {
  text-align: center;
}

.mainCalc {
  text-align: center;
  align-content: center;
}

.headings {
  text-align: center;
  color: white;
}

body {
  margin-top: 200px;
  background-color: lightblue;
}

#printResult {
  text-align: center;
  padding-top: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="headings">
  <h1>pennyCalc
    <h1>
</div>

<!-- Start of form -->
<form onsubmit="return false">
  <div class="mainCalc">
    <br>
    <strong>p:</strong>
    <input type="number" placeholder=" Amount" step="1" min="0" id="pennies">
    <br>
    <button type="buttom" id="submit" onclick="calculate()">Calculate!</button>
    <br>
  </div>
</form>
<div id="printResult"><span id="result"></span></div>

Answer 1

提案

我已经制作了你的计算器版本，如果可能的话，让我告诉你它是如何工作的。

该功能的作用相同，但我组织它的方式却不同。您不需要使用jQuery（因为您没有在此问题上添加jQuery标记）。

让我们创建一个函数divide，它将返回除法整数结果的数组以及x和y之间的欧几里德除法的余数。为此，我将使用%模数运算符和Math.floor()函数：
```
const divide = (x, y) => { return [ Math.floor(x/y), x % y ] };
```
我正在使用简写arrow function表达式来声明它。
然后我们将编写实际函数calculate()：声明obj，将包含的对象是值和x，即金额。在每一步中，我们将减少x的值，并将新属性附加到对象obj。

使用我们之前的divide函数，这很容易做到，你只需写下这一行：
```
[ obj['twoPounds'], x ] = divide(x, 200);
```
通过destructuring divide(x, 200)返回的数组，我们将除法结果分配给twoPounds的属性obj，并将除法的余数分配给{{1} }}

同样的结果会得到满足：
```
x
```
但是不是两次调用函数，而是只执行一次，代码更清晰。

为每种硬币类型调用let result = division(x, 200); obj['twoPounds'] = result[0]; x = result[1]后，divide的值为x，0将填充每种硬币类型的硬币数量。
最后，我们可以使用带有反引号（obj）和`语法的template literals格式化我们的回复。这样我们就可以在字符串中嵌入JavaScript变量，并在编辑器中编写HTML标记时跳转行。

例如：
```
${}
```
与写作相同：
```
`You have ${obj.twoPounds} coins of £2`
```

JavaScript代码和预览

'You have' + obj.twoPounds + 'coins of £2'

预览：

从便士改变计算器 - js

1 个答案:

提案

JavaScript代码和预览

更短的版本