加减乘除小计算器

最新推荐文章于 2022-04-27 17:56:22 发布

马码侠

最新推荐文章于 2022-04-27 17:56:22 发布

阅读量1.1k

点赞数 1

分类专栏：前端文章标签： html css javascript 前端计算器

本文链接：https://blog.youkuaiyun.com/qq_43093230/article/details/99207334

版权

前端专栏收录该内容

14 篇文章

订阅专栏

效果图：

在这里插入图片描述

CSS及JavaScript基本常识：

td 属性：

abbr规定单元格中内容的缩写版本
algin：规定单元格内内容的水平对齐方式
axis：对单元进行分类
char：规定根据哪个字符进行内容的对齐
charoff规定对其字符的偏移量
colspan：规定单元格可横跨的列数
headers：规定与单元格相关的表头
rowspan：规定单元格可横跨的行数
valign：规定单元格内内容的垂直排列方式

input 属性：

accept：规定通过文件上传来提交的文件的类型
alt：定义图像输入的替代文本
autocomplete：规定输入字段在页面加载时应当被选中
autofause：规定页面在加载时是否获取焦点（不适用于type=“hidden”）
checked：规定此input元素首次加载时应当被选中
disabled：当input元素加载时禁用此元素
form：规定输入字段所属的一个或多个表单
formenctype：覆盖表单的action属性（适用于type=“submit”和type=“image”）
formnovalidate：提交表单时不进行验证
formtarget：覆盖表单的target属性
height：定义input字段的高度
list：引用包含输入字段的预定义选项额datalist
type：button、checkbox、file、hidden、image、password、radio、reset、submit、text
step：输入字的合法数字间隔
value：规定input元素的值
src：定义以提交按钮形式显示的图像URL
size：规定输入字段的高度
required：提示输入字段的值是必须的
readonly：规定输入字段为只读
placeholder：帮助用户填写输入字段的提示
pattern：规定输入字段的值的模式或格式。
multiple：如果使用该属性，则允许一个以上的值
name：规定input元素的名称
min、max，maxlength

slice()事件：
1. 参数1：表示从该字段的何处开始选取
2. 参数2：表示在何处结束选取
3. txt.value = txt.value.slice(0, txt.value.length - 1);
4. 以上语句功能表示从最后一位选取，倒数第二位结束选取
5. 注意：如果是负数：规定从数组尾部开始算起，-1是最后一位，-2是倒数第二位，且该方法不会修改数组，而是返回一个子数组。如果想删除数组中的一部分元素，可使用Array.splice()方法。
（以上文本内容来源于 https://www.w3school.com.cn/jsref/jsref_slice_array.asp）

计算器所有源代码：

html：

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>简易计算器calculator</title>
	<link rel="stylesheet" href="calculator.css" />
	<script type="text/javascript" src="calculator.js"></script>
</head>

<body>
	<table>
		<h2>简易计算器</h2>
		<tr>
			<td colspan="4"><input type="text" class="txt" disabled placeholder="请输入" /></td>
		</tr>
		<tr>
			<td colspan="2"><input type="button" class="btn_del_ac" value="AC" /></td>
			<td colspan="2"><input type="button" class="btn_del_ac" value="DEL" /></td>
		</tr>
		<tr>
			<td><input type="button" class="btn" value="1" /></td>
			<td><input type="button" class="btn" value="2" /></td>
			<td><input type="button" class="btn" value="3" /></td>
			<td><input type="button" class="btn" value="-" /></td>
		</tr>
		<tr>
			<td><input type="button" class="btn" value="4" /></td>
			<td><input type="button" class="btn" value="5" /></td>
			<td><input type="button" class="btn" value="6" /></td>
			<td><input type="button" class="btn" value="/" /></td>
		</tr>
		<tr>
			<td><input type="button" class="btn" value="7" /></td>
			<td><input type="button" class="btn" value="8" /></td>
			<td><input type="button" class="btn" value="9" /></td>
			<td><input type="button" class="btn" value="*" /></td>
		</tr>
		<tr>	
			<td><input type="button" class="btn" value="." /></td>
			<td><input type="button" class="btn" value="0" /></td>
			<td><input type="button" class="btn" value="+" /></td>
			<td><input type="button" class="btn" value="=" /></td>
		</tr>
	</table>
</body>

</html>

css

* {
	padding: 0;
	margin: 0;
}
body{
	/*此处为背景图，自行添加*/
	background:url(bg.jpg);
	background-size: cover;
}
table {
	/*
	 * 为表格设置合并边框模型border-collapse: collapse;可设可不设
	 */
	/* border-collapse: collapse; */
	margin: 40px auto;
	/* border-spacing: 0px; */
	border-block: 2px solid black
	
}
h2{
	text-align: center;
	font-size: 30px;
	color: rgb(255, 240, 240);
	margin-top: 40px;
	margin-bottom: 10px
}
td {
	width: 150px;
	height: 100px
}
input {
	width: 150px;
	height: 100px;
	color: aliceblue;
	background-color: rgb(51, 107, 124)
}
::placeholder{
	color: white
}
.btn {
	width: 150px;
	font-size: 24px;
	color: white;
}
.btn:hover,.btn_del_ac:hover{
	background-color: cornflowerblue;
	border-color: aqua
}
.btn:active,.btn_del_ac:active{
	border-color: aqua
}
.btn_del_ac {
	width: 302px;
	font-size: x-large;
	font-size: 24px;
	color:white
}
.txt {
	font-size: x-large;
	text-align: right;
	width: 600px;
	text-align-last: center;
	font-size: 24px
}

window.onload = function () {
	function fun() {
		//用来存储用户输入的数据
		var arr = [],
			//获取屏幕元素
			txt = document.getElementsByClassName('txt')[0];
		//事件监听兼容浏览器
		function addEvent(element, type, handle) {
			if (element.addEventListener) {			//IE9以下不兼容
				element.addEventListener(type, handle, false);
			} else if (element.attachEvent) {		//IE独有
				element.attachEvent("on" + type, handle);
			} else {
				element['on' + type] = handle;		//一个元素只能绑定一个处理程序
			}
		}
		//定义AC和DEL的修改功能
		function change() {
			if (this.value == "AC") {
				//表示清空数组
				arr = [];
				txt.value = '';			
			} else {
				txt.value = txt.value.slice(0, txt.value.length - 1);
			}
		}

		//数组计算函数
		function calculator() {
			/*
			 * this指代的是当前事件的执行对象
			 * 按完键将数据存储在数组中
			 * 判断是否为数字
			 */
			//如果输入的是“.”，则用"0."代替
			if (txt.value == '' && this.value == ".") {
				txt.value = "0.";
			} else {
				if (!isNaN(this.value) || this.value == ".") {
					/*用户输入的是数字或者点的情况*/
					/*indexOf() 用来查找字符  如果有返回当前位置  如果没有返回-1*/
					if (txt.value.indexOf('.') != -1) {
						if (this.value != ".") {
							txt.value += this.value;
						}
					} else {
						txt.value += this.value;
					}
				} else {
					/*是符号的情况*/
					//先存值  在清屏
					if (this.value != "=") {
						/*是符号但不为等号的情况*/
						arr[arr.length] = txt.value;
						//存符号
						arr[arr.length] = this.value;
						//清屏
						txt.value = "";
					} else {
						arr[arr.length] = txt.value;
						txt.value = eval(arr.join(''));
						arr = [];
					}
				}
			}
		}
		return {
			addEvent: addEvent,
			change: change,
			calculator: calculator
		}
	}
	var fun = fun(),
		btn_back = document.getElementsByClassName('btn_del_ac'),
		btn_txt = document.getElementsByClassName('btn');

	//添加点击事件
	for (var i = 0; i < btn_back.length; i++) {
		fun.addEvent(btn_back[i], "click", fun.change);
	}
	for (var i = 0; i < btn_txt.length; i++) {
		fun.addEvent(btn_txt[i], "click", fun.calculator);
	}
}

欢迎指正~~~~emm