用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>
最后实现的效果图片如下: