用JavaScript实现一个简易计算器功能

简易计算器

---

---

界面一览

一.需求

1.构建出计算器外观.
2.显示屏跟随鼠标点击事件改变内容.
3.0~9的数字选择功能,点击之后要显示在显示屏上.
4.加减乘除取余等于的计算.
5.归零按钮和删除按钮.

---

二.body创建整体显示外观

<div class="d1">
			<div id="text">div>
			<div id="input1">
				<div id="input2">
					
					<span class="spanN" onclick="inputF(this.innerHTML)" id="cl">9span>
					<span class="spanN" onclick="inputF(this.innerHTML)" id="cl">8span>
					<span class="spanN" onclick="inputF(this.innerHTML)" id="cl">7span><br />
					<span class="spanN" onclick="inputF(this.innerHTML)" id="cl">6span>
					<span class="spanN" onclick="inputF(this.innerHTML)" id="cl">5span>
					<span class="spanN" onclick="inputF(this.innerHTML)" id="cl">4span><br />
					<span class="spanN" onclick="inputF(this.innerHTML)" id="cl">3span>
					<span class="spanN" onclick="inputF(this.innerHTML)" id="cl">2span>
					<span class="spanN" onclick="inputF(this.innerHTML)" id="cl">1span><br />
					<span class="spanN spanN0" onclick="inputF(this.innerHTML)" id="cl">0span>
				div>
				
				<div id="yunS">
					<span class="yun1" onclick="yun1(this.innerHTML)">+span><br />
					<span class="yun1" onclick="yun1(this.innerHTML)">-span><br />
					<span class="yun1" onclick="yun1(this.innerHTML)">*span><br />
					<span class="yun1" onclick="yun1(this.innerHTML)">/span>
				div>
				
				<div id="input3">
					<span class="yun1" onclick="yun1(this.innerHTML)">%span><br />
					<span class="yun1" onclick="Ling()">Cspan><br />
					<span class="yun1" onclick="del()">delspan><br />
					<span class="yun1" onclick="sum()">=span>
				div>
			div>
			
			
		div>

三.css样式

<style>
			body{
				position: absolute;
				top: 100px;
				left:500px;
			}
			.d1{
				width: 500px;
				height: 500px;
				border-radius: 40px;
				border: 1px solid black;
				background-color: #CCCCCC;
				z-index: 0;
			}
			#text{
				width: 450px;
				height: 80px;
				border: 2px solid green;
				position: absolute;
				top: 30px;
				left: 30px;
				text-align: center;
				font-size: 40px;
				background-color: #6641E2;
				z-index: 1;
			}
			#input1{
				width: 450px;
				height: 350px;
				border: 3px solid blueviolet;
				position: absolute;
				top: 130px;
				left: 27px;
				border-radius: 10px;
				background-color: darkcyan;
				z-index: 1;
			}
			.spanN{
				width: 70px;
				height: 70px;
				border: 1px solid red;
				border-radius: 50px;
				background-color: bisque;
				display: inline-block;
				font-style: normal;
				font-size: 60px;
				text-align: center;
				
			}
			#input2{
				position:absolute;
				top: 50px;
				left: 10px;
			}
			.spanN0{
				position: absolute;
				left: 80px;
			}
			#yunS{
				position: absolute;
				left: 280px;
				top: 50px;
				text-align: center;
				
				
			}
			.yun1{
				border: 1px solid chartreuse;
				width: 60px;
				height: 50px;
				font-size: 40px;
				background-color: aquamarine;
				display: block;
			}
			#input3{
				position: absolute;
				left: 370px;
				top: 50px;
				text-align: center;
			}
		style>

---

四.JavaScript事件函数

<script>
		function inputF(num){
			var text1=document.getElementById('text');
			text1.innerHTML=text1.innerHTML+num;
//			alert(text1.innerHTML)
		}
		function yun1(ny){
			var te1=document.getElementById('text');
			te1.innerHTML=te1.innerHTML+ny;
		}
		function sum(){
			var sum=document.getElementById('text');
			aa=eval(sum.innerHTML);
			if(aa=="Infinity"){
				sum.innerHTML="";
				alert("0不能做除数!");
				
			}else{
				sum.innerHTML=aa;
			}
			
		}
		function Ling(){
			var tet=document.getElementById('text');
			tet.innerHTML="";
		}
		function del(){
			var tet=document.getElementById('text');
			aa=tet.innerHTML.length;
			var newText="";
			for(i in tet.innerHTML){
				if(i==aa-1){
					break;
				}
				newText=newText+tet.innerHTML[i];
			}
			tet.innerHTML=newText;
		}
	script>

五.小结

本章用所学JavaScript做了一个简易计算器,做法不只这一种,各位感兴趣的小伙伴可以自行发挥.
有哪里不足或者有更好的建议,欢迎留言吐槽,有哪里不懂的小伙伴,可以私信我,我会一一答复.