计算器练习

最新推荐文章于 2024-09-25 14:20:02 发布

日拱一卒无有尽，功不唐捐终入海

最新推荐文章于 2024-09-25 14:20:02 发布

阅读量5.6k

点赞数

分类专栏： JavaScript 文章标签：测试工具

本文链接：https://blog.csdn.net/m0_49128301/article/details/120700515

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

"本文通过一个HTML简易计算器的实现，探讨了JavaScript中数值与字符串操作的注意事项，包括加法运算时的类型转换问题。文章指出，当使用"+"运算符时，如果两边操作数类型不一致，会引发不同类型的数据拼接。并提供了使用parseFloat()进行转换以正确执行加减乘除运算的解决方案。同时，分析了不恰当类型转换可能导致的错误，如将数字再次转换为整数而丢失精度。"

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>01计算器</title>
		<script>
			//需求计算器能够实现整数加减乘除运算
			//两个输入框输入数字,一个下拉框选择运算符号,再来一个提交(计算)按钮,最后一个框用来显示结果.
			//第一步:构建第一个输入框(type类型为text,)
			//第二步:构建第二个输入框(type类型为text,)
			//第三步:构建一个选择器(使用select选择器标签内置(option选项标签))
			//第四步:构建输出结果的表单(还是用input)
			//做一个函数实现加减乘除运算(我们需要获取上面的标签节点对象,就要用到DOM对象中的getElementByID();属性，将这两个数字和一个运算符获取出来)
			/*
			构建函数
			function  cal() {
			
			switch(){
			  	case1:
			  	                语句体1
			  	        break ;      
			  	case2:
			  	                语句体1
			  	        break ; 
			  	
			  	case3:
			  	                语句体1
			  	        break ; 
			  	case4:
			  	                语句体1
			  	      default ; 
			  	        
			  	
			  }          
			
			}
			
			
		</script>
		
		<style>
			#s1{
				font-size: 50px;
				color: pink;
			}
			.input{
				margin-left: 100px;
				margin-top: 50px;
			}
		</style>
	</head>
	<body background="我和狗狗.jpg"   >
		<h1 id="s1">自己做的简单简易网页计算器</h1>
		<input type="text" id="num1" />
		
		<select id="select">
		    <option  value="+">+</option>
			<option  value="-">-</option>	
			<option  value="*">*</option>
			<option  value="/">/</option>
		</select>
		
		<input type="text" id="num2" />
		<br />
		<input type="submit" value="计算" onclick="cal()" style="color: #FF0000;"/>
		<input type="text" id="result"  />
		
		
		<script type="text/javascript">
			
			//用DOM获取的对的对象节点应该放在函数中，用为函数需要调用这些对象进行计算
			function  cal() {
			var a=document.getElementById("num1").value;
			var b=document.getElementById("num2").value;
			var c=document.getElementById("select").value;
		    num1=parseFloat(a);
            num2=parseFloat(b);
			switch(c){
				 
			   case "+":
                document.getElementById("result").value=num1+num2;
                break;      
			    case"-":
			  	    document.getElementById("result").value=a-b; 
			  	    break ;
			  	case"*":
			  	    document.getElementById("result").value=a*b; 
			  	    break ;  
			  	case"/":
			  	    document.getElementById("result").value=a/b;     
			  	    break;      
			  }          
			
			}
		</script>
	</body>
</html>

出现的问题总结

当"+“两边的操作数，有其中的一个为字符串的时候，”+"为连接符，结果为字符串类型

当"+“两边的操作数，都为数值类型的时候，”+"为运算符，结果为数值类型

public class Test1 {
    public static void main(String[] args) {
        int a = 10;
        int b = 20;

        /*从左到右依次看，第一个"+"两边都是数值类型，所以第一个"+"为运算符，运算完成后，结果为数值类型，
          然后看第二个，第二个"+"右边为字符串，所以第二个"+"是连接符，结果为字符串类型*/
        System.out.println(a+b+"");
        
        /*从左到右依次看，第一个"+"左边为字符串，所以第一个"+"是连接符，连接完成后，结果为字符串类型
         然后看第二个，第二个"+"两边都是数值类型，所以第二个"+"为运算符*，结果为字符串类型*/
        System.out.println(""+a+b);
    }
}

输出结果为

1020

项目场景：

提示：这里简述项目相关背景：
例如：项目场景：简易计算器实现加减乘除的运算

问题描述：

提示：这里描述项目中遇到的问题：
①没有用parseFloat(); 时，发现可以计算加法时，输入的两个值由于是用字符串接收的，所以就会出现这种情况13+14=1314.

②把输入的两个值用parseFloat(); 把字符串穿换成数字时。就可以进行加法运算

原因分析：

HTML是从上到下执行，一边翻译一遍执行，前面转换过的值后面不用再重复转换

情况一：字符转换成浮点数，但是加法运算的时候又转换了一次把之前字符串转换出来的浮点数继续转成了整数型
num1=parseFloat(a);
            num2=parseFloat(b);
            switch(c){
                 
               case "+":
                document.getElementById("result").value=parseInt(num1)+parseInt(num2);
                break;
情况二：前面字符转换成浮点数，但是加法运算的时候直接用前面的浮点型，发现这样就可以计算小数加减法了。
    num1=parseFloat(a);
            num2=parseFloat(b);
            switch(c){
                 
               case "+":
                document.getElementById("result").value=num1+num2;
                break;