简易计算器
文章目录
简易计算器界面一览一.需求二.body创建整体显示外观三.css样式四.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">9</span><span class="spanN" onclick="inputF(this.innerHTML)" id="cl">8</span><span class="spanN" onclick="inputF(this.innerHTML)" id="cl">7</span><br /><span class="spanN" onclick="inputF(this.innerHTML)" id="cl">6</span><span class="spanN" onclick="inputF(this.innerHTML)" id="cl">5</span><span class="spanN" onclick="inputF(this.innerHTML)" id="cl">4</span><br /><span class="spanN" onclick="inputF(this.innerHTML)" id="cl">3</span><span class="spanN" onclick="inputF(this.innerHTML)" id="cl">2</span><span class="spanN" onclick="inputF(this.innerHTML)" id="cl">1</span><br /><span class="spanN spanN0" onclick="inputF(this.innerHTML)" id="cl">0</span></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()">C</span><br /><span class="yun1" onclick="del()">del</span><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做了一个简易计算器,做法不只这一种,各位感兴趣的小伙伴可以自行发挥.
有哪里不足或者有更好的建议,欢迎留言吐槽,有哪里不懂的小伙伴,可以私信我,我会一一答复.
如果觉得《用JavaScript实现一个简易计算器功能》对你有帮助，请点赞、收藏，并留下你的观点哦！
