欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

在文本框中输入两个操作数和选择运算符后,在页面上显示输出结果

程序员文章站 2022-04-12 08:01:45
查看本章节查看作业目录需求说明:在文本框中输入两个操作数和选择运算符后,在页面上显示输出结果实现思路:单击“计算”按钮后,删除两个文本框左右两边的空格,删除空格后,判断输入框中是否都输入了内容,只要其中一个文本框没有输入,则提示“请输入两个操作数”在输入了数据的前提下,验证输入的是否都是数值,只要其中一个输入错误,则提示“请输入正确的数值”单击“计算”按钮,在判断输入的数据格式都是正确的前提下,根据用户选择的运算符号(可以选择 +、-、*、/)计算结果,并把结果显示在最后一个...

查看本章节

查看作业目录


需求说明:

在文本框中输入两个操作数和选择运算符后,在页面上显示输出结果

在文本框中输入两个操作数和选择运算符后,在页面上显示输出结果

实现思路:

  1. 单击“计算”按钮后,删除两个文本框左右两边的空格,删除空格后,判断输入框中是否都输入了内容,只要其中一个文本框没有输入,则提示“请输入两个操作数”
  2. 在输入了数据的前提下,验证输入的是否都是数值,只要其中一个输入错误,则提示“请输入正确的数值”
  3. 单击“计算”按钮,在判断输入的数据格式都是正确的前提下,根据用户选择的运算符号(可以选择 +、-、*、/)计算结果,并把结果显示在最后一个文本框中

实现代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="op1" />
		<select id="op">
			<option value="+">+</option>
			<option value="-">-</option>
			<option value="*">*</option>
			<option value="/">/</option>
		</select>
		<input type="text" id="op2" />
		=
		<input type="text" id="result" />
		<input type="button" id="btn" value="计算" onClick="calc()" />
		<!-- JS -->
		<script type="text/javascript">
			function calc(){
				var num1 = document.getElementById("op1").value;
				var num2 = document.getElementById("op2").value;
				var operator = document.getElementById("op").value;
				if (num1.trim()!=""&&num2.trim()!="") {
						console.log(operator);
					if(!isNaN(num1)&&!isNaN(num2)){
						document.getElementById("result").value=eval(num1+operator+num2);
					} else{
						alert("请输入正确的数值");
					}
				} else{
					alert("请输入两个操作数!");
				}
			}
		</script>
	</body>
</html>

 

 

本文地址:https://blog.csdn.net/weixin_44893902/article/details/109334821