简易计算器案例

最新推荐文章于 2020-11-26 10:07:31 发布

ymj960722

最新推荐文章于 2020-11-26 10:07:31 发布

阅读量571

点赞数 2

文章标签： css js html

本文链接：https://blog.csdn.net/ymj960722/article/details/107251269

版权

该博客介绍了如何设计和实现一个简易计算器，包括需求分析、页面布局、CSS样式和JavaScript代码实现。计算器具备数字录入、四则运算、正负号切换、退位和清屏等功能，需要注意录入框限制、除数不能为零等条件。页面使用HTML表格布局，CSS进行美化，JavaScript处理逻辑。

摘要由CSDN通过智能技术生成

需求分析

计算器基本功能：

实现单击数字按钮录入数字
实现单击功能按钮进行对应的运算
实现基本的四则运算（加减乘除）
实现正负号功能
实现退位功能
实现清屏功能

注意点：
7. 录入框不能通过其他方式更改其数字
8. 四则运算中需要满足除数不能为零
9. 小数点只能出现一次
10. 正负号运算要对
11. 退位功能时当退到最后一位显示框要显示0而非什么都不显示

需要运用的工具及知识点：

sublime
Html
CSS
JavaScript

页面设计

在这里插入图片描述
这里我是运用表格样式给每行每列插入按钮，设置他们的value值，HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>仿windows计算器</title>
	<link rel="stylesheet" type="text/css" href="../css/index.css">
	<script type="text/javascript" src="../js/index.js"></script>
	<script type="text/javascript" src="../js/dodoke.js"></script>
</head>
<body οnlοad="main_mache(),dodoke()">
	<!-- 计算器 -->
	<div class="mache-box">
		<div class="box">
			<input type="text" id="num" name="num">
		</div>
		<table class="main" cellspacing="5px">
			<tr>
				<td><input type="button" value="C"></td>
				<td><input type="button" value="←"></td>
				<td><input type="button" value="+/-"></td>
				<td><input type="button" value="/"></td>
			</tr>
			<tr>
				<td><input type="button" value="1"></td>
				<td><input type="button" value="2"></td>
				<td><input type="button" value="3"></td>
				<td><input type="button" value="*"></td>
			</tr>
			<tr>
				<td><input type="button" value="4"></td>
				<td><input type="button" value="5"></td>
				<td><input type="button" value="6"></td>
				<td><input type="button" value="-"></td>
			</tr>
			<tr>
				<td><input type="button" value="7"></td>
				<td><input type="button" value="8"></td>
				<td><input type="button" value="9"></td>
				<td><input type="button" value="+"></td>
			</tr>
			<tr>
				<td><input type="button" value="0"></td>
				<td><input type="button" value="."></td>
				<td><input type="button" value="="></td>
				<td><input type="button" value="d" id="dodoke"></td>
			</tr>
		</div>
	</table>
</body>
</html>