js写一个简单的选择计算器

最新推荐文章于 2023-01-04 16:52:58 发布

墨涵111

最新推荐文章于 2023-01-04 16:52:58 发布

阅读量186

点赞数 1

本文链接：https://blog.csdn.net/wh193912/article/details/104975735

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.box {
				margin: 50px auto;
				border: 1px solid lightblue;
				background: lightblue;
				width: 280px;
				height: 200px;
				padding: 5px;
				border-radius: 8px;
				text-align: center;
			}

			.content {
				margin-top: 20px;
			}

			#cal {
				width: 50px;
				text-align: center;
				margin-top: 30px;
			}
		</style>
		
	</head>
	<body>
		<div class="box">
			<div align="center">
				<h3>选择计算器</h3>
				<hr />
			</div>
			<div>
				<input type="radio" name="method" id="check1">加法
				<input type="radio" name="method" id="check2">减法
				<input type="radio" name="method" id="check3">乘法
				<input type="radio" name="method" id="check4">除法
			</div>
			<div class="content">
				数一：<input type="text"  id="num1"><br />
				数二：<input type="text"  id="num2"><br />
				结果：<input type="text"  id="result"><br />
				<button type="button" id="cal">计算</button>
			</div>
		</div>
		
		<script type="text/javascript">
			function check() {
				for (var i = 1; i <= 4; i++) {//通过循环返回i的值，获取到谁被选中了
					if (document.getElementById("check" + i).checked)
						return i;
				}
			}
			var cal=document.getElementById("cal");
			cal.οnclick=function(){
				var num1 = document.getElementById("num1");
				var num2 = document.getElementById("num2");
				var result = document.getElementById("result");
				m = check();//将i赋值给m
				switch (m) {
					case 1:
						result.value = Number(num1.value) + Number(num2.value);
						break;
					case 2:
						result.value = num1.value - num2.value;
						break;
					case 3:
						result.value = num1.value * num2.value;
						break;
					case 4:
						if (document.getElementById("num2").value == 0)
							alert("除数不能为0");
						else
							result.value = num1.value / num2.value;
						break;
				}
			}
		</script>
	</body>
</html>

在这里插入图片描述

墨涵111

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js写一个简单的选择计算器

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .box { ...
复制链接

扫一扫