<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算器</title>
<style>
* {
margin: 0px;
padding: 0px;
}
body {
width: 100%;
height: 100%;
}
.p {
margin: 10% auto 0px;
background-color: bisque;
word-break: break-all;
word-wrap: break-word;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
max-width: 300px;
max-height: 60px;
}
.table {
margin: 0px auto;
background-color: #808080;
}
.table tr {
margin-top: 20px;
background-color: #808080;
}
.table td {
margin-left: 25px;
background-color: #FFE4C4;
text-align: center;
width: 50px;
height: 50px;
}
.table td:hover {
background-color: burlywood;
color: darkorange;
}
</style>
</head>
<body>
<p name="p" class="p"></p>
<table name="table" class="table">
<tr>
<td value='C'>C</td>
<td value='/'>/</td>
<td value='x'>x</td>
<td value='back'>back</td>
</tr>
<tr>
<td value=7>7</td>
<td value=8>8</td>
<td value=9>9</td>
<td value='-'>-</td>
</tr>
<tr>
<td value=4>4</td>
<td value=5>5</td>
<td value=6>6</td>
<td value='+'>+</td>
</tr>
<tr>
<td value=1>1</td>
<td value=2>2</td>
<td value=3>3</td>
<td value='=' rowspan="2">=</td>
</tr>
<tr>
<td value='%'>%</td>
<td value=0>0</td>
<td value='.'>.</td>
</tr>
</table>
</body>
<script>
var Data_arr_length = 0,
Operator_arr_length = 0,
count = 0, //符号’.‘的出现次数
Data_arr = new Array(),
Operator_arr = new Array(),
data = '', //每次的第一个数据
table = document.getElementsByName("table")[0],
p = document.getElementsByName("p")[0], //显示屏
Label = document.getElementsByTagName("label"), //数字
Span = document.getElementsByTagName("span"); //运算符以及功能符
//为table添加onclick触发事件，事件流模式为事件冒泡
table.addEventListener("click", Onclick, false);
//整个计算机的函数闭包
function Onclick(e) {
var e, obj;
e = e || window.event;
//返回动作目标元素
obj = e.target;
//显示屏清空函数
function Clear() {
var childnum = p.childNodes.length;
for (; childnum - 1 >= 0; childnum--) {
p.removeChild(p.childNodes[childnum - 1]);
}
data = '';
}
//Back函数,清除修改数组之前储存数据
function Back() {
//back值为num
function Begin_num() {
if (data == '') {
data = String(Data_arr[Data_arr_length - 1]);
Data_arr_length--;
}
//利用num型转化为string,再进行切分,更新data
data = data.substring(0, data.length - 1);
}
//back值为operater
function Begin_operate() {
Operator_arr[Operator_arr_length - 1] = '';
Operator_arr_length--;
//防止运算符异常错误抛出
count--;
}
if ((p.lastChild.innerHTML >= '0' && p.lastChild.innerHTML <= '9') || p.lastChild.innerHTML == '.') {
Begin_num();
} else {
Begin_operate();
}
}
//选取运算符优先级
//数组错位替换思想
function Result() {
var i = 0,
sum_data = 0,
exchang_data, j;
for (; i < Data_arr_length; i++) {
if (Operator_arr[i] != '-' && Operator_arr[i] != '+') {
switch (Operator_arr[i]) {
case 'x':
exchang_data = Data_arr[i] * Data_arr[i + 1];
Data_arr[i] = exchang_data;
for (j = i + 1; j < Data_arr.length; j++) {
Data_arr[j] = Data_arr[j + 1];
Operator_arr[j - 1] = Operator_arr[j];
}
break;
case '/':
exchang_data = Data_arr[i] / Data_arr[i + 1];
Data_arr[i] = exchang_data;
for (j = i + 1; j < Data_arr.length; j++) {
Data_arr[j] = Data_arr[j + 1];
Operator_arr[j - 1] = Operator_arr[j];
}
break;
case '%':
exchang_data = Data_arr[i] % Data_arr[i + 1];
Data_arr[i] = exchang_data;
for (j = i + 1; j < Data_arr.length; j++) {
Data_arr[j] = Data_arr[j + 1];
Operator_arr[j - 1] = Operator_arr[j];
}
break;
}
}
}
i = 0;
sum_data = Data_arr[i];
for (; i < Data_arr.length; i++) {
if (Operator_arr[i] == '+')
sum_data += Data_arr[i + 1];
if (Operator_arr[i] == '-')
sum_data -= Data_arr[i + 1];
}
//数组重新储存数值
Data_arr_length = 0;
Operator_arr_length = 0;
return sum_data;
}
//Data总函数
function Data() {
if (obj.innerHTML === '.') {
count++;
//检查小数点是否联通
try {
if (count > 1 || Label.length == 0) {
throw e;
}
//在显示屏中生成节点,用于显示数据
var node = document.createElement("label");
node.innerHTML = obj.innerHTML;
p.appendChild(node);
data += obj.innerHTML;
} catch {
console.log(count);
count--;
alert("请输入有效数");
}
} else {
var node = document.createElement("label");
node.innerHTML = obj.innerHTML;
p.appendChild(node);
data += obj.innerHTML;
}
}
//Operator总函数
function Operator() {
count = 0;
//同上
try {
if (data == '')
throw e;
//在显示屏中生成节点,用于显示数据
var Node = document.createElement("span");
Node.innerHTML = obj.innerHTML;
p.appendChild(Node);
//数据储存
Data_arr[Data_arr_length] = Number(data);
data = '';
//符号储存
Operator_arr[Operator_arr_length] = obj.innerHTML;
Data_arr_length++;
Operator_arr_length++;
} catch {
alert("请输入有效数");
}
}
//结果/撤回/清零显示函数
function Result_Symbol() {
if (obj.innerHTML == 'back' && p.innerHTML != '') {
if (p.lastChild.innerHTML == '.')
count--;
Back();
p.lastChild.remove();
//back直至为空时
if (p.innerHTML == '')
data = '';
}
if (obj.innerHTML == 'C')
Clear();
try {
if (obj.innerHTML == '=') {
if (p.innerHTML == '')
throw e;
Data_arr[Data_arr_length] = Number(data);
console.log(Data_arr);
console.log(Operator_arr);
Clear();
Result();
var node = document.createElement("label");
node.innerHTML = Result();
p.appendChild(node);
data = String(Result());
}
} catch {
alert("请输入");
}
}
if ((obj.innerHTML >= '0' && obj.innerHTML <= '9') || obj.innerHTML == '.')
Data();
else if (obj.innerHTML == '=' || obj.innerHTML == 'back' || obj.innerHTML == 'C')
Result_Symbol();
else
Operator();
}
</script>
</html>
结果
自己做得一点小东西，本来想就自己看看的，但是今天才发现，无论好坏，本就应该互相学习，小生在这里致歉了。。。
菜鸟爬行中…