您的位置：首页 > Web前端 > JavaScript
js简易计算器底层运算逻辑(带撤销功能)

2017-08-29 18:53 267 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.wrap{
width: 400px;
height: 430px;
margin: 20px auto;
border: 1px solid #000;
}
input{
width: 396px;
height: 26px;
text-align: right;
}
.box{
padding-top: 10px;
width: 400px;
height: 300px;
text-align: center;
}
button{
width: 25%;
height: 30px;
cursor: pointer;
margin:2px 10px;
}
</style>
</head>
<body>
<div class="wrap">
<input type="text" name="result" id="result" value="" />
<div class="box">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>0</button>
<button>+</button>
<button>-</button>
<button>*</button>
<button>/</button>
<button>=</button>
<button>back</button>
</div>

</div>
</body>

<script type="text/javascript">
var buttonList = document.getElementsByTagName('button');
var input = document.getElementById('result');
var dataSource = [];
for(var i = 0; i < buttonList.length; i++){
buttonList[i].onclick = function(){
var str = this.innerHTML;
if(str == 'back'){
calcBack();
return ;
}else if(dataSource[dataSource.length -1] == '='){
dataSource = [];  //上一次是=，再点击则清空
}

dataSource.push(str);
dataSource  = handle(dataSource);
handReult(dataSource);
}
}

function calcBack(){
var arr = dataSource.join('').split('');
arr.pop();
dataSource =  handle(arr);
handReult(dataSource);
}

function show(arr){
var result = arr.join('');
input.value = result;
}

function handle(newArr){
var temp = []; //处理好的数据
var str = '';

for(var i = 0; i < newArr.length; i++){
var num = Number(newArr[i]);
if(num || num === 0){
//一定是数字
str = str+newArr[i];
}else{
//字符串,过滤重复的  + - * /
if(str != ''){
temp.push(str);
temp.push(newArr[i]);
str ='';
}
}

}
if(str != ''){
temp.push(str);
str = '';
}

//去掉前面的0
for(var i = 0 ; i < temp.length; i++){
var num = Number(temp[i]);
if(num || num == 0){
temp[i] = Number(temp[i]);
}
}

return temp;

}

function handReult(temp){
temp = JSON.parse(JSON.stringify(temp));
//判断是否要计算
if(temp[temp.length-1] == '='){
var result = calcu(temp);
temp.push(result);
}

//显示
show(temp);
}

function calcu(arr){
var newArr = JSON.parse(JSON.stringify(arr));  //复制数组，去掉引用

//计算除法
while(newArr.indexOf('/') != -1){
var index = newArr.indexOf('/');
var num1 = newArr[index-1];
var num2 = newArr[index+1];
var result = num1/num2;
newArr.splice(index-1,3,result);
}

//乘法
while(newArr.indexOf('*') != -1){
var index = newArr.indexOf('*');
var num1 = newArr[index-1];
var num2 = newArr[index+1];
var result = num1*num2;
newArr.splice(index-1,3,result);
}

//减法
while(newArr.indexOf('-') != -1){
var index = newArr.indexOf('-');
var num1 = newArr[index-1];
var num2 = newArr[index+1];
var result = num1-num2;
newArr.splice(index-1,3,result);
}

//加法
while(newArr.indexOf('+') != -1){
var index = newArr.indexOf('+');
var num1 = newArr[index-1];
var num2 = newArr[index+1];
var result = num1+num2;
newArr.splice(index-1,3,result);
}
return newArr[0];
}
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航