index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./main.css" />
<title>Simple Calculator</title>
</head>
<body>
<main id="main">
<div id="calculator">
<div class="display">0</div>
<div class="buttons-wrapper">
<div class="row">
<div class="col"><span class="btn lightgray" action="clear">AC</span></div>
<div class="col"><span class="btn lightgray" action="negative">+/-</span></div>
<div class="col"><span class="btn lightgray" action="percentage">%</span></div>
<div class="col"><span class="btn orange" operator="/">/</span></div>
</div>
<div class="row">
<div class="col"><span class="btn" number="7">7</span></div>
<div class="col"><span class="btn" number="8">8</span></div>
<div class="col"><span class="btn" number="9">9</span></div>
<div class="col"><span class="btn orange" operator="*">X</span></div>
</div>
<div class="row">
<div class="col"><span class="btn" number="4">4</span></div>
<div class="col"><span class="btn" number="5">5</span></div>
<div class="col"><span class="btn" number="6">6</span></div>
<div class="col"><span class="btn orange" operator="-">-</span></div>
</div>
<div class="row">
<div class="col"><span class="btn" number="1">1</span></div>
<div class="col"><span class="btn" number="2">2</span></div>
<div class="col"><span class="btn" number="3">3</span></div>
<div class="col"><span class="btn orange" operator="+">+</span></div>
</div>
<div class="row">
<div class="col col-2x"><span class="btn" number="0">0</span></div>
<div class="col"><span class="btn" number=".">.</span></div>
<div class="col"><span class="btn orange" action="getResult">=</span></div>
</div>
</div>
</div>
</main>
<script src="./calculator.js" charset="utf-8"></script>
<script charset="utf-8" type="text/javascript">
window.addEventListener('DOMContentLoaded', () => {
new Calculator().bind(document.querySelector('#calculator'));
});
</script>
</body>
</html>
main.css
html, body { font-size: 14px; margin: 0px; padding: 0px; background-color: lightgray; } #main { display: flex; height: 100vh; justify-content: center; align-items: center; } #calculator { display: flex; flex-direction: column; height: 530px; 320px; background-color: #000; box-shadow: 0px 0px 6px 0px #fff; padding-top: 24px; box-sizing: border-box; } #calculator .display { font-size: 48px; color: #fff; text-align: right; height: 88px; line-height: 88px; padding: 0px 12px; overflow-x: auto; padding: 0px 12px; box-sizing: border-box; white-space: nowrap; } #calculator .buttons-wrapper { flex: 1; display: flex; flex-direction: column; } #calculator .buttons-wrapper .row { display: flex; flex-direction: row; } #calculator .buttons-wrapper .row .col { flex: 1; } #calculator .buttons-wrapper .row .col.col-2x { flex: 2; } #calculator .buttons-wrapper .row .col .btn { display: block; color: #fff; text-align: center; height: 60px; line-height: 60px; border-radius: 30px; font-size: 18px; background-color: gray; margin: 10px; user-select: none; } #calculator .buttons-wrapper .row .col .btn.orange { background-color: orange; } #calculator .buttons-wrapper .row .col .btn.lightgray { background-color: lightgray; color: #000; }
calculator.js
(function(global) { class Calculator { constructor() { } set display(text) { this.$display.innerText = text; this.$display.scrollLeft = this.$display.clientWidth } get display() { return this.$display.innerText; } bind(element) { this.root = element; this.initView(); } initView() { this.$display = this.root.querySelector('.display'); this.$btns = this.root.querySelectorAll('.btn'); // 对动作按钮进行事件绑定 Array.from(this.$btns).filter(btn => btn.getAttribute('action')).forEach(btn => { btn.addEventListener('click', event => { this[btn.getAttribute('action')].call(this, event); }); }); // 对数字按钮进行事件绑定 Array.from(this.$btns).filter(btn => btn.getAttribute('number')).forEach(btn => { btn.addEventListener('click', event => { if(!this.value){ this.value = ''; this.display = ''; } this.value += btn.getAttribute('number'); this.display += btn.getAttribute('number'); }); }); // 对操作符按钮进行事件绑定 Array.from(this.$btns).filter(btn => btn.getAttribute('operator')).forEach(btn => { btn.addEventListener('click', event => { if(!this.value) { return false; } this.operator = btn.getAttribute('operator'); this.previous = Number(this.value); this.value = ''; this.display = this.operator; }); }); } /** * 清屏 */ clear() { this.value = null; this.display = '0'; } /** * 百分比 */ percentage() { if(this.value) { this.value = Number(this.value) / 100; this.display = this.value; } } /** * 正负转换 */ negative() { if(this.value) { this.value = - Number(this.value); this.display = this.value; } } /** * 计算结果 */ getResult() { if(!this.value || !this.operator || !this.previous) { return false; } try { let value = eval(`${ this.previous } ${ this.operator } ${ this.value }`); if(value - (value | 0)) { value = value.toFixed(2); } this.value = value; this.display = value; } catch (e) { this.display = e.message; } this.operator = null; this.previous = null; } } global.Calculator = Calculator; }(this));
