任务描述:
对于一些小数值的计算,大家可以很快的得出结果,例如:10+10=20,但是对于一些大数值的计算,例如:9516+7534,算出结果可能需要一些时间。说到这,肯定会有小伙伴想到了计算器,没错,计算器可以快速的得到计算结果。那么:接下来就让我们亲手做一个可以进行加减乘除的计算器吧!
代码段:
<!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>Document</title>
<script>
window.onload = function () {
// 获取输入的值
var num1 = document.getElementById('num1');
var operate = document.getElementById('operate');
var num2 = document.getElementById('num2');
var btn = document.getElementById('btn');
var result = document.getElementById('result');
// 给btn设置onclick事件,用于最终的计算
btn.onclick = function () {
// 加减乘除的切换
if (operate.value == '+') {
result.value = Number(num1.value) + Number(num2.value);
} else if (operate.value == '-') {
result.value = Number(num1.value) - Number(num2.value);
} else if (operate.value == '*') {
result.value = Number(num1.value) * Number(num2.value);
} else if (operate.value == '/') {
result.value = Number(num1.value) / Number(num2.value);
}
}
}
</script>
</head>
<body>
<!-- 小型计算器外形 -->
<input type='text' id='num1' />
<select id='operate'>
<option value='+'>+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type='text' id='num2' />
<input type='button' value=' = ' id="btn" />
<input type='text' id='result' />
</body>
</html>