简易计算器案例

最新推荐文章于 2022-03-02 02:21:58 发布

ymj960722

最新推荐文章于 2022-03-02 02:21:58 发布

阅读量617

点赞数 2

文章标签： css js html

本文链接：https://blog.youkuaiyun.com/ymj960722/article/details/107251269

版权

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

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

需求分析

计算器基本功能：

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

注意点：
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>

CSS样式设计

分别对文本框和按钮进行样式设计

/*全局声明*/
*{
	margin:0;
	padding:0;
}

/*整体设置*/
.mache-box{
	position:absolute;
	top:60px;
	left:300px;
}

/*按钮设置*/
/*属性选择器*/
input[type="button"]{
	width:80px;
	height:80px;
	margin-left:5px;
	border-radius:50%;
	border:2px solid pink;
	background-color:#fffaf0;
	font-size:30px;
	/*去除按钮外边框*/
	outline:none;
}

/*文本框设置*/
input[type="text"]{
	width:370px;
	height:60px;
	font-size:40px;
	margin-left:9px;
	text-align:right;
	background-color:#fff;
	/*设置文本框内数字不挤在框边*/
	padding-right:8px;
	/*对于溢出部分进行操作*/
	box-sizing:border-box;
	border:2px solid pink;
}

/*鼠标悬停有样式*/
input[type="button"]:hover{
	border:2px solid #dda0dd;
	background-color:#fff0f5;
}

JavaScript代码

function main_mache(){
	var num = document.getElementById("num");
	//设置值为0
	num.value=0;
	//设置文本框禁用 这样就不能通过键盘输入更改文本框内容
	num.disabled="disabled";
	var oButton = document.getElementsByTagName("input");
	//定义变量
	var btn_num1;
	var fh;
	for (var i = 0;i<oButton.length;i++){
		//循环绑定
		oButton[i].onclick = function(){
			//数字
			if(isNumber(this.value)){
				if (isNull(num.value)){
					num.value = this.value;
				} else {
					num.value = num.value +this.value;
				}
				//非数字
			}	else{
				var btn_num = this.value;
				switch(btn_num){
					// 加号
					case "+":
					btn_num1 = Number(num.value);
					num.value=0;
					fh = "+";
					break;

					// 减号
					case "-":
					btn_num1 = Number(num.value);
					num.value=0;
					fh = "-";
					break;

					// 乘号
					case "*":
					btn_num1 = Number(num.value);
					num.value=0;
					fh = "*";
					break;

					// 除号
					case "/":
					btn_num1 = Number(num.value);
					num.value=0;
					fh = "/";
					break;

					// 小数点
					case ".":
					num.value = dec_number(num.value);
					break;

					// 回退
					case "←":
					num.value = back(num.value);
					break;

					// 清屏
					case "C":
					num.value=0;
					break;

					// 正负数
					case "+/-":
					num.value = sign(num.value);
					break;

					// 等于号
					case "=":
					switch(fh){

						// 加号运算
						case "+":
						num.value=btn_num1 + Number(num.value);
						break;

						//减号运算
						case "-":
						num.value=btn_num1 - Number(num.value);
						break;

						//乘号运算
						case "*":
						num.value=btn_num1 * Number(num.value);
						break;

						//除号运算
						case "/":
						if(Number(num.value==0)){
							alert("除数不能为0");
							num.value = 0;
						} else{
							num.value=btn_num1 / Number(num.value);
						}
						break;
					}
					break;
				}
			}
		}
	}
}

//判断是否是数字
function isNumber(n){
	return !isNaN(n);
}

//验证文本框是否为空或者为0
function isNull(n){
	if(n=="0" || n.length ==0){
		return true;
	} else{
		return false;
	}
}

//小数点
function dec_number(n){
	if(n.indexOf(".")==-1){
		n = n+".";
	}
	return n;
}

//退位键
function back(n){
	//先退位
	n = n.substr(0,n.length-1);
	// 再判断
	if(isNull(n)){
		n=0;
	}
	return n;
}

//正负号
function sign(n){
	n=Number(n)*-1;
	return n;
}