js函数计算器
面向过程编写,已经做完小数处理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
body {
background-color: #eee;
}
.frame {
width: 500px;
height: 600px;
margin: 50px auto;
background-color: #ccc;
box-shadow: 0 0 10px #000;
padding: 4px;
border-radius: 6px;
}
.numberOutput {
width: 498px;
background-color: #eee;
}
.numberOutput p {
display: flex;
flex-direction: row-reverse;
font-size: 48px;
overflow-y: hidden;
height: 75px;
}
.numberInput {
float: left;
width: 500px;
height: 360px;
background-color: #fff;
}
.numberInput li {
float: left;
width: 121px;
line-height: 86px;
text-align: center;
font-size: 35px;
background-color: #aaa;
border: 2px solid #ccc;
cursor: pointer;
}
.numberInput li:hover {
background-color: #ccc;
}
</style>
<script>
window.onload = function () {
let num = document.getElementsByClassName("num")
let btn = document.getElementsByClassName("btn")
let vw = document.getElementsByClassName("output")[1]
let vwH = document.getElementsByClassName("output")[0]
for (let i = 0; i < num.length; i++) {
num[i].onclick = function () {
vw.innerHTML += num[i].innerHTML
}
}
btn[0].onclick = function () {
vw.innerHTML = vw.innerHTML.substr(0, vw.innerHTML.length - 1)
}
btn[1].onclick = function () {
location.reload();
}
btn[2].onclick = function () {
if (vw.innerHTML.indexOf('%') !== -1) {
vw.innerHTML = 'error'
} else if (vw.innerHTML.indexOf('e') !== -1) {
location.reload();
} else {
vwH.innerHTML = vw.innerHTML + '×100%'
vw.innerHTML = Number(vw.innerHTML) * 100 + '%'
}
}
btn[3].onclick = function () {
if (vw.innerHTML.indexOf('%') !== -1) {
vw.innerHTML = 'error'
} else if (vw.innerHTML.indexOf('e') !== -1) {
location.reload();
} else {
vwH.innerHTML = 'sqrt(' + vw.innerHTML + ')'
vw.innerHTML = Number(vw.innerHTML) ** 0.5
}
}
function floatBase(numA, numB) {
let aLastIndex = String(numA).length - 1
let bLastIndex = String(numB).length - 1
let aFloLen = aLastIndex - (Number.isInteger(numA * 1) ? aLastIndex : String(numA).indexOf('.'))
let bFloLen = bLastIndex - (Number.isInteger(numB * 1) ? bLastIndex : String(numB).indexOf('.'))
return 10 ** (aFloLen > bFloLen ? aFloLen : bFloLen)
}
function computed(numA, numB, sym, base) {
switch (sym) {
case '+':
return (numA * base + numB * base) / base
break;
case '-':
return (numA * base - numB * base) / base
break;
case '×':
return (numA * base * (numB * base)) / base ** 2
break;
case '÷':
return numA * base / (numB * base)
break;
}
}
function evaluation(arr, s = 0, e = arr.length) {
let arr2 = arr.slice(s, e)
let symArr1 = arr2.filter(z => (z === '×' || z === '÷'))
let symArr2 = arr2.filter(z => (z === '+' || z === '-'))
while (1) {
let idx, base, sym, res;
let first = symArr1.shift() || symArr2.shift()
if (!first) { break }
idx = arr2.indexOf(first)
sym = first
base = floatBase(arr2[idx - 1], arr2[idx + 1])
res = computed(arr2[idx - 1], arr2[idx + 1], sym, base)
arr2.splice(idx - 1, 3, res)
}
return arr2.shift()
}
btn[18].onclick = function () {
vwH.innerHTML = vw.innerHTML
if (vw.innerHTML.indexOf('%') !== -1) {
vw.innerHTML = 'error'
} else if (vw.innerHTML.indexOf('I') !== -1) {
location.reload();
} else if (vw.innerHTML.indexOf('e') !== -1) {
location.reload();
} else if (vw.innerHTML.indexOf('N') !== -1) {
location.reload();
} else {
vw.innerHTML = vw.innerHTML.replace(/\+/g, ',+,').replace(/\-/g, ',-,').replace(/\×/g, ',×,').replace(/\÷/g, ',÷,');
vw.innerHTML = evaluation(vw.innerHTML.split(','))
}
}
}
</script>
</head>
<body>
<div class="frame">
<div class="numberOutput">
<p class="output"></p>
<p class="output"></p>
</div>
<!--禁止文本被拖拽或双击选中-->
<div class="numberInput" onselectstart="return false;" ondragstart="return false">
<ul>
<li class="btn">←</li>
<li class="btn">C</li>
<li class="btn">%</li>
<li class="btn">√</li>
<li class="num btn">7</li>
<li class="num btn">8</li>
<li class="num btn">9</li>
<li class="num btn">÷</li>
<li class="num btn">4</li>
<li class="num btn">5</li>
<li class="num btn">6</li>
<li class="num btn">×</li>
<li class="num btn">1</li>
<li class="num btn">2</li>
<li class="num btn">3</li>
<li class="num btn">-</li>
<li class="num btn">0</li>
<li class="num btn">.</li>
<li class="btn">=</li>
<li class="num btn">+</li>
</ul>
</div>
</div>
</body>
</html>