javascript - 带千位分隔符的简单乘法计算器
问题描述
这是一个简单的乘法计算器,它将框 1 值 x 框 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> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
解决方案
您可以使用以下内容作为答案。
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> </td>
<td> </td>
<td> </td>
</tr>
</table>
推荐阅读
- r - 2个文件的tf-idf的替代品?
- docker - 你能告诉我如何在 docker run 期间传递 CONTAINER env 路径文件吗
- javascript - 通过检查具有相同元素的数组,将 2d 数组与另一个 2d 数组进行比较
- node.js - 从聚合中的数组中查找 1 个特定值
- grafana - grafana (SLA) 中的网站可用性百分比
- java - 如何制作 Android Studio 蓝牙连接应用
- python - 如何确定python中任何生成器的yield/send/return值
- python - 无法使用 Selenium Python 填写到期日期文本字段
- android - 在 android kotlin 中使用 SAF 实现 Scope 存储
- python - 在 Python 中,0 ==(1 或 0)返回 False。为什么它不返回True?