js实现计算器

最新推荐文章于 2024-04-30 16:57:21 发布

翟小花@@

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量177

点赞数

分类专栏：春招培训文章标签： javascript css3 css

本文链接：https://blog.csdn.net/weixin_43400733/article/details/122538087

版权

春招培训专栏收录该内容

31 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.all {
				background-color: bisque;
				width: 400px;
				height: 330px;
			}

			.title {
				/* 标题样式 */
				/* border-color: black; */
				/* solid black; */
				/* border-style: solid; */
				/* border-bottom-width: thin; */
				background-color: bisque;
				font-weight: 700;
				width: 400px;
				height: 50px;
				font-size: 35px;

			}

			input {
				font-family: '宋体';
				font-size: 40px;
				width: 380px;
				margin-left: 5px;
				margin-bottom: 10px;
				background-color: aliceblue;
				color: red;
				font-weight: 800;
				border: #F0F8FF;

			}

			.Key {
				width: 94px;
				height: 40px;
				border-color: azure;
				margin: 1px;
				font-weight: 500;
				font-size: 19px;

			}
		</style>
	</head>
	<body>
		<div id="d1" class="all">
			<div id="d2" class="title" align="center">计算器</div>
			<!-- <input type="text" id="show" value="计算器" align="center" /> -->
			<input type="text" id="id_screen" name="name_screen" />

			<button id="AC" onclick="clear_screen()" class="Key">AC</button>
			<button onclick="Del()" class="Key">DEL</button>
			<button id="%" onclick="screen_opt(this.id)" class="Key">%</button>
			<button id="/" onclick="screen_opt(this.id)" class="Key">/</button>
			<button id="7" onclick="screen_num(this.id)" class="Key">7</button>
			<button id="8" onclick="screen_num(this.id)" class="Key">8</button>
			<button id="9" onclick="screen_num(this.id)" class="Key">9</button>
			<button id="*" onclick="screen_opt(this.id)" class="Key">*</button>
			<button id="4" onclick="screen_num(this.id)" class="Key">4</button>
			<button id="5" onclick="screen_num(this.id)" class="Key">5</button>
			<button id="6" onclick="screen_num(this.id)" class="Key">6</button>
			<button id="-" onclick="screen_opt(this.id)" class="Key">-</button>
			<button id="1" onclick="screen_num(this.id)" class="Key">1</button>
			<button id="2" onclick="screen_num(this.id)" class="Key">2</button>
			<button id="3" onclick="screen_num(this.id)" class="Key">3</button>
			<button id="+" onclick="screen_opt(this.id)" class="Key">+</button>
			<button id="0" onclick="screen_num(this.id)" class="Key">0</button>
			<button id="." onclick="screen_num(this.id)" class="Key">.</button>
			<button onclick="result()" style="width: 195px;height: 40px;border-color: azure;">=</button>

		</div>

	</body>
	<script type="text/javascript">
		// 获取input标签
		var id_screen = document.getElementById("id_screen");
		// 功能函数
		//num[]存放数字 ，sign[]存放+-号,signal存放*/%
		var tempstring = "0"; //存放拼接数字
		var num = [];
		var sign = [];
		var signal = "";
		var tonum = 0; //存放转化后的数字
		var numi = 0; //数字下标
		var signi = 0; //符号下标
		//获取输入数字并进行字符串到数字的转化
		function screen_num(n) {
			id_screen.value += n;
			tempstring += n;
		}

		function screen_opt(op) {
			//数据转换
			tonum = parseFloat(tempstring);
			if (signal == "*") {
				num[numi - 1] = num[numi - 1] * tonum;
				signal = "";
			} else if (signal == "/") {
				num[numi - 1] = num[numi - 1] / tonum;
				signal = "";
			}else if(signal=="%"){
				num[numi - 1] = num[numi - 1] %tonum;
				signal = "";
			}
			 else {
				num[numi] = tonum;
				numi++;
			}
			tempstring = "";
			id_screen.value += op;
			if (op == "+") {
				sign[sign.length] = "+";
			} else if (op == "-") {
				sign[sign.length] = "-";
			} else if (op == "*") {
				signal = "*"
			} else if (op == "/") {
				signal = "/";
			}else if (op == "%") {
				signal = "%";
			}
		}

		function result() {
			tonum = tempstring;
			if (signal == "*") {
				num[numi - 1] = num[numi - 1] * tonum;
				signal = "";
			} else if (signal == "/") {
				num[numi - 1] = num[numi - 1] / tonum;
				signal = "";
			}
			 else if(signal=="%"){
			 	num[numi - 1] = num[numi - 1] %tonum;
			 	signal = "";
			 }else {
				num[numi] = tonum;
				numi++;
			}
			tempstring = "";
			var j = 0;
			var res = num[0];
			for (var i = 1; i < num.length; i++, j++) {

				if (sign[j] == "+") {
					res = parseFloat(res) + parseFloat(num[i]);
				} else {
					res -= num[i];
				}


			}
			//id_screen.value = eval(id_screen.value);
			id_screen.value = res;
		}
		//清除所有数据
		function clear_screen() {
			id_screen.value = "";
			num = [];
			sign = [];
			signal = "";
			tonum = 0; //存放转化后的数字
			numi = 0; //数字下标
			signi = 0; //符号下标
			tempstring = "0";
		}
		//删除一个数字
		function Del() {
			id_screen.value = id_screen.value.slice(0, id_screen.value.length - 1);
			tempstring=tempstring.slice(0,tempstring.length-1);
		}
	</script>
</html>

翟小花@@

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现计算器

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> .all { background-color: bisque; width: 400px; height: 330px; } .title { /* 标题样式 */ /* border-colo
复制链接

扫一扫