正文
学习笔记之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>
