用JavaScript做一个计算器,下拉框选择加减乘除操作,点击按钮计算结果。

用JavaScript做一个计算器,下拉框选择加减乘除操作,点击按钮计算结果。

1.设计思路:

  • 首先,要有3个文本框,一个是输入值1,设id为val01;一个输入值2,设id为val02;还有一个是计算结果值返回到这个文本框里面,设id为val03。
 代码如下:
			"text" id="val01">
			"text" id="val02">
			"text" id="val03">
  • 其次,要设计一个下拉框,里面有“+”,“-”,“*”,“/”,“%”这些功能。
代码如下:
		 
  • 最后,设计一个按钮“=”,当点击按钮时会显示计算结果。
代码如下:
		

图片如下:
用JavaScript做一个计算器,下拉框选择加减乘除操作,点击按钮计算结果。_第1张图片
2.通过JavaScript实现计算效果

js代码如下:
<script>
        function f(){
        //设置一个f()的函数
            var sel = document.getElementById("sel");
            //在文档中查找id名字叫sel的文档
            var val01 = document.getElementById("val01");
            //在文档中查找id名字叫val01的文档
            var val02 = document.getElementById("val02");
            //在文档中查找id名字叫val02的文档
            var val03 = document.getElementById("val03");
            //在文档中查找id名字叫val03的文档
            if(sel.value == "+"){
            //如果sel.value值是“=”
                val03.value=Number(val01.value)+Number(val02.value);
                //执行这段代码
                //Number()是强制转化成数字类型,如果不转化成数字类型计算出的结果是字符串拼接在一起的样子。
            }else if(sel.value == "-"){
                val03.value=val01.value-val02.value;
            }
            else if(sel.value == "*"){
                val03.value=val01.value*val02.value;
            }
            else if(sel.value == "/"){
                val03.value=val01.value/val02.value;
            }
            else {
                val03.value=val01.value%val02.value;
            }
        }
    </script>

最后实现的效果图片如下:
在这里插入图片描述

你可能感兴趣的:(用JavaScript做一个计算器,下拉框选择加减乘除操作,点击按钮计算结果。)