实践js实现简易的四则运算计算器
Posted Stitch晨
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实践js实现简易的四则运算计算器相关的知识，希望对你有一定的参考价值。
最近看了一个大神推荐的某公司面试程序员的js 面试题，题目是用js 做一个计算器于是跟着大神的思想自己做了一下
ps：功能还没有完善好毕竟自己还是一只菜鸟还在不断学习中。
闲话不多说先上css代码
<style type="text/css"> *{ padding: 0px; margin: 0px; border: 0px; } .wrapper{ border: 5px solid #000; width: 300px; height: 400px; margin: 0 auto; } #screen,#result{ width: 100%; height: 80px; border:1px solid red; } .allbtn input{ display: inline-block; float: left; width: 75px; height: 47px; border: 1px solid #ccc; } #zeroWidth{ width: 150px; } </style>
html代码：
这里我用了input标签把每一个计算器按键都做成了按钮，当按下按钮的时候获取按钮的value值从而运行计算
id为 screen的div 是显示整个表达式的容器
id 为result 的div 是显示最后结果的容器
id为 allbtn的div 下面包裹着所有的运算符以及数字按钮
<body> <div class="wrapper"> <div id="screen"></div> <div id="result"></div> <div id="allbtn" class="allbtn"> <input type="button" name="AC" id="clearall" value="AC"> <input type="button" id="clear" name="clear" value="C"> <input type="button" name="yushu" value="%"> <input type="button" class ="calc" name="chu" value="/"> <input type="button" class="num" name="seven" value="7"> <input type="button" class="num" name="eight" value="8"> <input type="button" class="num" name="nine" value="9"> <input type="button" class="calc" name="chu" name="cheng" value="*"> <input type="button" class="num" name="four" value="4"> <input type="button" class="num" name="five" value="5"> <input type="button" class="num" name="six" value="6"> <input type="button" class="calc" name="chu" name="reduce" value="-"> <input type="button" class="num" name="one" value="1"> <input type="button" class="num" name="two" value="2"> <input type="button" class="num" name="three" value="3"> <input type="button" class="calc" name="chu" name="sum" value="+"> <input class="num" id="zeroWidth" type="button" name="zero" value="0"> <input type="button" class="num" name="point" value="."> <input type="button" id="finish" name="equal" value="="> </div> </div>
下面是js 代码
js 代码最核心的部分就是四则运算了
<script type="text/javascript"> window.onload = function(){ var saveResult = new Array();//建立运算结果的数组 var show = "";//显示屏显示的表达式 var number = "";//定义一个临时变量 用来储存每一个整数 var screen = document.getElementById(‘screen‘);//获取负责显示表达式的div var resultScreen = document.getElementById(‘result‘);//获取负责显示结果的div var allbtn = document.getElementById(‘allbtn‘);//获取按钮的外包裹层 var input = allbtn.getElementsByTagName(‘input‘);//获取所有按钮 var finish = document.getElementById(‘finish‘);//获取 "=" 按钮 var clear = document.getElementById(‘clear‘);//获取清除按钮 var clearall = document.getElementById(‘clearall‘);//获取 "AC" 按钮 var numArray = new Array();//储存数字数组 var calcArray = new Array();//储存运算符数组 var a = 0;//循环初始化变量 var b = 0;//循环初始化变量 var flag = false;//判断是否按过等于符号 //获取所有数字按钮 for (var i = 0; i < input.length; i++) { if(input[i].className == "num"){ numArray.push(input[i]); } } console.log(numArray); //获取所有操作符按钮 for (var j = 0; j < input.length; j++) { if(input[j].className == "calc"){ calcArray.push(input[j]); } } console.log(calcArray); //--------------------------------------准备工作完成-------------------------------------- // // // // //--------------------------------------以下是操作部分------------------------------------------ //数字键点击事件 for (var x = 0; x < numArray.length; x++) { numArray[x].onclick = function(){ if (flag == true) { saveResult.splice(0,saveResult.length); number = ""; show = ""; flag = false; } var value = this.getAttribute("value"); show += value; screen.innerHTML = show; number += value; console.log("点击数字的时候x的值为：" + number); } } //运算符点击事件 for (var y = 0; y < calcArray.length; y++) { calcArray[y].onclick = function(){ var value = this.getAttribute("value"); show += value; screen.innerHTML = show; saveResult.push(number); //运算符一点击x变量里面的值就会存进去数组里面 //这样确保数字能够保持完整性 saveResult.push(value); number = "";//然后清空变量number 下次再次存入数字 console.log(saveResult); } } //等于符号点击事件 finish.onclick = function(){ saveResult.push(number); number = ""; while(a < saveResult.length){ if(saveResult[a] == "*"){ var result = parseFloat(saveResult[a - 1]) * parseFloat(saveResult[a + 1]); saveResult.splice(a-1,3,result); a = 0; }else if(saveResult[a] == "/"){ var result = parseFloat(saveResult[a - 1]) / parseFloat(saveResult[a + 1]); saveResult.splice(a-1,3,result); a = 0; } a++; } while(b < saveResult.length){ if(saveResult[b] == "+"){ var result = parseFloat(saveResult[b - 1]) + parseFloat(saveResult[b + 1]); saveResult.splice(b-1,3,result); b = 0; }else if(saveResult[b] == "-"){ var result = parseFloat(saveResult[b - 1]) - parseFloat(saveResult[b + 1]); saveResult.splice(b-1,3,result); b = 0; } b++; } resultScreen.innerHTML = saveResult; flag = true; console.log("最终数组输出" + saveResult); } //AC 按钮点击事件 clearall.onclick = function(){ saveResult.splice(0,saveResult.length); number = ""; show = ""; screen.innerHTML = ""; } } </script>
这里说说四则元算：
本次实现四则元素的核心是使用数组，那怎么实现呢？遍历
我这里用了while 循环当然用for 也是可以的 核心的思想是 我先遍历一次数组 如果遍历到有元素是 * 或者 / 那么我就把它所在位置的前一个元素和后一个元素执行乘或除运算（前一个元素和后一个元素要用parseFloat转型方便日后有小数点运算）然后再用splice方法，把这三个元素替换成运算后的结果，然后自增变量 a重新赋值为0，再重新执行一次遍历如此类推直到没有了 * 或 / 号
之后再执行第二次遍历，方法也是如此最后把数组saveResult输出到 结果div 中
以上是关于实践js实现简易的四则运算计算器的主要内容，如果未能解决你的问题，请参考以下文章