写一个网页计算器
它可以进行长算式计算,不能进行混合运算。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
<style>
table{
height: 350px;
width: 500px;
margin: 50px auto;
background-color: #ccffff;
}
td{
width: 25px;
height: 20px;
}
.title, .result{
text-align: center;
background-color: #ffae9f;
}
.screen{
text-align: right;
background-color: #ffffff;
}
.btn{
text-align: center;
border: 1px turquoise solid;
}
.number{
border-radius: 25px;
background-color: #ff2f39;
}
</style>
</head>
<body>
<div class="container">
<table border="1" cellpadding="15" cellspacing="10">
<tr>
<td colspan="5" class="title">计算器</td>
</tr>
<tr>
<td colspan="5" class="screen" id="screen"></td>
</tr>
<tr>
<td colspan="2" class="result" id="result"></td>
<td colspan="2" class="btn" id="backspace">Backspace</td>
<td class="btn" id="clear">清除</td>
</tr>
<tr>
<td class="btn number" id="1">1</td>
<td class="btn number" id="2">2</td>
<td class="btn number" id="3">3</td>
<td class="btn operator" id="+">+</td>
<td class="btn" id="date">时间</td>
</tr>
<tr>
<td class="btn number" id="4">4</td>
<td class="btn number" id="5">5</td>
<td class="btn number" id="6">6</td>
<td class="btn operator" id="-">-</td>
<td class="btn operator" id="squre">平方</td>
</tr>
<tr>
<td class="btn number" id="7">7</td>
<td class="btn number" id="8">8</td>
<td class="btn number" id="9">9</td>
<td class="btn operator" id="*">*</td>
<td class="btn" id="sqrt">开方</td>
</tr>
<tr>
<td class="btn number" id="0">0</td>
<td class="btn number" id=".">.</td>
<td class="btn" id="equal">=</td>
<td class="btn operator" id="/">/</td>
<td class="btn" id="nl">nl</td>
</tr>
</table>
</div>
<div id="one"></div><hr>
<div id="two"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
let screen = document.getElementById("screen").innerText;
let operatorNum = ['#'];
$(function () {
$(".number").click(function () {
var char = $(this).attr("id");
if(char === '.' ){
if(screen.length == 0){
alert("错误");
return;
}
if(isNaN(screen[screen.length - 1])){
alert("错误");
return;
}
}
screen += char;
document.getElementById("screen").innerText = screen;
});
$(".operator").click(function () {
var operator = $(this).attr("id");
if(screen.length == 0 && !(operator === '-')){
alert("错误");
return;
}
if(screen[screen.length - 1] === '.'){
alert("错误");
} else {
if(screen.length != 0) {
operatorNum[operatorNum.length] = operator;
screen = screen.concat(" ", operator);
document.getElementById("screen").innerText = screen;
} else {
screen = screen.concat("", operator);
document.getElementById("screen").innerText = screen;
}
}
});
$("#equal").click(function () {
let chars = screen.split(' ');
if(chars.length < 2){
alert("错误");
return;
}
if(!valid(operatorNum)){
alert("不能进行加减与乘除的混合运算!");
screen = "";
document.getElementById("screen").innerText = screen;
document.getElementById("result").innerText = "";
return;
}
let firstNum = isNaN(chars[0][0]) ? parseFloat(chars[0])
: -1 * parseFloat(chars[0].substr(1, chars[0].length));
let secondNum, operator, result;
for(let i = 1; i < chars.length; i++){
operator = chars[i][0];
secondNum = parseFloat(chars[i].substr(1, chars[i].length));
if(secondNum == '0' && operator === '/'){
alert("错误");
return;
}
switch (operator) {
case '+': result = firstNum = firstNum + secondNum;break;
case '-': result = firstNum = firstNum - secondNum;break;
case '*': result = firstNum = firstNum * secondNum;break;
case '/': result = firstNum = firstNum / secondNum;break;
}
}
screen = "";
document.getElementById("screen").innerText = "";
document.getElementById("result").innerText = result;
});
$("#clear").click(function () {
screen = "";
document.getElementById("screen").innerText = screen;
document.getElementById("result").innerText = "";
});
$("#backspace").click(function () {
screen = screen.substr(0, screen.length - 1);
document.getElementById("screen").innerText = screen;
});
$("#date").click(function () {
document.getElementById("result").innerText = new Date().toLocaleString();
document.getElementById("result").style.cssText = "font-size: 0.75em;"
});
$("#squre").click(function () {
let num = document.getElementById("screen").innerText;
if(num.indexOf(' ') > 0 || num[num.length - 1] === '.' ){
alert("错误");
} else {
document.getElementById("result").innerText = parseFloat(num) * parseFloat(num);
}
screen = "";
document.getElementById("screen").innerText = screen;
});
$("#sqrt").click(function () {
let num = document.getElementById("screen").innerText;
if(num.indexOf(' ') > 0 || num[num.length - 1] === '.' || parseFloat(num) < 0 ){
alert("错误");
} else {
document.getElementById("result").innerText = Math.sqrt(parseFloat(num));
}
screen = "";
document.getElementById("screen").innerText = screen;
});
});
function valid(array) {
let one = array[1];
for(let i = 2; i < array.length; i++){
if(one === '+' || one === '-') {
if (array[i] === '*' || array[i] === '/')
return false;
} else {
if(array[i] === '+' || array[i] === '-')
return false;
}
}
return true;
}
</script>
</body>
</html>