JS实现简易网页计算器

女爷i 2022-05-17 10:52 328阅读 0赞

js实现简易计算器。计算器的布局不像表格那么公正对称，所以布局这块相对比较繁琐，但是也可以通过这来练习一下CSS。

**一、实现功能**

1.  完成计算器的加减乘除的基本计算功能
2.  实现输入框中的字符串拼接

**二、实现思路**

1.  完成基本布局
2.  js实现运算功能

**三、知识点**

e.target||e.srcElement ：获取触发事件的元素

**四、具体代码实现**

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <style type="text/css">
    body {
    	border: none;
    }
    
    h1{
    	text-align: center;
    }
    
    button{
    	cursor: pointer;
    	width: 65px;
    	height: 45px;
    	background-color: hsla(182, 93%, 45%, 0);
    	border-radius: 10px;
    	box-shadow: 3px 3px 5px #ccc;
    	outline: none;
    	font-size: 25px;
    }
    input{
    	font-size: 25px;
    	border-radius: 10px;
    	width: 200px;
    	height: 40px;
    }
    #main{
    	text-align:center;
    	width:300px;
    	height: 287px;
    	margin: 0 auto;
    	border:2px solid #ccc;
    	background-image: url('../imges/4.jpg');
    }
    .num{
    	margin: 10px;
    }
    
    </style>
    
    </head>
    <body>
    	<h1>计算器</h1>
    	<div id="main" onclick="cal(event);">
    		<div class="num" >
    			<input type="text" value="0" readonly="readonly" id="screen" />
    			<button>C</button>
    		</div>
    		<div class="num">
    			<button>7</button>
    			<button>8</button>
    			<button>9</button>
    			<button>/</button>
    		</div>
    		<div class="num">
    			<button>4</button>
    			<button>5</button>
    			<button>6</button>
    			<button>*</button>
    		</div>
    		<div class="num">
    			<button>1</button>
    			<button>2</button>
    			<button>3</button>
    			<button>-</button>
    		</div>
    		<div class="num">
    			<button>0</button>
    			<button>.</button>
    			<button>=</button>
    			<button>+</button>
    		</div>
    	</div>
    </body>
    <script type="text/javascript">
    function cal(e) {
    	//获取触发事件的元素
    	var obj = e.target||e.srcElement;
    	if(obj.nodeName != "BUTTON"){
    		return;
    	}
    	var v = obj.innerHTML;
    	var screen = document.getElementById("screen");
    	if(v == "C"){
    		screen.value = 0;
    	}else if(v == "="){
    		//获取到输入框的值
    		var exp = screen.value;
    		try{
    			var result = eval("("+exp+")");
    			//将计算结果赋值给输入框
    			screen.value = result;
    		}catch(e){
    			console.log(e);
    			screen.value = "error";
    		}
    	}else{
    		if(screen.value == 0){
    			screen.value = "";
    		}
    		screen.value += v;
    	}
    	
    }
    
    </script>
    </html>

**五、js部分详解**

利用e.target||e.srcElement，获取到触发事件的元素，||连接两个语法是为了解决不同浏览器的兼容性问题。

获取到触发事件元素的具体值之后，判断元素值是否等于“=”和“C”，这两个按钮是做区别于普通字符串拼接及计算的其他功能。

C做清屏处理：判断触发事件的按钮值是否为C，若为C，屏幕中只显示0；

=做计算处理：判断触发事件的按钮值是否为=，若为=，利用eval()方法计算屏幕上的公式；

其他触发事件的按钮直接做字符串拼接显示在屏幕上。

**六、动图效果**

![70][]

今天的分享就到这里啦！欢迎指正！！！

[70]: /images/20220517/272b49a8a3dd486a86eab7874a799946.png