实现计算器功能

最新推荐文章于 2023-09-13 13:26:15 发布

sheepwhip

最新推荐文章于 2023-09-13 13:26:15 发布

阅读量634

点赞数

文章标签： wpf javascript html

本文链接：https://blog.csdn.net/m0_52484611/article/details/121686131

版权

任务描述：

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

sheepwhip

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现计算器功能

任务描述：对于一些小数值的计算，大家可以很快的得出结果，例如：10+10=20，但是对于一些大数值的计算，例如：9516+7534，算出结果可能需要一些时间。说到这，肯定会有小伙伴想到了计算器，没错，计算器可以快速的得到计算结果。那么：接下来就让我们亲手做一个可以进行加减乘除的计算器吧！代码段：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta h.
复制链接

扫一扫