今天给你们分享一个使用js+html实现的简单计算器，可以实现任何的加减乘除

本文链接：https://blog.youkuaiyun.com/aA20030316/article/details/146473758

1.代码效果图

2.代码


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<style>
	
	</style>
</head>
<body>
<input type="text" id="num1" placeholder="请输入数值"/>
<input type="text" id="opt" placeholder="请输入操作符：+，-，*，/"/>
<input type="text" id="num2" placeholder="请输入数值"/>
<input type="button" value="点击计算" onClick="calculate()"/>
<input type="button" value="清空" onclick="a()" />
<br>
<hr>
结果=<span id="result"></span>
<script>
		
		function a(){
		
		 var num =document.getElementById("num1");
		  var op =document.getElementById("opt");
        var nu2 =document.getElementById("num2");
		var re=document.getElementById("result");
		 num.value="";
		 op.value="";
		 nu2.value="";
		 re.innerText="";
		}
    function calculate(){
	
        //获取输入框的内容
        var num1 =document.getElementById("num1").value;
        var opt =document.getElementById("opt").value;
        var num2 =document.getElementById("num2").value;
        //判断输入是否为数字
        if(isNaN(num1)||isNaN(num2)){
            alert("请输入数字");
            return ;
        }
        //把字符串类型的数字转换成数字类型的数字
        num1=Number(num1);
        num2=Number(num2);
 
        var result=0;
        switch (opt){
            case"+":
                result=num1+num2;
                break;
            case"-":
                result=num1-num2;
                break;
            case"*":
                result=num1*num2;
                break;
            case"/":
                //判断除数是否为0
                if(num2==0){
                    alert("除数不能为0");
                }else {
                    result=num1/num2;
                }
                break;
                default:
                    result=0
        }
        //结果显示
        result=result.toFixed(3);//结果小数点后保留三位
        document.getElementById("result").innerText=result;
    }
 
</script>
</body>
</html>