JavaScript计算器（加减乘除完善）

最新推荐文章于 2023-02-03 19:23:11 发布

三三三思

最新推荐文章于 2023-02-03 19:23:11 发布

阅读量1.5k

点赞数 3

分类专栏： css JS html 文章标签： javascript js

本文链接：https://blog.csdn.net/qq_45746493/article/details/110647239

版权

JS 同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<head>
		<meta charset="UTF-8">
		<title></title>
		<!--css样式-->
		<style type="text/css">
			table,tr,td{
				width: 300px;
				height: 30px;
				border: 1px solid blue;
				border-collapse: collapse;
				text-align: center;
			}
			body{
				width: 300px;
				margin: 20px auto;
			}
			td{
				background: #7FFF00;
			}
			td:hover{
				background: #993399;
			}
		</style>
		<!--js代码-->
		<script type="text/javascript">
			//通过创建元素将表格写出来
			function drawTab(ary){
				var table = document.getElementById("tab");
				for(var i = 0;i<ary.length;i++){
					//调用init函数里面的ary数组并对数组进行遍历
					var temp = ary[i]
					var tr = document.createElement("tr");
					table.appendChild(tr);
					for(var j = 0;j<temp.length;j++){
						var td = document.createElement("td")
						td.innerText = temp[j];
						//给每一个td添加一个点击事件
						td.setAttribute("onclick","calc(this)");
						tr.appendChild(td);
					}
				}
			}
			//设置一个真值
			var flag = true;
			function calc(num){
				var result = document.getElementById("result");
				//使用switch语句进行判断
				switch(num.innerText){
					//判断如果为等号的时候使用eval()函数进行计算，并将真值赋值为false
					case "=":
						if(result.innerText==""){
							return;
						}
						//通过replace替换字符串
						result.innerText = result.innerText.replace("×","*");
						result.innerText = result.innerText.replace("÷","/");
						result.innerText = eval(result.innerText);
						flag = false;
						break;
					//通过使用substr对字符串进行截取，删除最后一个字符
					case "←":
						result.innerText = result.innerText.substr(0,result.innerText.length-1);
						break;
					//如果点击+-×÷%时不再进行叠加，将前面的给替换掉
					case "+":
					case "-":
					case "×":
					case "÷":
					case "%":
					case ".":
						if(result.innerText==""){
							return;
						}
						if(result.innerText.substr(result.innerText.length-1,result.innerText.length)=="+"||
						result.innerText.substr(result.innerText.length-1,result.innerText.length)=="-"||
						result.innerText.substr(result.innerText.length-1,result.innerText.length)=="×"||
						result.innerText.substr(result.innerText.length-1,result.innerText.length)=="÷"||
						result.innerText.substr(result.innerText.length-1,result.innerText.length)=="%"||
						result.innerText.substr(result.innerText.length-1,result.innerText.length)=="."){
							result.innerText = result.innerText.substr(0,result.innerText.length-1);
						}
						result.innerText += num.innerText;
						flag = true;
						break;
					//清除操作
					case "c":
						result.innerText = "";
						break;
					//点击0-9是进行输入，并在点击等号之后再点击0-9时将输出清空，进行下一次计算
					default:
						if(flag){
							
						}else{
							result.innerText = "";
							flag = true;
						}
						result.innerText += num.innerText;
						break;
				}
			}
			//函数调用
			function init(){
				//计算器上面要显示的数字
				var ary = [
				["%", "c", "←", "÷"],
				["7", "8", "9", "×"],
				["4", "5", "6", "-"],
				["1", "2", "3", "+"],
				["", "0", ".", "="]
			];
				drawTab(ary)
			}
		</script>
	</head>
	<body onload="init()">
		<!--table表格-->
		<table id="tab">
			<tr>
				<td colspan="4">简易计算器</td>
			</tr>
			<tr>
				<td colspan="4" id="result"></td>
			</tr>
		</table>
	</body>

三三三思

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript计算器（加减乘除完善）

<head> <meta charset="UTF-8"> <title></title>  <style type="text/css"> table,tr,td{ width: 300px; height: 30px; border: 1px solid blue; border-collapse: collapse; text-align: c.
复制链接

扫一扫

专栏目录