1.设计思路:
代码如下:
<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>
图片如下:
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>
最后实现的效果图片如下:
因篇幅问题不能全部显示,请点此查看更多更全内容