学习笔记之javascript编写简单计算器
感觉自己的的实力真的是有待提高，在编写计算器的过程中，出现了各种各样的问题，暴露了自己的基础不扎实，逻辑思维能力不够，学得知识不能运用到自己的demo中区。先介绍一些这个这个计算器的整体思路。大致分为三部分，首先是用户点击数字或者点的事件，如果点击的是数字，则直接加到显示屏上就好，如果用户点击的是点的话，组要慢组两个条件，一个是，点不能重复，二是内容为空的时候，需要在小数点前面加上零。然后是用户点击清空或者删除的事件，清空事件就是把所有的内容都清空，而删除事件则是把内容一个一个的删除。点击一次只删除一个字符串。然后就是用户点击加减乘除的事件了，如果用户点击的是运算符号，需要注意如果用户连续点击同一个运算符，则只能显示一个，可以用数组的splice方法来代替前面的那个符号。最后一步就是用户点击等于号的事件了，等于号被触发的时候，首先需要遍历循环存储内容的数组，把定义一个记录运算符号出现次数的变量，封装一个函数，用递归实现。答题的思路就是这个样子，具体的实现看代码。
在编写过程中，首先发现字符串的截取的位置我没注意，再次我又温习了一遍。
其次是获取元素出现了问题。
然后就是不能及时想到用递归来运算，自己用了好多的办法，发现都有漏洞，虽然浪费了好多时间，但是布的不说我学到了很多东西，程序不对就再改，没什么过不去的，只要坚持，熬过这段时间，future会很feature。（计算器还有bug，希望各位大佬们能帮忙完善一下哈）。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> table { border-collapse: collapse; margin: auto auto; } td { width: 150px; line-height: 70px; } .btn,.btn1 { width: 150px; line-height: 70px; font-size: x-large; background-color: seagreen; opacity: 0.8; } .btn_click { width: 302px; line-height: 70px; font-size: x-large; background-color: salmon; } .txt { background-color: azure; width: 600px; line-height: 100px; font-size: x-large; text-align: right; } .btn:active { box-shadow: 0 0 5px 5px green; } .btn:hover { cursor: pointer; } .btn_click:hover { cursor: pointer; } </style> </head> <body> <table> <tr> <td colspan="4"><input class="txt" type="text" disabled /></td> </tr> <tr> <td colspan="2"><input class="btn_click" type="button" value="AC" /></td> <td colspan="2"><input class="btn_click" type="button" value="DEL" /></td> </tr> <tr> <td><input class="btn" type="button" value="7" /></td> <td><input class="btn" type="button" value="8" /></td> <td><input class="btn" type="button" value="9" /></td> <td><input class="btn" type="button" value="*" /></td> </tr> <tr> <td><input class="btn" type="button" value="4" /></td> <td><input class="btn" type="button" value="5" /></td> <td><input class="btn" type="button" value="6" /></td> <td><input class="btn" type="button" value="/" /></td> </tr> <tr> <td><input class="btn" type="button" value="1" /></td> <td><input class="btn" type="button" value="2" /></td> <td><input class="btn" type="button" value="3" /></td> <td><input class="btn" type="button" value="-" /></td> </tr> <tr> <td><input class="btn" type="button" value="0" /></td> <td><input class="btn" type="button" value="." /></td> <td><input class="btn" type="button" value="+" /></td> <td><input class="btn1" type="button" value="=" /></td> </tr> </table> <script> //只能实现两位数的加减法！ window.onload = function () { var arr = []; var str = ""; var a=0; var arr1=[]; var str1 = ""; var str2 = ""; var arr2 = []; //首先把值放到txt中。 var btn = document.getElementsByClassName("btn");//这是除了删除之外的按钮 var txt = document.getElementsByClassName("txt")[0];//文本内容 var anniu = document.getElementsByClassName("btn_click"); // console.log(anniu); //循环遍历 for (var i = 0; i < btn.length; i++) { btn[i].onclick = function () { if (!isNaN(this.value)||this.value==".") {//当前值是值或者数字 if(this.value=="."){//当前值是点 if(txt.value==""){//点前面没有值 txt.value="0"+this.value; arr.push(this.value); }else{//前面有值 判断前面有没有点，有点就不在添加。没有添加 if(txt.value.indexOf(".")==-1){//当前值不存在 txt.value=txt.value+this.value; arr.push(this.value); } } }else{ txt.value+=this.value; arr.push(this.value); } } else {//加减乘除 console.log("以前的值:"+arr); if(this.value==arr[arr.length-1]){ console.log("最后一个元素:"+arr[arr.length-1]); arr=arr.splice(arr.length-1,1,this.value); console.log("替换过后的arr："+arr); txt.value=txt.value; }else{ txt.value=txt.value+this.value; arr.push(this.value); } // txt.value = txt.value + this.value; // arr.push(this.value); // if(this.value==arr[arr.length]){ // } } } } function fn(str){ let count=0; for (var i = 0; i < str.length; i++) { if (str[i] == "+" || str[i] == "-" || str[i] == "*" ||str[i] == "/") { count++; if(count==2){ str1=str.slice(0,i); str=work(str1)+str.slice(i); count=0; return fn(str);//最后两个数 } } } //24+3 console.log("最后的:"+str); return work(str); } document.getElementsByClassName("btn1")[0].onclick = function(){ str=arr.join(''); txt.value=fn(str); }; function work(str1) { for (var j = 0; j < str1.length; j++) { if (str1[j] == "+") {//加号左右的两个字符串加起来。变成一个新字符串。 a=parseFloat(str1.slice(0,j)); console.log("a:"+a); b=parseFloat(str1.slice(j+1)); console.log("a:"+b); sum=a+b; console.log("和:"+sum); return sum; } if (str1[j] == "-") {//加号左右的两个字符串加起来。变成一个新字符串。 a=parseFloat(str1.slice(0,j)); console.log("a:"+a); b=parseFloat(str1.slice(j+1)); console.log("a:"+b); sum=a-b; console.log("和:"+sum); return sum; } if (str1[j] == "*") {//加号左右的两个字符串加起来。变成一个新字符串。 a=parseFloat(str1.slice(0,j)); console.log("a:"+a); b=parseFloat(str1.slice(j+1)); console.log("a:"+b); sum=a*b; console.log("和:"+sum); return sum; } if (str1[j] == "/") {//加号左右的两个字符串加起来。变成一个新字符串。 a=parseFloat(str1.slice(0,j)); console.log("a:"+a); b=parseFloat(str1.slice(j+1)); console.log("a:"+b); sum=a/b; console.log("和:"+sum); return sum; } } } //cishi 此时按下的是清空或者删除键 for (var j = 0; j < anniu.length; j++) { anniu[j].onclick = function () { if (this.value == "AC") {//把所有东西都清空 是this不是 txt.value = ""; arr = []; } else {//按下的是删除键，如果是删除键，就把前一个数或者符号删除 //可以截取字符串，然后在重新加到【屏幕上 substr \ txt.value = txt.value.substr(0, txt.value.length - 1); } } } } </script> </body> </html>
