JavaScript实现简易计算器

最新推荐文章于 2022-10-21 10:03:12 发布

lujie_1996

最新推荐文章于 2022-10-21 10:03:12 发布

阅读量498

点赞数

CC 4.0 BY-SA版权

分类专栏： Front End 文章标签：计算器 HTML CSS JavaScript

本文链接：https://blog.youkuaiyun.com/lujie_1996/article/details/78166558

Front End 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的简易计算器。该计算器可以完成加、减、乘、除四种基本运算，并通过按钮触发计算功能。文章提供了完整的源代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

从input取值并将值放入input2的操作：

var value = document.getElementById(“input”).value;

document.getElementById(“input2”).value =value;

最终效果

实现代码

<!DOCTYPE html>
<html>
<head>
	<title>简易计算器</title>
	<style type="text/css">
		* {
			font: normal normal 18px "黑体";
		} 
		#main {
			margin: 0 auto;
		}
		h1 {
			font: normal normal 24px "微软雅黑";
			text-align: center;
		}
		div {
			width: 610px;
		}
		input {
			width: 140px;
			height: 25px;
			border: 1px solid #666;
			outline: 0;
			margin: 8px 2px; 
		}
		.btn {
			width: 80px;
			border: 0;
			background-color: #89B;
		}
	</style>
	<script type="text/javascript">
		function add() {
			var a = document.getElementById("addNum1").value;
			var b = document.getElementById("addNum2").value;
			a = parseFloat(a);
			b = parseFloat(b); 
			document.getElementById("addRes").value = (a+b).toFixed(3);
		}
		function sub() {
			var a = document.getElementById("subNum1").value;
			var b = document.getElementById("subNum2").value;
			a = parseFloat(a);
			b = parseFloat(b); 
			document.getElementById("subRes").value = (a-b).toFixed(3);
		}
		function multi() {
			var a = document.getElementById("multiNum1").value;
			var b = document.getElementById("multiNum2").value;
			a = parseFloat(a);
			b = parseFloat(b); 
			document.getElementById("multiRes").value = (a*b).toFixed(3);
		}
		function div() {
			var a = document.getElementById("divNum1").value;
			var b = document.getElementById("divNum2").value;
			a = parseFloat(a);
			b = parseFloat(b); 
			document.getElementById("divRes").value = (a/b).toFixed(3);
		}
	</script>
</head>
<body>
	<div id="main">
		<h1>JavaScript实现简易计算器</h1>
		<div>
			<input type="text" id="addNum1">
			+
			<input type="text" id="addNum2">
			=
			<input type="text" id="addRes">
			<input type="button" class="btn" value="计算" onclick="add()">
		</div>

		<div>
			<input type="text" id="subNum1">
			-
			<input type="text" id="subNum2">
			=
			<input type="text" id="subRes">
			<input type="button" class="btn" value="计算" onclick="sub()">
		</div>

		<div>
			<input type="text" id="multiNum1">
			*
			<input type="text" id="multiNum2">
			=
			<input type="text" id="multiRes">
			<input type="button" class="btn" value="计算" onclick="multi()">
		</div>

		<div>
			<input type="text" id="divNum1">
			/
			<input type="text" id="divNum2">
			=
			<input type="text" id="divRes">
			<input type="button" class="btn" value="计算" onclick="div()">
		</div>
	</div>
</body>
</html>