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

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

1.设计思路：

• 首先，要有3个文本框，一个是输入值1，设id为val01；一个输入值2，设id为val02；还有一个是计算结果值返回到这个文本框里面，设id为val03。

 代码如下：
			<input type="text" id="val01">
			<input type="text" id="val02">
			<input type="text" id="val03">

• 其次，要设计一个下拉框，里面有“+”，“-”，“*”，“/”，“%”这些功能。

代码如下：
		 <select id="sel">
	        <option value="+">+</option>
	        <option value="-">-</option>
	        <option value="*">*</option>
	        <option value="/">/</option>
	        <option value="%">%</option>
	    </select>

• 最后，设计一个按钮“=”，当点击按钮时会显示计算结果。

代码如下：
		<button οnclick="f()">=</button>

图片如下：

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>

最后实现的效果图片如下：