【问题标题】:Simple multiplication calculator with thousand separator带千位分隔符的简单乘法计算器
【发布时间】:2018-08-19 11:47:41
【问题描述】:

这是一个简单的乘法计算器,它将框 1 的值乘以框 2 的值并产生结果。我想要实现的是所有三个框都应该添加千位分隔符,同时保留小数部分。

如果我在框 1 或 2 中输入 1000,它应该会自动转换为 1,000

例如:1232323 x 23 应为 1,232,323 x 23 = 28,343,429

	function calculate() {
		var myBox1 = document.getElementById('box1').value;	
		var myBox2 = document.getElementById('box2').value;
		var result = document.getElementById('result');	
		var myResult = myBox1 * myBox2;
		result.value = myResult;
      }
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
<table width="80%" border="0">
  <tr>
    <th>Box 1</th>
    <th>Box 2</th>
    <th>Result</th>
  </tr>
  <tr>
    <td><input id="box1" type="text" oninput="calculate()" /></td>
    <td><input id="box2" type="text" oninput="calculate()" /></td>
    <td><input id="result" /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
  
</body>
</html>

【问题讨论】:

  • 嗨!请使用tour(您将获得徽章!),环顾四周,并阅读help center,尤其是How do I ask a good question? 您最好的选择是进行研究,search 以获取有关 SO 的相关主题,试一试。 如果您在进行更多研究和搜索后遇到困难并且无法摆脱困境,请发布您的尝试minimal reproducible example,并具体说明您遇到的问题。人们会很乐意提供帮助。
  • 可能有很多类似的问题,但这并不特定于我正在寻找的内容。
  • 请把你的问题解释清楚
  • 请看下面的答案。计算器应添加逗号分隔值。

标签: javascript html converter currency multiplication


【解决方案1】:

您可以使用以下内容作为答案。

function calculate() {
  var myBox1 = updateValue('box1');
  var myBox2 = updateValue('box2');
  var myResult = myBox1 * myBox2;
  adTextRes('result', myResult)
}

function updateValue(nameOf) {
  var inputNo = document.getElementById(nameOf).value;
  var no = createNo(inputNo);
  adTextRes(nameOf, no);
  return no;
}

function adTextRes(nameOf, no) {
  var asText = String(no).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  document.getElementById(nameOf).value = asText;
}

function createNo(textin) {
  return Number(textin.replace(/,/g, ""));
}
<table width="80%" border="0">
  <tr>
    <th>Box 1</th>
    <th>Box 2</th>
    <th>Result</th>
  </tr>
  <tr>
    <td><input id="box1" type="text" oninput="calculate()" /></td>
    <td><input id="box2" type="text" oninput="calculate()" /></td>
    <td><input id="result" /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

【讨论】:

  • 谢谢你。这已经足够接近了。唯一的问题是上述字段不接受像 6,447.95 这样的十进制值。
  • 小数部分可以保留吗?
  • 复制粘贴工作,但不能输入十进制值。如果你请解决这个问题;会很棒的。
猜你喜欢
  • 2012-10-01
  • 1970-01-01
  • 1970-01-01
  • 2021-04-19
  • 1970-01-01
  • 1970-01-01
  • 2012-03-05
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多