127 lines
2.6 KiB
HTML
127 lines
2.6 KiB
HTML
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
</head>
|
||
|
||
<style>
|
||
html, body {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0px;
|
||
font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
|
||
}
|
||
|
||
.btn {
|
||
width: 25%;
|
||
height: 20%;
|
||
background: #3083dc;
|
||
font-size: 75px;
|
||
text-align: center;
|
||
display: inline-block;
|
||
box-sizing: border-box;
|
||
border: 1px solid white;
|
||
user-select: none;
|
||
}
|
||
|
||
.btn:hover {
|
||
filter: brightness(75%);
|
||
}
|
||
|
||
.btn-op {
|
||
background:#fb5012;
|
||
color:#fdffff;
|
||
}
|
||
|
||
</style>
|
||
|
||
<body onload='init()'>
|
||
|
||
<div id='result' style='
|
||
width:100%;
|
||
height:20%;
|
||
background:#191516;
|
||
color:#fdffff;
|
||
font-size:75px;
|
||
text-align: right;'></div>
|
||
|
||
<div style='
|
||
width:100%;
|
||
height:79.9%;
|
||
font-size: 0;
|
||
'>
|
||
<div class='btn btn-op' style='width:50%'>C</div>
|
||
<div class='btn btn-op' style='width:50%'>=</div>
|
||
<div class='btn'>1</div>
|
||
<div class='btn'>2</div>
|
||
<div class='btn'>3</div>
|
||
<div class='btn btn-op'>÷</div>
|
||
<div class='btn'>4</div>
|
||
<div class='btn'>5</div>
|
||
<div class='btn'>6</div>
|
||
<div class='btn btn-op'>×</div>
|
||
<div class='btn'>7</div>
|
||
<div class='btn'>8</div>
|
||
<div class='btn'>9</div>
|
||
<div class='btn btn-op'>+</div>
|
||
<div class='btn btn-op'>.</div>
|
||
<div class='btn'>0</div>
|
||
<div class='btn btn-op'>^</div>
|
||
<div class='btn btn-op'>-</div>
|
||
</div>
|
||
|
||
</body>
|
||
|
||
<script>
|
||
var curVal = 0;
|
||
var curOp = '';
|
||
|
||
var nums = ['.', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
|
||
var mathTable = {
|
||
'+': function(x) { curVal += x },
|
||
'-': function(x) { curVal -= x },
|
||
'^': function(x) { curVal = curVal ** x },
|
||
'×': function(x) { curVal *= x },
|
||
'÷': function(x) { curVal /= x },
|
||
'C': function(x) { curVal = 0 },
|
||
'=': function(x) { mathTable[curOp](x) },
|
||
};
|
||
|
||
function init() {
|
||
btns = document.querySelectorAll('.btn');
|
||
result = document.querySelector('#result');
|
||
|
||
result.innerHTML = curVal;
|
||
|
||
btns.forEach(function(btn) {
|
||
btn.onclick = function(event) {
|
||
handleButton(this, result);
|
||
};
|
||
});
|
||
}
|
||
|
||
function handleButton(btn, result) {
|
||
var op = btn.innerHTML;
|
||
|
||
if (nums.includes(op)) {
|
||
if (result.innerHTML == curVal) {
|
||
result.innerHTML = '';
|
||
}
|
||
result.innerHTML += op;
|
||
} else {
|
||
var num = Number(result.innerHTML);
|
||
if (curOp != '' || op == 'C') {
|
||
mathTable[op](num);
|
||
} else {
|
||
curVal = num;
|
||
}
|
||
result.innerHTML = curVal;
|
||
|
||
if (op == 'C' || op == '=') {
|
||
op = '';
|
||
}
|
||
curOp = op;
|
||
}
|
||
}
|
||
</script>
|
||
</html> |