前端实现网页简易计算器

最新推荐文章于 2024-07-02 17:35:34 发布

seventy_seven77

最新推荐文章于 2024-07-02 17:35:34 发布

阅读量1.5k

点赞数 1

分类专栏： web前端 js 文章标签：计算器

本文链接：https://blog.csdn.net/seventy_seven77/article/details/97497901

版权

js 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

web前端

2 篇文章 0 订阅

订阅专栏

计算器代码

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<meta charset = "utf-8" />
		<style type="text/css">
		button{width: 100px; height: 50px; background: gray; font-size: 30px; line-height: 50px}
		input{width: 300px; height: 50px; font-size: 30px; line-height: 50px}
		</style>
		<script type="text/javascript">
		//实现输入
		/*
			通过一个全局数组，将输入的内容记录

		*/
		var arr = [];

		function btnClick(str){
			arr.push(str);
			//找到输入框
			var oInput = document.getElementById("input_id");
			oInput.value = arr.join("");
		}

		//点击C健 清空
		function clearBtn(){
			var oInput = document.getElementById("input_id");
			oInput.value = "";
			arr = [];
		}

		//当我们点击等于号的时候，开始计算并且得出结果
		/// 123+456
		//2 0 - 1 0
		function equalFun(){
			//找到运算符的位置
			var index = 0;
			for(var i = 0; i < arr.length; i++){
				if(!(arr[i] >= 0 && arr[i] <= 9)){
					index = i;
					break;
				}
			}
		
			var num1Arr = arr.slice(0, index);
			var num2Arr = arr.slice(index + 1, arr.length);

			//转成数字
			var num1 = parseInt(num1Arr.join(""));
			var num2 = parseInt(num2Arr.join(""));


			//将结果显示在页面上
			var oInput = document.getElementById("input_id");
			oInput.value = operator(num1, arr[index], num2);

			//清空
			arr = [];
		}		



				//封装函数
		function operator(num1, str, num2){
			// + - * / %
			switch(str){
				case "+":
					return num1 + num2; //函数运行遇到return就终止了
					//break; //为了防止事件穿透
				case "-":
					return num1 - num2;
				case "*":
					return num1 * num2;
				case "/":
					return num1 / num2;
				case "%":
					return num1 % num2;
				default:
					alert("error");
					break;
			}
		}


		</script>
	</head>
	<body>
		<!-- 
		外层是双引号,里面必须用单引号
		外层是单引号,里面必须是双引号
		 -->
		<input id = "input_id" />
		<button onclick = "clearBtn();">C</button>
		<br />
		<button onclick = "btnClick(7);">7</button>
		<button onclick = "btnClick(8);">8</button>
		<button onclick = "btnClick(9);">9</button>
		<button onclick = "btnClick('+');">+</button><br/>
		<button onclick = "btnClick(4);">4</button>
		<button onclick = "btnClick(5);">5</button>
		<button onclick = "btnClick(6);">6</button>
		<button onclick = "btnClick('-');">-</button><br/>
		<button onclick = "btnClick(1);">1</button>
		<button onclick = "btnClick(2);">2</button>
		<button onclick = "btnClick(3);">3</button>
		<button onclick = "btnClick('*');">*</button><br/>
		<button onclick = "btnClick(0);">0</button>
		<button onclick = "equalFun();">=</button>
		<button onclick = "btnClick('%');">%</button>
		<button onclick = "btnClick('/');">/</button><br/>
	</body>
</html>