<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简易计算器</title>
</head>
<body>
<input type="text" value="">
<select>
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text">
<button>计算</button>
<span></span>
</body>
<script>
var num1 = document.getElementsByTagName('input')[0]
var num2 = document.getElementsByTagName('input')[1]
var sec = document.getElementsByTagName('select')[0]
var btn = document.getElementsByTagName('button')[0]
var span = document.getElementsByTagName('span')[0]
span.innerHTML = '计算啊'
// console.log(span);
btn.onclick = function () {
var x = Number(num1.value)
var y = Number(num2.value)
if (x == '' || y == '') {
span.innerHTML = '请检查输入是否完整'
} else if (isNaN(x) || isNaN(y)) {
span.innerHTML = '请检查输入是否为数字类型'
} else {
switch (sec.value) {
case '+':
span.innerHTML = '计算结果为' + (x + y)
break;
case '-':
span.innerHTML = '计算结果为' + (x - y)
break;
case '*':
span.innerHTML = '计算结果为' + (x * y)
break;
case '/':
span.innerHTML = '计算结果为' + (x / y)
break
}
}
}
</script>
</html>