html:
<body>
<div class="outer">
<div class="buzhou"></div>
<div class="sum">0</div>
<table>
<tr>
<td class="gary">c</td>
<td class="gary baifenhao">%</td>
<td id="divide" class="gary">÷</td>
<td id="times" class="gary">×</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td class="gary">-</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td class="gary">+</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td class="orange" rowspan="2">=</td>
</tr>
<tr>
<td colspan="2">0</td>
<td>.</td>
</tr>
</table>
</div>
</body>
style:
<style>
*{
margin: 0;
padding: 0;
}
.outer{
width: 500px;
margin: 10px auto;
overflow: hidden;
}
td{
width: 100px;
height: 60px;
font-size: 36px;
border-radius: 8px;
text-align: center;
line-height: 40px;
color: white;
background-color: #000000;
}
td:hover{
cursor: pointer;
}
td:active{
background-color: #00f6f6;
}
table{
background-color: #1C1C1C;
border-spacing: 20px;
}
.gary{
background-color: #7D6E64;
}
.orange{
background-color: #EE7714;
}
.baifenhao{
font-size: 26px;
}
.buzhou{
height: 20px;
background-color: #DBDFC5;
text-align: right;
padding-top: 5px;
padding-bottom: 5px;
overflow: hidden;
}
.sum{
height: 70px;
background-color: #DBDFC5;
font-size: 66px;
line-height: 60px;
text-align: right;
padding-bottom: 10px;
padding-left: 17px;
overflow: hidden;
}
</style>
script:
<script type="text/javascript">
window.onload = function(){
var alltd = document.querySelectorAll('.outer table td');
var buzhou = document.getElementsByClassName('buzhou')[0];
var sum = document.getElementsByClassName('sum')[0];
var _divide = document.getElementById('divide').innerText;
var _times = document.getElementById('times').innerText;
var arr = new Array();
var temp = ''; //保存输入的数 12.333
for (var i=0; i<alltd.length; i++){
alltd[i].onclick = function () {
buzhou.innerText += this.innerText;
if (this.innerText === '='){
arr.push(temp);
//此处计算得出结果
//将数组倒置，可以简化不步骤，少改下标
//我的思路：将数组慢慢变短，知道arr[0]的时候，即使最后的结果
arr = arr.reverse();
console.log(arr);
//将数组运算，最后得出结果
for (var k=arr.length-1; k>=0; k--){
if (arr[arr.length-2] === _divide){
arr[arr.length-3] = arr[arr.length-1] / arr[arr.length-3];
// arr.pop();
// arr.pop();
arr.length -= 2; //每运算一次，数组长度减二
} else if (arr[arr.length-2] === _times){
arr[arr.length-3] = arr[arr.length-1] * arr[arr.length-3];
arr.length -= 2;
} else if (arr[arr.length-2] === '%'){
arr[arr.length-3] = arr[arr.length-1] % arr[arr.length-3];
arr.length -= 2;
} else if (arr[arr.length-2] === '+'){
if (arr[arr.length-4] === '%'){
arr[arr.length-5] = arr[arr.length-3] % arr[arr.length-5];
arr[arr.length-4] = arr[arr.length-2];
arr[arr.length-3] = arr[arr.length-1];
arr.length -= 2;
} else if (arr[arr.length-4] === _divide) {
arr[arr.length-5] = arr[arr.length-3] / arr[arr.length-5];
arr[arr.length-4] = arr[arr.length-2];
arr[arr.length-3] = arr[arr.length-1];
arr.length -= 2;
} else if (arr[arr.length-4] === _times) {
arr[arr.length-5] = arr[arr.length-3] * arr[arr.length-5];
arr[arr.length-4] = arr[arr.length-2];
arr[arr.length-3] = arr[arr.length-1];
arr.length -= 2;
} else {
//parseFloat：防止+运算符做字符串连接，我这里实现的是加法运算
arr[arr.length-3] = parseFloat(arr[arr.length-1]) + parseFloat(arr[arr.length-3]);
arr.length -= 2;
}
} else if (arr[arr.length-2] === '-'){
if (arr[arr.length-4] === '%'){
arr[arr.length-5] = arr[arr.length-3] % arr[arr.length-5];
arr[arr.length-4] = arr[arr.length-2];
arr[arr.length-3] = arr[arr.length-1];
arr.length -= 2;
} else if (arr[arr.length-4] === _divide) {
arr[arr.length-5] = arr[arr.length-3] / arr[arr.length-5];
arr[arr.length-4] = arr[arr.length-2];
arr[arr.length-3] = arr[arr.length-1];
arr.length -= 2;
} else if (arr[arr.length-4] === _times) {
arr[arr.length-5] = arr[arr.length-3] * arr[arr.length-5];
arr[arr.length-4] = arr[arr.length-2];
arr[arr.length-3] = arr[arr.length-1];
arr.length -= 2;
} else {
arr[arr.length-3] = arr[arr.length-1] - arr[arr.length-3];
arr.length -= 2;
}
}
}
if (isNaN(arr[0])){
sum.innerText = '输入有误'; //错误提示
} else {
sum.innerText = arr[0]; //最终的结果就是arr[0]
}
this.onclick = null; //按一次等号就算出结果，再次按等号，不会改变
} else if (this.innerText === 'c'){
buzhou.innerText = '';
sum.innerText = 0;
//页面刷新
window.location.reload();
} else {
// 如果输入的字符不是数字（+，-，*，/，%）的时候，直接把该字符push进arr数组
// 如果一直在输入数字，则把输入的数字（12.345）拼个串，在输入非数字时将数字push进数组
// 注意：在你点击=号之前，你也输入了一个数字，记得在绑定=号时将数字push进数组中
if (this.innerText === _divide || this.innerText === _times || this.innerText === '%' || this.innerText === '+' || this.innerText === '-'){
arr.push(temp);
arr.push(this.innerText);
temp = '';
} else {
temp += this.innerText;
}
}
}
}
}
</script>