其他分享
首页 > 其他分享> > 实现计算器功能

实现计算器功能

作者:互联网

任务描述:

对于一些小数值的计算,大家可以很快的得出结果,例如: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>

标签:功能,num1,num2,实现,Number,value,result,计算器,operate
来源: https://blog.csdn.net/m0_52484611/article/details/121686131