一个很简单的背景
在休息时间利用JS写了一个计算器，本来以为很简单的一个逻辑，没想到还挺复杂，即时运算，存储运算都已经实现。将代码贴到下面
正文代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin:0;
padding:0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
#app{
width: 30%;
height: 700PX;
margin: 100PX auto;
display: flex;
flex-wrap:wrap;
}
#title{
width: 100%;
height: 100PX;
font-size: 50PX;
text-align: center;
line-height: 100px;
}
#top{
width: 100%;
height: 200PX;
background-color: aqua;
}
#botem{
width: 100%;
display: flex;
justify-content:space-between;
background-color: antiquewhite;
}
#botem .ul1{
width: 75%;
}
#botem .ul2{
width: 25%;
}
#top div{
font-size: 30PX;
text-align: right;
line-height: 100PX;
padding:0 10PX;
}
#top_text1{
width: 100%;
height: 50%;
background-color: aquamarine;
color: #AAA;
}
#top_text2{
width: 100%;
height: 50%;
background-color: azure;
color: #84C9EF;
}
ul li{
display: inline-block;
height: 100PX;
text-align: center;
line-height: 100PX;
border: 1PX solid #ddd;
font-size: 30PX;
}
ul li:hover{
cursor:pointer;
background-color: azure;
color:#FCD97D;
}
.ul1 li{
float: left;
width: 33.33%;
}
.ul2 li{
width: 100%;
}
.ul1 .teshu{
width: 66.66%;
}
</style>
</head>
<body>
<div ID="app">
<div id="title">
计算器
</div>
<div id="top">
<div ID="top_text1">
0
</div>
<div ID="top_text2">
</div>
</div>
<div id="botem">
<ul class="ul1">
<li onclick="cuncu(this)" style="width: 100%;">AC</li>
<!-- <li onclick="cuncu(this)">+/-</li> -->
<!-- <li onclick="cuncu(this)">%</li> -->
<li onclick="cuncu(this)">1</li>
<li onclick="cuncu(this)">2</li>
<li onclick="cuncu(this)">3</li>
<li onclick="cuncu(this)">4</li>
<li onclick="cuncu(this)">5</li>
<li onclick="cuncu(this)">6</li>
<li onclick="cuncu(this)">7</li>
<li onclick="cuncu(this)">8</li>
<li onclick="cuncu(this)">9</li>
<li class="teshu" onclick="cuncu(this)">0</li>
<li onclick="cuncu(this)">.</li>
</ul>
<ul class="ul2">
<li onclick="cuncu(this)">+</li>
<li onclick="cuncu(this)">-</li>
<li onclick="cuncu(this)">*</li>
<li onclick="cuncu(this)">/</li>
<li onclick="cuncu(this)">=</li>
</ul>
</div>
</div>
</body>
<script>
//这个是用来显示结果
var a = document.getElementById('top_text1');
//这个是用来记录过程
var b = document.getElementById('top_text2');
//这个用来计算过程
var jilu = "";
var suanshi = [];
//这个用来记录结果
var jieguo = 0;
function cuncu(obj){
//这个用来获取按键值
var text = obj.innerHTML;
//如果按了AC就清空记录过程，清空显示结果
if(text=="AC"){
b.innerHTML = "";
a.innerHTML = "0";
suanshi = [];
//如果按了等于号就算出结果
}else if(text=="="){
//如果他的前一个数组是字符的或者是空的话就无效
if(typeof(suanshi[suanshi.length-1])=='string' || suanshi[0]==null){
}else{
//按了等于号之后就利用下面的方法重新计算一边然后清空算式清空数组，本次运算就结束了
var mat = jieguomot(suanshi);
a.innerHTML = mat;
a.style.color="black";
b.innerHTML="";
suanshi = [];
}
//按了+号就
}else if(text=="+"){
//如果他的前一个数组是字符的或者是空的话就无效
if(typeof(suanshi[suanshi.length-1])=='string' || suanshi[0]==null){
}else{
//否则就将符号存入数组中，再将符号放入HTMl中
suanshi.push(text);
b.innerHTML+=text;
}
}else if(text=="-"){
if(typeof(suanshi[suanshi.length-1])=='string' || suanshi[0]==null){
}else{
suanshi.push(text);
b.innerHTML+=text;
}
}else if(text=="*"){
if(typeof(suanshi[suanshi.length-1])=='string' || suanshi[0]==null){
}else{
suanshi.push(text);
b.innerHTML+="×";
}
}else if(text=="/"){
if(typeof(suanshi[suanshi.length-1])=='string' || suanshi[0]==null){
}else{
suanshi.push(text);
b.innerHTML+="÷";
}
}else if(text=="."){
if(typeof(suanshi[suanshi.length-1])=='string' || suanshi[0]==null){
}else{
suanshi.push(text);
b.innerHTML+=text;
}
// jieguomot(suanshi);
}else if(text=="+/-"){
}
//下面是判断数字
else{
//先将数字放入HTML中
b.innerHTML+=text;
//再将数字放入数组中
suanshi.push(Number(text));
//通过调用方法再返回一个当前运算的值
var mat = jieguomot(suanshi);
//将当前运算的结果放到HTMl中
a.innerHTML=mat;
}
}
function jieguomot(j){
//一进入方法先处理
for(var q=0;q<j.length;q++){
//如果当前下标的值和下一个下标的值都市数字类型的话就把他们放在一块
if(typeof(j[q])=="number" && typeof(j[q+1])=="number"){
//通过组合字符串的方式放入
j.splice([q],2,j[q]+''+j[q+1]);
//再通过强制类型转换
j[q] = Number(j[q]);
};
//如果当前循环的下标的前一位是是小数点的话将当前循环的下标的前俩为和当前下标的值组合起来成为一个小数
if(j[q-1]=="."){
//组合的方法和上面类似
j.splice([q-2],3,j[q-2]+'.'+j[q]);
j[q-2] = Number(j[q-2]);
}
}
// return 1;
//先将算式数组转为json格式不然重复赋值的话下面的数组操作会改变原来的值
//通过俩次转换就可以保留原来的数组
var yuanshi = JSON.stringify(j);
var x = JSON.parse(yuanshi);
var i=1;
//先判断算式的乘除，使用while循坏将乘除的前面和后面算出来然后把他们三个覆盖掉
while(i<x.length){
//判断乘除
if(x[i]=="*"||x[i]=="/"){
//判断乘
if(x[i]=="*"){
//算出积来
var cheng = x[i-1]*x[i+1];
//然后将算式覆盖掉
x.splice([i-1],3,cheng);
}else if(x[i]=="/"){
var cheng = x[i-1]/x[i+1];
x.splice([i-1],3,cheng);
}
}
//如果没有的话就加2直到结束循坏
else{
i+=2;
}
}
//重新赋值，理论和上面的一样
i=1;
while(i<x.length){
if(x[i]=="+" || x[i]=="-"){
if(x[i]=="+"){
var cheng = x[i-1]+x[i+1];
x.splice([i-1],3,cheng);
}else if(x[i]=="-"){
var cheng = x[i-1]-x[i+1];
x.splice([i-1],3,cheng);
}
}else{
i+=2;
}
}
//最后返回一个结果，并且不影响原来的算式
return x;
}
</script>
</html>
1603
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
