用JavaScript完成简单的计算器功能

最新推荐文章于 2024-09-22 11:17:00 发布

漠尘01

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量477

点赞数 1

文章标签： javascript 算法 css js html

本文链接：https://blog.csdn.net/YangXin94/article/details/109181518

版权

JavaScript计算功能

代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			h1 {
				padding-left: 200px;
			}
		</style>
	</head>

	<body>
		<h1>计算器</h1>
		<input type="text" id="num1" placeholder="请输入第一个数字" />
		<!-- 下拉菜单   -->
		<select id="operator">
			<option value="isFalse">请选择运算符</option>
			<option value="+">+</option>
			<option value="-">-</option>
			<option value="*">*</option>
			<option value="/">/</option>
		</select>
		<input type="text" id="num2" placeholder="请输入第二个数字" />
		<input type="button" value="计算" onclick="count()" /><br />
		<span>计算结果:</span><span id="show"></span>

		<!-- JavaScript样式 -->
		<script>
			function count() {
				// 获取文本框输入的数字
				var num1 = document.getElementById("num1").value; // 获取第一个数字
				var num2 = document.getElementById("num2").value; // 获取第二个数字
				// 获取下拉菜单选取的内容
				var operatorID = document.getElementById("operator");
				var index = operatorID.selectedIndex;
				var operator = operatorID.options[index].value;
				// 判断是否为数字
				var isNumber = isNaN(num1) || isNaN(num2);
				// 定义判断加减乘除的条件
				var isAdd = (operator == "+" && !isNumber); // 加法
				var isSubtract = (operator == "-" && !isNumber); // 减法
				var isMultiply = (operator == "*" && !isNumber); // 乘法
				var isDivideBy = (operator == "/" && !isNumber); // 除法
				var isSelect = operator == ("isFalse");
				// 判断加减乘除和文本框输入的内容
				if(isAdd) {
					// 加法
					var num = Number(num1) + Number(num2);
					num = num.toFixed(2);
					document.getElementById("show").innerText = num;//写入到id为show的节点中
				} else if(isSubtract) {
					// 减法
					var num = Number(num1) - Number(num2);
					num = num.toFixed(2);
					document.getElementById("show").innerText = num;//写入到id为show的节点中
				} else if(isMultiply) {
					// 乘法
					var num = Number(num1) * Number(num2);
					num = num.toFixed(2);
					document.getElementById("show").innerText = num;//写入到id为show的节点中
				} else if(isDivideBy) {
					// 除法
					if(num2 == 0) {
						// 除数不能为0
						alert("除数不能为0");
					} else {
						var num = Number(num1) / Number(num2);
						num = num.toFixed(2);
						document.getElementById("show").innerText = num;//写入到id为show的节点中
					}
				} else if(isSelect) {
					// 如果没有选择，则弹出请选择运算符
					alert("请选择运算符！！！");
				} else if(isNumber) {
					// 如果输入的不是数字，弹出请输入数字
					alert("请输入数字！！！");
				}
			}
		</script>
	</body>
</html>