<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="fir">
<select>
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="sec">
<button>=</button>
<input type="text" id="res">
<script>
//用户 在 前两个input中 输入数字 点击等号按钮 根据select中的运算符 进行指定的运算 并将结果显示在第三个input中
//1.获取元素
var inps = document.getElementsByTagName("input");
var btn = document.getElementsByTagName("button")[0];
var sel = document.getElementsByTagName("select")[0];
//2.给按钮 添加 点击事件
btn.onclick = function(){
//3.获取运算符
var logo = sel.value;
var num1 = Number(inps[0].value);
var num2 = parseFloat(inps[1].value);
//4.进行计算 根据运算符 进行相应的计算
switch(logo){
case "+" : inps[2].value = num1+num2; break;
case "-" : inps[2].value = num1-num2; break;
case "*" : inps[2].value = num1*num2; break;
case "/" : inps[2].value = num1/num2; break;
}
}
</script>
</body>
</html>
