1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
| var Calculate = (function () {
function Calculate() {
this.n1 = '';
this.n2 = '';
this.option = '';
this.result = '';
this.keys = [
['Clear', '÷'],
['7', '8', '9', '×'],
['4', '5', '6', '-'],
['1', '2', '3', '+'],
['0', '.', '=']
];
this.createTopScreen();
this.createBottomBar();
this.createWrap();
this.createAllButton();
this.bindEvents();
}
Calculate.prototype.createSingleButton = function (text, wrap, className) {
var button = document.createElement('button');
button.textContent = text;
button.classList.add('button');
button.classList.add(className ? className : '');
wrap.appendChild(button);
return button;
};
Calculate.prototype.createTopScreen = function () {
var top = document.createElement('div');
top.classList.add('top-screen');
top.textContent = '0';
this.top = top;
};
Calculate.prototype.createBottomBar = function () {
var bottom = document.createElement('div');
bottom.classList.add('bottom-bar');
this.bottomBar = bottom;
};
Calculate.prototype.createWrap = function () {
var wrap = document.createElement('div');
document.body.appendChild(wrap);
wrap.classList.add('calc-wrap');
wrap.appendChild(this.top);
wrap.appendChild(this.bottomBar);
this.wrap = wrap;
};
Calculate.prototype.createAllButton = function () {
var _this = this;
this.keys.map(function (v1) {
var div = document.createElement('div');
div.classList.add('button-bar');
v1.map(function (v2) {
_this.createSingleButton(v2, div, "button-" + v2);
});
_this.bottomBar.appendChild(div);
});
};
Calculate.prototype.checkNumber = function (num, text) {
if (text === '.' && this[num].indexOf('.') >= 0) {
this.top.textContent = this[num];
return;
}
this[num] += text;
this.top.textContent = this[num];
};
Calculate.prototype.updateNumber = function (text) {
if (this.option) {
this.checkNumber('n2', text);
}
else {
this.checkNumber('n1', text);
}
};
Calculate.prototype.updateOption = function (text) {
if (this.n1 === '') {
this.n1 = this.result;
}
this.option = text;
};
Calculate.prototype.updateResult = function () {
if (this.n1 === '' && this.n2 === '' && this.option === '') {
this.top.textContent = this.result;
return;
}
var result;
if (this.option === '+')
result = Number(this.n1) + Number(this.n2);
if (this.option === '-')
result = Number(this.n1) - Number(this.n2);
if (this.option === '×')
result = Number(this.n1) * Number(this.n2);
if (this.option === '÷')
result = Number(this.n1) / Number(this.n2);
this.top.textContent = this.result = result.toString();
if (result.toString().length > 9) {
this.top.textContent = this.result = result.toPrecision(9).toString().replace(/0+$/, '');
}
if (this.n2 === '0')
this.top.textContent = '不是数字';
this.n1 = '';
this.n2 = '';
this.option = '';
};
Calculate.prototype.updateNumberAndOption = function (text) {
if ('0123456789.'.indexOf(text) >= 0) {
this.updateNumber(text);
}
else if ('+-×÷'.indexOf(text) >= 0) {
this.updateOption(text);
}
else if ('='.indexOf(text) >= 0) {
this.updateResult();
}
else if ('Clear' === text) {
this.n1 = '';
this.n2 = '';
this.option = '';
this.top.textContent = this.result = '0';
}
console.log(this.n1, this.option, this.n2, this.result);
};
Calculate.prototype.bindEvents = function () {
var _this = this;
this.wrap.addEventListener('click', function (event) {
if (event.target instanceof HTMLButtonElement) {
var button = event.target;
var text = button.textContent;
_this.updateNumberAndOption(text);
}
});
};
return Calculate;
}());
new Calculate();
|
