HTML/CSS/JS设计计算机加减乘除

最新推荐文章于 2024-04-30 16:57:21 发布

以太猪猪

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量1.6k

点赞数

分类专栏： JavaWeb web javaEE 文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_44914079/article/details/126046393

版权

JavaWeb 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

web

2 篇文章 0 订阅

订阅专栏

javaEE

2 篇文章 0 订阅

订阅专栏

目标：JS实现计算器的效果

内容：

input获取前端输入的结果
parseFloat将文本转化为数字
document.getElementById(“xx”).value获取input输入的值
最后精髓计算BUG，输出了NaN,或者undefine

上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>加减乘除计算(单选框默认选择)</title>
    <style>	
		
    </style>
</head>
<body>
	<form action="" method="post" name="myform" id="myform">
		<div class="wrapper" id="_wrapper">        	
			操作数1：<input type="text" name="number1" id="number1" autocomplete="off"/><br><br>
			<input type="radio" name="count" id="" value="" checked="checked"/>加法
			<input type="radio" name="count" id="" value=""/>减法
			<input type="radio" name="count" id="" value=""/>乘法
			<input type="radio" name="count" id="" value=""/>除法<br><br>
			操作数2：<input type="text"  id="number2" autocomplete="off"/><br><br>	
			
			<input type="button" value="计算" id="" οnclick="jisuan()"/>
			<input type="reset" value="重置" id="" /><br><br>
			
			计算结果：<input name="txtResult" type="text" id="txtResult" autocomplete="off"/>
			
		</div>
	</form>

	<script>
		
		var str;
		var num1 = 0;
		var num2 = 0;	
			
		//点击事件	//document.form的name值.input的name值.value
		function jisuan(){
			str = document.getElementsByName('count');
			num1 = parseFloat(document.getElementById("number1").value);
			num2 = parseFloat(document.myform.number2.value);
			//判断文本框是否为空
			//注意此处文本框获取值时使用了parseFloat转换，所以当文本框为空时是NaN，并不是""和null，所以需要用到isNaN来判断。
			if(isNaN(num1) && isNaN(num2)){
				alert("请先填写数据！");
			}
			else if(isNaN(num1)){
				alert("请填写操作数1！");
			}
			else if(isNaN(num2)){
				alert("请填写操作数2！");
			}
			else{
				danxuankuang();
			}	
		}
		
		//判断单选框是否选中
		function danxuankuang(){
			if(str[0].checked == true){
				document.myform.txtResult.value=num1+num2;
			}
			else if(str[1].checked == true){
				document.myform.txtResult.value=num1-num2;
			}
			else if(str[2].checked == true){
				document.myform.txtResult.value=num1*num2;
			}
			else if(str[3].checked == true){
				document.myform.txtResult.value=num1/num2;
			}
			else{
				alert("单选框异常，未选中！");
			}			
		}		
		
	</script>
</body>
</html>

产出：

途径:华东师范大学-毛宏燕老师的JavaEE计数与实践中的JS篇
代码:网上搬运

乱语:
自己写的有个bug,在不断的实验中发现了bug出现的问题。
那就是获取input的值需要在点击计算触发事件之后，
如果在触发事件之前或者说js函数外面，
那么当还没有输入的时候就已经获取了空的文本，
以至于输出的内容是错误的或者说是NaN。

截图提示：
在这里插入图片描述
小知识点：

js是弱类型语言，因为它的变量类型没有分，int或者flag或者bool或者string，
如果你给它个“0”，他就是数字类型，你给个“字符”它就是字符串，
以至于我们在计算的时候需要使用parseFloat来进行文本的转换，
这个地方也可以考虑将input中的type设置为number，
我感觉理论是是可行的，编辑的时候还没有尝试。算了还是试了一下，不出我所料是可以的，而且number类型的可以设置数字都不用输入。