js实现单个输入框内简单的加减乘除计算

hazyram

已于 2022-11-28 17:06:32 修改

阅读量1.8k

点赞数 1

分类专栏：技术文章标签： JavaScript HTML 在线计算器实时计算基础运算

于 2021-05-31 15:21:49 首次发布

本文链接：https://blog.csdn.net/weixin_58404099/article/details/117417337

版权

技术专栏收录该内容

16 篇文章 0 订阅

订阅专栏

这是一个简单的加减乘除计算，更多的是提供一个思路，没做很复杂的边界处理！！！

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<input type="text" id="comp" onchange="compute()">
			<button onclick="clearInput()">清空</button>
		</div>
		<script>
			var inputEl = document.getElementById("comp")
			// 计算输入框失去焦点时 计算内容
			function compute() {
				var value = inputEl.value
				value = value.replace(/\s*/g, "");
				var reg1 = /^(0|([1-9]\d*))(\.\d+)?[\+\-\*\/](0|([1-9]\d*))(\.\d+)?$/ //不限制小数位数的表达式
				var reg2 = /^[+-]?(0|([1-9]\d*))(\.\d+)?$/ // 只有一个数字
				var result = ''
				if (reg1.test(value)) {
					let values = value.split(/[\+\-\*\/]/) // 根据运算符分割数字
					let num1 = parseFloat(values[0])
					let num2 = parseFloat(values[1])
					if (value.indexOf('+') !== -1) {
						result = formatValue(num1 + num2, 1)
					}
					if (value.indexOf('-') !== -1) {
						result = formatValue(num1 - num2, 1)
					}
					if (value.indexOf('*') !== -1) {
						result = formatValue(num1 * num2, 1)
					}
					if (value.indexOf('/') !== -1) {
						result = formatValue(num1 / num2, 1)
					}
				} else if (reg2.test(value)) {
					result = value
				} else {
					result = ''
				}
				inputEl.value = result;
			}
			// 处理小数精度问题
			function formatValue(value, digit) {
				var m = Math.pow(10, digit);
				return parseFloat(value * m, 10) / m; // parseFloat()：第一个参数 - String ，第二个参数 - 进制数
			}
			// 清空输入框内容
			function clearInput() {
				inputEl.value = ''
			}
		</script>
	</body>
</html>

hazyram

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
js实现单个输入框内简单的加减乘除计算

代码示例：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div> <input type="text" id="comp" onchange="compute()"> <button onclick="clearInput()"&
复制链接

扫一扫

专栏目录