| 大家好，我是工藤学编程 🦉 | 一个正在努力学习的小博主，期待你的关注 |
|---|---|
| 作业侠系列最新文章😉 | JavaScript实现仿windows计算器 |
| SpringBoot实战系列🐷 | 【SpringBoot实战系列】AOP+自定义注解-接口防重提交多场景设计实战 |
| 环境搭建大集合 | 环境搭建大集合(持续更新） |
往期源码回顾:
【Java】实现绘图板(完整版)
【C++】图书管理系统(完整板)
【Java】实现计算器(完整版)
【Python】实现爬虫，爬取天气情况并进行分析(完整版）
【Java】实现记事本(完整版)
【Java】实现多线程计算阶乘和(完整版)
【Java】实现聊天程序(完整版)
上述源码我的大家有需要可自取，大家不想cv或者cv了跑不起来都可以来找我要源码。
本项目速览：
1.项目简介
2.效果图
3.项目功能模块划分
4.函数流程图
5.设计与实现
6.js与html源码
1.项目简介:
计算器是一个常用的工具，非常适用。也是程序设计中常见的编程题。本项目实现了一款由标准模式，科学模式，程序员模式所组成的计算器。本计算器不仅能够实现连续的输入并进行正确的运算，还设计了计算过程中的历史记录，进制转换(2，8，10，16进制间的相互转换)，科学计算等功能，能适应不同屏幕并有良好的响应式设计。
2.部分效果图:
3.功能模块划分:
4.部分函数流程图:
5.设计与实现
具体代码如下:
标准模式html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>标准-计算器</title>
<link rel="stylesheet" href="css/common/common.css" />
<link rel="stylesheet" href="css/calculate.css" />
<link rel="stylesheet" href="./components//List/index.css" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
</meta>
</head>
<body>
<div class="menu" id="change">
<svg t="1656246646180" style="margin-right: 10px" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="1276" width="24" height="24">
<path
d="M133.310936 296.552327l757.206115 0c19.781623 0 35.950949-16.169326 35.950949-35.950949 0-19.781623-15.997312-35.950949-35.950949-35.950949L133.310936 224.650428c-19.781623 0-35.950949 16.169326-35.950949 35.950949C97.359987 280.383 113.529313 296.552327 133.310936 296.552327z"
p-id="1277"></path>
<path
d="M890.51705 476.135058 133.310936 476.135058c-19.781623 0-35.950949 16.169326-35.950949 35.950949 0 19.781623 16.169326 35.950949 35.950949 35.950949l757.206115 0c19.781623 0 35.950949-16.169326 35.950949-35.950949C926.467999 492.304384 910.298673 476.135058 890.51705 476.135058z"
p-id="1278"></path>
<path
d="M890.51705 727.447673 133.310936 727.447673c-19.781623 0-35.950949 15.997312-35.950949 35.950949s16.169326 35.950949 35.950949 35.950949l757.206115 0c19.781623 0 35.950949-15.997312 35.950949-35.950949S910.298673 727.447673 890.51705 727.447673z"
p-id="1279"></path>
</svg>
<span>标准</span>
</div>
<div class="history-button">
<svg t="1656425516728" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="2222" width="24" height="24">
<path
d="M516.266667 554.666667L512 341.333333h42.666667v192l136.533333 136.533334-29.866667 29.866666-145.066666-145.066666z m-371.2-128l34.133333 34.133333C213.333333 294.4 358.4 170.666667 533.333333 170.666667c200.533333 0 362.666667 162.133333 362.666667 362.666666S733.866667 896 533.333333 896c-187.733333 0-341.333333-140.8-358.4-324.266667l55.466667 55.466667c38.4 132.266667 162.133333 226.133333 307.2 226.133333 174.933333 0 320-145.066667 320-320S708.266667 213.333333 533.333333 213.333333 213.333333 358.4 213.333333 533.333333v21.333334l-42.666666-42.666667-85.333334-85.333333h59.733334z"
fill="#444444" p-id="2223"></path>
</svg>
</div>
<div class="main-container">
<table>
<thead>
<th colspan="4">
<input type="text" id="result" disabled>
</th>
</thead>
<tbody>
<tr>
<td><button class="operate" onclick="showNumber(this)">%</button></td>
<td><button class="operate" id="clearError" onclick="clearResult()">CE</button></td>
<td><button class="operate" onclick="clearOneResult()">←</button></td>
<td><button class="operate" onclick="showNumber(this)">÷</button></td>
</tr>
<tr>
<td><button class="calculate" onclick="showNumber(this)">7</button></td>
<td><button class="calculate" onclick="showNumber(this)">8</button></td>
<td><button class="calculate" onclick="showNumber(this)">9</button></td>
<td><button class="operate" onclick="showNumber(this)">x</button></td>
</tr>
<tr>
<td><button class="calculate" onclick="showNumber(this)">4</button></td>
<td><button class="calculate" onclick="showNumber(this)">5</button></td>
<td><button class="calculate" onclick="showNumber(this)">6</button></td>
<td><button class="operate" onclick="showNumber(this)">-</button></td>
</tr>
<tr>
<td><button class="calculate" onclick="showNumber(this)">1</button></td>
<td><button class="calculate" onclick="showNumber(this)">2</button></td>
<td><button class="calculate" onclick="showNumber(this)">3</button></td>
<td><button class="operate" onclick="showNumber(this)">+</button></td>
</tr>
<tr>
<td><button class="calculate" onclick="getPow()">x²</button></td>
<td><button class="calculate" onclick="showNumber(this)">0</button></td>
<td><button class="calculate" onclick="showNumber(this)">.</button></td>
<td><button class="operate" id="equal" onclick="showAnswer()">=</button></td>
</tr>
</tbody>
</table>
<div class="prompt-box close">
<div class="shadow-box"></div>
<div class="result-history">
<div class="history-title">历史记录</div>
</div>
</div>
</div>
<script src="./components/List/index.js"></script>
<script src="js/calculate.js"></script>
</body>
</html>
标准模式JS
var result = new Array();
const ops = "+-x÷%";
const errorExpre = "表达式错误"
const overMax = "溢出";
function arrToStr(arr) {
let strResult = "";
for (let i = 0; i < arr.length; i++) {
strResult += arr[i];
}
return strResult;
}
function showResult() {
document.getElementById("result").value = arrToStr(result);
}
function showNumber(id) {
let val = id.innerHTML;
if (result.length < 15) {
result.push(val);
}
showResult();
}
function disabledButtons() {
document.querySelectorAll("button").forEach(button => {
button.disabled = true;
button.classList.add("button-disabled");
clearError.classList.remove("button-disabled");
clearError.disabled = "";
});
}
function showAnswer() {
let answer = "";
let str = arrToStr(result);
let midExpre = strToExpress(str);
let suffixExpre = midToSuffix(midExpre);
answer = suffixValue(suffixExpre);
if (isNaN(answer, 10)) {
result.splice(0, result.length);
answer = errorExpre;
disabledButtons();
} else if (answer === Number.POSITIVE_INFINITY) {
result.splice(0, result.length);
answer = overMax;
disabledButtons();
} else {
clearResult();
result.push(answer);
fillResultHistory(str + "=", answer);
}
document.getElementById("result").value = answer;
}
function clearResult() {
result = [];
showResult();
document.querySelectorAll("button").forEach(button => {
if ((button.disabled = "true")) {
button.disabled = "";
button.classList.remove("button-disabled");
}
});
}
function clearOneResult() {
result.pop();
showResult();
}
function strToExpress(str) {
let textArr = str.split("");
let newTextArr = [];
let calTextArr = [];
for (let i = 0; i < str.length; i++) {
if (
(i == 0 && str[i] == "-") ||
(str[i] == "-" && ops.indexOf(str[i - 1]) != -1)
) {
newTextArr.push(textArr[i]);
} else if (ops.indexOf(str[i]) != -1) {
newTextArr.push("|", str[i], "|");
} else {
newTextArr.push(textArr[i]);
}
}
calTextArr = newTextArr.join("").split("|");
return calTextArr;
}
function midToSuffix(midExpre) {
let opStack = [];
let suffixExpre = [];
for (let i = 0; i < midExpre.length; i++) {
if (ops.indexOf(midExpre[i]) != -1) {
if (
opStack.length == 0 ||
Priority(midExpre[i]) > Priority(opStack[opStack.length - 1])
) {
opStack.push(midExpre[i]);
} else {
do {
suffixExpre.push(opStack.pop());
} while (
opStack.length > 0 &&
Priority(midExpre[i]) <= Priority(opStack[opStack.length - 1])
);
opStack.push(midExpre[i]);
}
} else {
suffixExpre.push(midExpre[i]);
}
}
while (opStack.length > 0) {
suffixExpre.push(opStack.pop());
}
return suffixExpre;
}
function Priority(op) {
let opPri = 0;
switch (op) {
case "+":
opPri = 1;
break;
case "-":
opPri = 1;
break;
case "x":
opPri = 2;
break;
case "÷":
opPri = 2;
break;
case "%":
opPri = 2;
break;
}
return opPri;
}
function suffixValue(suffixExpre) {
let calStack = [];
console.log(suffixExpre);
for (let i = 0; i < suffixExpre.length; i++) {
if (ops.indexOf(suffixExpre[i]) != -1) {
let opRight = Number(calStack.pop());
if (calStack.length == 0) return errorExpre;
let opLeft = Number(calStack.pop());
let tmpResult = 0;
switch (suffixExpre[i]) {
case "+":
tmpResult = highPrecisionAdd(opLeft, opRight);
break;
case "-":
tmpResult = highPrecisionSubtr(opLeft, opRight);
break;
case "x":
tmpResult = highPrecisionMul(opLeft, opRight);
break;
case "÷":
tmpResult = highPrecisionDiv(opLeft, opRight);
break;
case "%":
tmpResult = opLeft % opRight;
}
calStack.push(tmpResult);
} else {
calStack.push(suffixExpre[i]);
}
console.log(calStack);
}
return calStack.pop();
}
function getPow() {
let temp = result.join("");
if (isNaN(Number(temp, 10))) {
result = [];
result.push(errorExpre);
showResult();
} else {
result = [];
temp = Number(temp);
result[0] = highPrecisionMul(temp, temp);
showResult();
fillResultHistory(temp + "x" + temp + "=", result[0]);
}
}
function fillResultHistory(processStr, resultStr) {
const precessDiv = document.createElement("div");
const resultDiv = document.createElement("div");
const calculateItem = document.createElement("div");
const resultHistory = document.querySelector(".result-history");
calculateItem.className = "calculate-item";
precessDiv.className = "process";
resultDiv.className = "result";
precessDiv.innerText = processStr;
resultDiv.innerText = resultStr;
calculateItem.appendChild(precessDiv);
calculateItem.appendChild(resultDiv);
resultHistory.insertBefore(calculateItem, resultHistory.children[1]);
}
function showNumber(id) {
let val = id.innerHTML;
if (result.length < 15) {
if (result[result.length - 1] == "." && val == ".") return;
result.push(val);
}
showResult();
}
function highPrecisionAdd(arg1, arg2) {
let r1, r2, m;
try {
r1 = arg1.toString().split(".")[1].length
} catch (e) {
r1 = 0
}
try {
r2 = arg2.toString().split(".")[1].length
} catch (e) {
r2 = 0
}
m = Math.pow(10, Math.max(r1, r2))
return (arg1 * m + arg2 * m) / m
}
function highPrecisionDiv(arg1, arg2) {
let t1 = 0,
t2 = 0,
r1, r2;
try {
t1 = arg1.toString().split(".")[1].length
} catch (e) {}
try {
t2 = arg2.toString().split(".")[1].length
} catch (e) {}
r1 = Number(arg1.toString().replace(".", ""))
r2 = Number(arg2.toString().replace(".", ""))
return (r1 / r2) * Math.pow(10, t2 - t1);
}
function highPrecisionMul(arg1, arg2) {
let m = 0,
s1 = arg1.toString(),
s2 = arg2.toString();
try {
m += s1.split(".")[1].length
} catch (e) {}
try {
m += s2.split(".")[1].length
} catch (e) {}
return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m)
}
function highPrecisionSubtr(arg1, arg2) {
let r1, r2, m, n;
try {
r1 = arg1.toString().split(".")[1].length
} catch (e) {
r1 = 0
}
try {
r2 = arg2.toString().split(".")[1].length
} catch (e) {
r2 = 0
}
m = Math.pow(10, Math.max(r1, r2));
n = (r1 >= r2) ? r1 : r2;
return ((arg1 * m - arg2 * m) / m).toFixed(n);
}
科学模式HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>科学-计算器</title>
<link rel="stylesheet" href="css/common/common.css" />
<link rel="stylesheet" href="css/science.css" />
<link rel="stylesheet" href="components/List/index.css" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
</meta>
</head>
<body>
<div class="menu" id="change">
<svg t="1656246646180" style="margin-right: 10px" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="1276" width="24" height="24">
<path
d="M133.310936 296.552327l757.206115 0c19.781623 0 35.950949-16.169326 35.950949-35.950949 0-19.781623-15.997312-35.950949-35.950949-35.950949L133.310936 224.650428c-19.781623 0-35.950949 16.169326-35.950949 35.950949C97.359987 280.383 113.529313 296.552327 133.310936 296.552327z"
p-id="1277"></path>
<path
d="M890.51705 476.135058 133.310936 476.135058c-19.781623 0-35.950949 16.169326-35.950949 35.950949 0 19.781623 16.169326 35.950949 35.950949 35.950949l757.206115 0c19.781623 0 35.950949-16.169326 35.950949-35.950949C926.467999 492.304384 910.298673 476.135058 890.51705 476.135058z"
p-id="1278"></path>
<path
d="M890.51705 727.447673 133.310936 727.447673c-19.781623 0-35.950949 15.997312-35.950949 35.950949s16.169326 35.950949 35.950949 35.950949l757.206115 0c19.781623 0 35.950949-15.997312 35.950949-35.950949S910.298673 727.447673 890.51705 727.447673z"
p-id="1279"></path>
</svg>
<span>科学</span>
</div>
<div class="history-button">
<svg t="1656425516728" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="2222" width="24" height="24">
<path
d="M516.266667 554.666667L512 341.333333h42.666667v192l136.533333 136.533334-29.866667 29.866666-145.066666-145.066666z m-371.2-128l34.133333 34.133333C213.333333 294.4 358.4 170.666667 533.333333 170.666667c200.533333 0 362.666667 162.133333 362.666667 362.666666S733.866667 896 533.333333 896c-187.733333 0-341.333333-140.8-358.4-324.266667l55.466667 55.466667c38.4 132.266667 162.133333 226.133333 307.2 226.133333 174.933333 0 320-145.066667 320-320S708.266667 213.333333 533.333333 213.333333 213.333333 358.4 213.333333 533.333333v21.333334l-42.666666-42.666667-85.333334-85.333333h59.733334z"
fill="#444444" p-id="2223"></path>
</svg>
</div>
<div class="main-container">
<table>
<thead>
<th colspan="5">
<input type="text" id="result" disabled>
</th>
</thead>
<tbody>
<tr>
<td><button class="operate" onclick="math(this)">∏</button></td>
<td><button class="operate" onclick="math(this)">e</button></td>
<td><button class="operate" onclick="clearOneResult()">←</button></td>
<td><button id="clearError" class="operate" onclick="clearResult()">CE</button></td>
<td><button class="operate" onclick="showBigNumber(this)">%</button></td>
</tr>
<tr>
<td><button class="operate" onclick="math(this)">|x|</button></td>
<td><button class="operate" onclick="math(this)">sin</button></td>
<td><button class="operate" onclick="math(this)">cos</button></td>
<td><button class="operate" onclick="math(this)">tan</button></td>
<td><button class="operate" onclick="showBigNumber(this)">÷</button></td>
</tr>
<tr>
<td><button class="operate" onclick="showBigNumber(this)">n!</button></td>
<td><button class="calculate" onclick="showBigNumber(this)">7</button></td>
<td><button class="calculate" onclick="showBigNumber(this)">8</button></td>
<td><button class="calculate" onclick="showBigNumber(this)">9</button></td>
<td><button class="operate" onclick="showBigNumber(this)">x</button></td>
</tr>
<tr>
<td><button class="operate" onclick="showBigNumber(this)">x^y</button></td>
<td><button class="calculate" onclick="showBigNumber(this)">4</button></td>
<td><button class="calculate" onclick="showBigNumber(this)">5</button></td>
<td><button class="calculate" onclick="showBigNumber(this)">6</button></td>
<td><button class="operate" onclick="showBigNumber(this)">-</button></td>
</tr>
<tr>
<td><button class="operate" onclick="math(this)">log</button></td>
<td><button class="calculate" onclick="showBigNumber(this)">1</button></td>
<td><button class="calculate" onclick="showBigNumber(this)">2</button></td>
<td><button class="calculate" onclick="showBigNumber(this)">3</button></td>
<td><button class="operate" onclick="showBigNumber(this)">+</button></td>
</tr>
<tr>
<td><button class="operate" onclick="math(this)">ln</button></td>
<td><button class="calculate" onclick="showBigNumber(this)">0</button></td>
<td><button class="calculate" onclick="showBigNumber(this)">.</button></td>
<td><button class="operate" onclick="math(this)">1/x</button></td>
<td><button class="operate" id="equal" onclick="showAnswer()">=</button></td>
</tr>
</tbody>
</table>
<div class="prompt-box close">
<div class="shadow-box"></div>
<div class="result-history">
<div class="history-title">历史记录</div>
</div>
</div>
</div>
<script src="components/List/index.js"></script>
<script src="js/science.js"></script>
</body>
</html>
科学模式JS
var result = new Array();
const ops = ["+", "-", "x", "÷", "%", "^"];
const oneOps = ["!"];
const errorExpre = "表达式错误";
const overMax = "溢出";
function arrToStr(arr) {
let strResult = "";
for (let i = 0; i < arr.length; i++) {
strResult += arr[i];
}
return strResult;
}
function showResult() {
document.getElementById("result").value = arrToStr(result);
}
function disabledButtons() {
document.querySelectorAll("button").forEach(button => {
button.disabled = true;
button.classList.add("button-disabled");
clearError.classList.remove("button-disabled");
clearError.disabled = "";
});
}
function showAnswer() {
let answer = "";
let str = arrToStr(result);
let midExpre = strToExpress(str);
let suffixExpre = midToSuffix(midExpre);
answer = suffixValue(suffixExpre);
if (isNaN(answer, 10)) {
result.splice(0, result.length);
answer = errorExpre;
disabledButtons();
} else if (answer === Number.POSITIVE_INFINITY) {
result.splice(0, result.length);
answer = overMax;
disabledButtons();
} else {
clearResult();
result.push(answer);
fillResultHistory(str + "=", answer);
}
document.getElementById("result").value = answer;
}
function clearResult() {
result = [];
showResult();
document.querySelectorAll("button").forEach(button => {
if ((button.disabled = "true")) {
button.disabled = "";
button.classList.remove("button-disabled");
}
});
}
function clearOneResult() {
result.pop();
showResult();
}
function strToExpress(str) {
let textArr = str.split("");
let newTextArr = [];
let calTextArr = [];
for (let i = 0; i < str.length; i++) {
if (
(i == 0 && str[i] == "-") ||
(str[i] == "-" && ops.indexOf(str[i - 1]) != -1)
) {
newTextArr.push(textArr[i]);
} else if (ops.indexOf(str[i]) != -1 || oneOps.indexOf(str[i]) != -1) {
newTextArr.push("|", str[i], "|");
} else {
newTextArr.push(textArr[i]);
}
console.log(newTextArr);
}
calTextArr = newTextArr.join("").split("|");
return calTextArr;
}
function midToSuffix(midExpre) {
let opStack = [];
let suffixExpre = [];
for (let i = 0; i < midExpre.length; i++) {
if (ops.indexOf(midExpre[i]) != -1) {
if (
opStack.length == 0 ||
Priority(midExpre[i]) > Priority(opStack[opStack.length - 1])
) {
opStack.push(midExpre[i]);
} else {
do {
suffixExpre.push(opStack.pop());
} while (
opStack.length > 0 &&
Priority(midExpre[i]) <= Priority(opStack[opStack.length - 1])
);
opStack.push(midExpre[i]);
}
} else {
suffixExpre.push(midExpre[i]);
}
}
while (opStack.length > 0) {
let temp = opStack.pop();
if (temp != "") {
suffixExpre.push(temp);
}
}
return suffixExpre;
}
function Priority(op) {
let opPri = 0;
switch (op) {
case "+":
opPri = 1;
break;
case "-":
opPri = 1;
break;
case "x":
opPri = 2;
break;
case "÷":
opPri = 2;
break;
case "%":
opPri = 2;
break;
case "^":
opPri = 3;
break;
}
return opPri;
}
function suffixValue(suffixExpre) {
let calStack = [];
let tmpResult = 0;
console.log(suffixExpre);
for (let i = 0; i < suffixExpre.length; i++) {
if (ops.indexOf(suffixExpre[i]) != -1) {
let opRight = Number(calStack.pop());
let opLeft = Number(calStack.pop());
switch (suffixExpre[i]) {
case "+":
tmpResult = highPrecisionAdd(opLeft, opRight);
break;
case "-":
tmpResult = highPrecisionSubtr(opLeft, opRight);
break;
case "x":
tmpResult = highPrecisionMul(opLeft, opRight);
break;
case "÷":
tmpResult = highPrecisionDiv(opLeft, opRight);
break;
case "%":
tmpResult = opLeft % opRight;
break;
case "^":
tmpResult = Math.pow(opLeft, opRight);
break;
}
calStack.push(tmpResult);
} else if (oneOps.indexOf(suffixExpre[i]) != -1) {
let n = Number(calStack.pop());
switch (suffixExpre[i]) {
case "!":
tmpResult = getFactorial(n);
break;
}
calStack.push(tmpResult);
} else if (suffixExpre[i] != "") {
calStack.push(suffixExpre[i]);
}
}
return calStack.pop();
}
function fillResultHistory(processStr, resultStr) {
const precessDiv = document.createElement("div");
const resultDiv = document.createElement("div");
const calculateItem = document.createElement("div");
const resultHistory = document.querySelector(".result-history");
calculateItem.className = "calculate-item";
precessDiv.className = "process";
resultDiv.className = "result";
precessDiv.innerText = processStr;
resultDiv.innerText = resultStr;
calculateItem.appendChild(precessDiv);
calculateItem.appendChild(resultDiv);
resultHistory.insertBefore(calculateItem, resultHistory.children[1]);
}
function showBigNumber(id) {
let val = id.innerHTML;
if (result.length < 32) {
if (result[result.length - 1] == "." && val == ".") return;
if (val === "x^y") {
result.push("^");
} else if (val === "n!") {
result.push("!");
} else {
result.push(val);
}
}
showResult();
}
function getFactorial(n) {
let res = 1;
for (let i = 1; i <= Math.abs(n); i++) {
res *= i;
}
return n >= 1 ? res : 0 - res;
}
function isAllNum() {
let temp = result.join("");
if (isNaN(Number(temp, 10)) || result.length === 0) {
return false;
}
return true;
}
function isErrorExper() {
result = [];
result.push(errorExpre);
showResult();
disabledButtons();
}
function math(id) {
let val = id.innerHTML;
let temp = result.join("");
if (val === "∏") {
result.push(Math.PI);
} else if (val === "e") {
result.push(Math.E);
} else if (val === "|x|") {
if (isAllNum()) {
clearResult();
result.push(Math.abs(Number(temp)));
fillResultHistory("abs(" + temp + ")=", result[0]);
} else {
isErrorExper();
}
} else if (val === "log") {
if (isAllNum()) {
clearResult();
result.push(Math.log10(Number(temp)));
fillResultHistory("log(" + temp + ")=", result[0]);
} else {
isErrorExper();
}
} else if (val === "ln") {
if (isAllNum()) {
clearResult();
result.push(Math.log(Number(temp)));
fillResultHistory("ln(" + temp + ")=", result[0]);
} else {
isErrorExper();
}
} else if (val === "sin") {
if (isAllNum()) {
clearResult();
let res = (Math.sin(Number(temp)))
if (Math.abs(res) < 1e-15) {
res = 0;
}
result.push(res);
fillResultHistory("sin(" + temp + ")=", result[0]);
} else {
isErrorExper();
}
} else if (val === "cos") {
if (isAllNum()) {
clearResult();
let res = Math.cos(Number(temp))
if (Math.abs(res) < 1e-16) {
res = 0;
}
result.push(res);
fillResultHistory("cos(" + temp + ")=", result[0]);
} else {
isErrorExper();
}
} else if (val === "tan") {
if (isAllNum()) {
clearResult();
let res = (Math.tan(Number(temp)))
if (Math.abs(res) < 1e-15) {
res = 0;
} else if (res >= 1 - 0.9) {
res = 1;
}
result.push(res);
fillResultHistory("tan(" + temp + ")=", result[0]);
} else {
isErrorExper();
}
} else if (val === "1/x") {
if (isAllNum() && temp != "0") {
clearResult();
result.push(highPrecisionDiv(1, Number(temp)));
fillResultHistory("1/" + temp + "=", result[0]);
} else {
isErrorExper();
}
} else {
isErrorExper();
}
showResult();
}
function highPrecisionAdd(arg1, arg2) {
let r1, r2, m;
try {
r1 = arg1.toString().split(".")[1].length;
} catch (e) {
r1 = 0;
}
try {
r2 = arg2.toString().split(".")[1].length;
} catch (e) {
r2 = 0;
}
m = Math.pow(10, Math.max(r1, r2));
return (arg1 * m + arg2 * m) / m;
}
function highPrecisionDiv(arg1, arg2) {
let t1 = 0,
t2 = 0,
r1,
r2;
try {
t1 = arg1.toString().split(".")[1].length;
} catch (e) {}
try {
t2 = arg2.toString().split(".")[1].length;
} catch (e) {}
r1 = Number(arg1.toString().replace(".", ""));
r2 = Number(arg2.toString().replace(".", ""));
return (r1 / r2) * Math.pow(10, t2 - t1);
}
function highPrecisionMul(arg1, arg2) {
let m = 0,
s1 = arg1.toString(),
s2 = arg2.toString();
try {
m += s1.split(".")[1].length;
} catch (e) {}
try {
m += s2.split(".")[1].length;
} catch (e) {}
return (
(Number(s1.replace(".", "")) * Number(s2.replace(".", ""))) /
Math.pow(10, m)
);
}
function highPrecisionSubtr(arg1, arg2) {
let r1, r2, m, n;
try {
r1 = arg1.toString().split(".")[1].length;
} catch (e) {
r1 = 0;
}
try {
r2 = arg2.toString().split(".")[1].length;
} catch (e) {
r2 = 0;
}
m = Math.pow(10, Math.max(r1, r2));
n = r1 >= r2 ? r1 : r2;
return ((arg1 * m - arg2 * m) / m).toFixed(n);
}
程序员模式HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>程序员-计算器</title>
<link rel="stylesheet" href="css/common/common.css" />
<link rel="stylesheet" href="css/programmer.css" />
<link rel="stylesheet" href="components/List/index.css" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
</meta>
</head>
<body>
<div class="menu" id="change">
<svg t="1656246646180" style="margin-right: 10px" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="1276" width="24" height="24">
<path
d="M133.310936 296.552327l757.206115 0c19.781623 0 35.950949-16.169326 35.950949-35.950949 0-19.781623-15.997312-35.950949-35.950949-35.950949L133.310936 224.650428c-19.781623 0-35.950949 16.169326-35.950949 35.950949C97.359987 280.383 113.529313 296.552327 133.310936 296.552327z"
p-id="1277"></path>
<path
d="M890.51705 476.135058 133.310936 476.135058c-19.781623 0-35.950949 16.169326-35.950949 35.950949 0 19.781623 16.169326 35.950949 35.950949 35.950949l757.206115 0c19.781623 0 35.950949-16.169326 35.950949-35.950949C926.467999 492.304384 910.298673 476.135058 890.51705 476.135058z"
p-id="1278"></path>
<path
d="M890.51705 727.447673 133.310936 727.447673c-19.781623 0-35.950949 15.997312-35.950949 35.950949s16.169326 35.950949 35.950949 35.950949l757.206115 0c19.781623 0 35.950949-15.997312 35.950949-35.950949S910.298673 727.447673 890.51705 727.447673z"
p-id="1279"></path>
</svg>
<span>程序员</span>
</div>
<div class="history-button">
<svg t="1656425516728" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="2222" width="24" height="24">
<path
d="M516.266667 554.666667L512 341.333333h42.666667v192l136.533333 136.533334-29.866667 29.866666-145.066666-145.066666z m-371.2-128l34.133333 34.133333C213.333333 294.4 358.4 170.666667 533.333333 170.666667c200.533333 0 362.666667 162.133333 362.666667 362.666666S733.866667 896 533.333333 896c-187.733333 0-341.333333-140.8-358.4-324.266667l55.466667 55.466667c38.4 132.266667 162.133333 226.133333 307.2 226.133333 174.933333 0 320-145.066667 320-320S708.266667 213.333333 533.333333 213.333333 213.333333 358.4 213.333333 533.333333v21.333334l-42.666666-42.666667-85.333334-85.333333h59.733334z"
fill="#444444" p-id="2223"></path>
</svg>
</div>
<div class="main-container">
<table>
<thead>
<th colspan="5">
<input type="text" id="result" disabled>
</th>
</thead>
<tbody>
<tr>
<td class="system" colspan="5">
<span class="system-item"> HEX</span>
<span class="ml-2" id="HEX_value">0</span>
</td>
</tr>
<tr>
<td class="system" colspan="5">
<span class="bl-blue system-item"> DEC</span>
<span class="ml-2" id="DEC_value">0</span>
</td>
</tr>
<tr>
<td class="system" colspan="5">
<span class="system-item"> OCT</span>
<span class="ml-2" id="OCT_value">0</span>
</td>
</tr>
<tr>
<td class="system" colspan="5">
<span class="system-item"> BIN</span>
<span class="ml-2" id="BIN_value">0</span>
</td>
</tr>
<tr>
<td><button class="operate hex button-disabled" onclick="showMidNumber(this)" disabled>A</button></td>
<td><button class="operate" onclick="showMidNumber(this)"><<</button></td>
<td><button class="operate" onclick="showMidNumber(this)">>></button></td>
<td><button id="clearError" class="operate" onclick="clearResult()">CE</button></td>
<td><button class="operate" onclick="clearOneResult()">←</button></td>
</tr>
<tr>
<td><button class="operate hex button-disabled" onclick="showMidNumber(this)" disabled>B</button></td>
<td><button class="operate" onclick="showMidNumber(this)">(</button></td>
<td><button class="operate" onclick="showMidNumber(this)">)</button></td>
<td><button class="operate" onclick="showMidNumber(this)">%</button></td>
<td><button class="operate" onclick="showMidNumber(this)">÷</button></td>
</tr>
<tr>
<td><button class="operate hex button-disabled" onclick="showMidNumber(this)" disabled>C</button></td>
<td><button class="calculate oct" onclick="showMidNumber(this)">7</button></td>
<td><button class="calculate dec" onclick="showMidNumber(this)">8</button></td>
<td><button class="calculate dec" onclick="showMidNumber(this)">9</button></td>
<td><button class="operate" onclick="showMidNumber(this)">x</button></td>
</tr>
<tr>
<td><button class="operate hex button-disabled" onclick="showMidNumber(this)" disabled>D</button></td>
<td><button class="calculate oct" onclick="showMidNumber(this)">4</button></td>
<td><button class="calculate oct" onclick="showMidNumber(this)">5</button></td>
<td><button class="calculate oct" onclick="showMidNumber(this)">6</button></td>
<td><button class="operate" onclick="showMidNumber(this)">-</button></td>
</tr>
<tr>
<td><button class="operate hex button-disabled" onclick="showMidNumber(this)" disabled>E</button></td>
<td><button class="calculate" onclick="showMidNumber(this)">1</button></td>
<td><button class="calculate oct" onclick="showMidNumber(this)">2</button></td>
<td><button class="calculate oct" onclick="showMidNumber(this)">3</button></td>
<td><button class="operate" onclick="showMidNumber(this)">+</button></td>
</tr>
<tr>
<td><button class="operate hex button-disabled" onclick="showMidNumber(this)" disabled>F</button></td>
<td><button class="calculate" onclick="showMidNumber(this)">0</button></td>
<td><button class="calculate" onclick="showMidNumber(this)">And</button></td>
<td><button class="operate" onclick="showMidNumber(this)">Or</button></td>
<td><button class="operate" id="equal" onclick="showAnswer()">=</button></td>
</tr>
</tbody>
</table>
<div class="prompt-box close">
<div class="shadow-box"></div>
<div class="result-history">
<div class="history-title">历史记录</div>
</div>
</div>
</div>
<script src="components/List/index.js"></script>
<script src="js/programmer.js"></script>
</body>
</html>
程序员模式JS
var result = new Array();
const ops = ["+", "-", "x", "÷", "%", ">>", "<<", "&", "|", ")", "("];
const errorExpre = "表达式错误";
const overMax = "溢出";
const SystemEnum = {
hex: "0x",
dec: "0",
oct: "0o",
bin: "0b"
}
let currentSystem = SystemEnum.dec;
const hexButtons = document.querySelectorAll(".hex");
const decButtons = document.querySelectorAll(".dec");
const octButtons = document.querySelectorAll(".oct");
const systems = document.querySelectorAll(".system");
const systemItems = document.querySelectorAll(".system-item");
const systemChange = {
init: () => {
[...hexButtons, ...decButtons, ...octButtons].forEach(button => {
if ((button.disabled = "true")) {
button.disabled = "";
button.classList.remove("button-disabled");
}
});
},
[SystemEnum['hex']]: () => {
[...hexButtons, ...decButtons, ...octButtons].forEach(button => {
if ((button.disabled = "true")) {
button.disabled = "";
button.classList.remove("button-disabled");
}
});
},
[SystemEnum['dec']]: () => {
[...hexButtons].forEach(button => {
button.classList.add("button-disabled");
button.disabled = true;
});
},
[SystemEnum['oct']]: () => {
[...hexButtons, ...decButtons].forEach(button => {
button.classList.add("button-disabled");
button.disabled = true;
});
},
[SystemEnum['bin']]: () => {
[...hexButtons, ...decButtons, ...octButtons].forEach(button => {
button.classList.add("button-disabled");
button.disabled = true;
});
}
}
systems.forEach((system, index) => {
system.addEventListener("click", e => {
[...systemItems].forEach(item => {
if (item.classList.contains("bl-blue")) {
item.classList.remove("bl-blue");
}
});
systemItems[index].classList.add("bl-blue");
systemChange.init();
if (index === 0) {
currentSystem = SystemEnum.hex;
} else if (index === 1) {
currentSystem = SystemEnum.dec;
if (systemChange[SystemEnum.dec] !== undefined) {
systemChange[SystemEnum.dec]();
}
} else if (index === 2) {
currentSystem = SystemEnum.oct;
if (systemChange[SystemEnum.oct] !== undefined) {
systemChange[SystemEnum.oct]();
}
} else if (index === 3) {
currentSystem = SystemEnum.bin;
if (systemChange[SystemEnum.bin] !== undefined) {
systemChange[SystemEnum.bin]();
}
}
});
});
function arrToStr(arr) {
let strResult = "";
for (let i = 0; i < arr.length; i++) {
strResult += arr[i];
}
return strResult;
}
function showResult() {
document.getElementById("result").value = arrToStr(result);
}
function disabledButtons() {
document.querySelectorAll("button").forEach(button => {
button.disabled = true;
button.classList.add("button-disabled");
clearError.classList.remove("button-disabled");
clearError.disabled = "";
});
}
function showAnswer() {
let answer = "";
let str = arrToStr(result);
let midExpre = strToExpress(str);
let suffixExpre = midToSuffix(midExpre);
answer = suffixValue(suffixExpre);
if (isNaN(answer, 10)) {
result.splice(0, result.length);
answer = errorExpre;
disabledButtons();
} else if (answer === Number.POSITIVE_INFINITY) {
result.splice(0, result.length);
answer = overMax;
disabledButtons();
} else {
result = [];
if (currentSystem == "0x") {
answer = parseInt(answer).toString(16).toUpperCase();
} else if (currentSystem == "0o") {
answer = parseInt(answer).toString(8);
} else if (currentSystem == "0b") {
answer = parseInt(answer).toString(2);
}
result.push(answer);
fillResultHistory(str + "=", answer);
}
document.getElementById("result").value = answer;
let currentSystemValue;
if (currentSystem == "0x") {
currentSystemValue = (currentSystem + answer.replace("-", "")) * 1
} else {
currentSystemValue = currentSystem + Math.abs(answer);
}
if (answer < 0) currentSystemValue = "-" + currentSystemValue * 1;
if (!isNaN(currentSystemValue * 1)) {
fillSystemValues(
parseInt(currentSystemValue * 1).toString(16).toUpperCase(), currentSystemValue * 1,
parseInt(currentSystemValue * 1).toString(8), parseInt(currentSystemValue * 1).toString(2));
}
}
function clearResult() {
result = [];
showResult();
document.querySelectorAll("button").forEach(button => {
if ((button.disabled = "true")) {
button.disabled = "";
button.classList.remove("button-disabled");
}
});
systemChange[currentSystem]();
fillSystemValues(0, 0, 0, 0);
}
function clearOneResult() {
result.pop();
showResult();
}
function strToExpress(str) {
let textArr = str.split("");
let newTextArr = [];
let calTextArr = [];
for (let i = 0; i < str.length; i++) {
if (
(i == 0 && str[i] == "-") ||
(str[i] == "-" && ops.indexOf(str[i - 1]) != -1)
) {
newTextArr.push(textArr[i]);
} else if (str[i] === ">" || str[i] === "<") {
newTextArr.push("$", str[i++], str[i], "$");
} else if (ops.indexOf(str[i]) != -1) {
newTextArr.push("$", str[i], "$");
} else {
newTextArr.push(textArr[i]);
}
}
calTextArr = newTextArr.join("").split("$");
return calTextArr;
}
function midToSuffix(midExpre) {
let opStack = [];
let suffixExpre = [];
for (let i = 0; i < midExpre.length; i++) {
if (
ops.indexOf(midExpre[i]) != -1 ||
midExpre[i] == "(" ||
midExpre[i] == ")"
) {
if (midExpre[i] == "(") {
opStack.push(midExpre[i]);
} else if (midExpre[i] == ")") {
do {
suffixExpre.push(opStack.pop());
} while (opStack[opStack.length - 1] != "(");
opStack.pop();
} else if (
opStack.length == 0 ||
Priority(midExpre[i]) > Priority(opStack[opStack.length - 1])
) {
opStack.push(midExpre[i]);
} else {
do {
suffixExpre.push(opStack.pop());
} while (
opStack.length > 0 &&
Priority(midExpre[i]) <= Priority(opStack[opStack.length - 1])
);
opStack.push(midExpre[i]);
}
} else {
let tempValue;
if (currentSystem == "0x") {
tempValue = (currentSystem + midExpre[i].replace("-", "")) * 1;
tempValue=midExpre[i].indexOf("-")!=-1 ? 0 - tempValue : tempValue;
} else {
tempValue = (currentSystem + Math.abs(midExpre[i] * 1)) * 1;
tempValue = midExpre[i] * 1 < 0 ? 0 - tempValue : tempValue;
}
suffixExpre.push(tempValue);
}
}
while (opStack.length > 0) {
let temp = opStack.pop();
if (temp != "") {
suffixExpre.push(temp);
}
}
return suffixExpre;
}
function Priority(op) {
let opPri = 0;
switch (op) {
case "&":
opPri = -1;
break;
case "|":
opPri = -1;
break;
case ">>":
break;
case "<<":
break;
case "+":
opPri = 1;
break;
case "-":
opPri = 1;
break;
case "x":
opPri = 2;
break;
case "÷":
opPri = 2;
break;
case "%":
opPri = 2;
break;
}
return opPri;
}
function suffixValue(suffixExpre) {
let calStack = [];
let tmpResult = 0;
console.log(suffixExpre);
for (let i = 0; i < suffixExpre.length; i++) {
if (ops.indexOf(suffixExpre[i]) != -1) {
let opRight = Number(calStack.pop());
let opLeft = Number(calStack.pop());
switch (suffixExpre[i]) {
case "+":
tmpResult = highPrecisionAdd(opLeft, opRight);
break;
case "-":
tmpResult = highPrecisionSubtr(opLeft, opRight);
break;
case "x":
tmpResult = highPrecisionMul(opLeft, opRight);
break;
case "÷":
tmpResult = Math.floor(highPrecisionDiv(opLeft, opRight));
break;
case "%":
tmpResult = opLeft % opRight;
break;
case ">>":
tmpResult = opLeft >> opRight;
break;
case "<<":
tmpResult = opLeft << opRight;
break;
case "|":
tmpResult = opLeft | opRight;
break;
case "&":
tmpResult = opLeft & opRight;
break;
}
calStack.push(tmpResult);
} else if (suffixExpre[i] != "") {
calStack.push(suffixExpre[i]);
}
}
console.log(calStack);
return calStack.pop();
}
function fillResultHistory(processStr, resultStr) {
const precessDiv = document.createElement("div");
const resultDiv = document.createElement("div");
const calculateItem = document.createElement("div");
const resultHistory = document.querySelector(".result-history");
calculateItem.className = "calculate-item";
precessDiv.className = "process";
resultDiv.className = "result";
precessDiv.innerText = processStr;
resultDiv.innerText = resultStr;
calculateItem.appendChild(precessDiv);
calculateItem.appendChild(resultDiv);
resultHistory.insertBefore(calculateItem, resultHistory.children[1]);
}
function showMidNumber(id) {
let val = id.innerText;
if (result.length < 16) {
if (val === "x^y") {
result.push("^");
} else if (val === "And") {
result.push("&");
} else if (val === "Or") {
result.push("|");
} else {
result.push(val);
}
}
showResult();
}
function isAllNum() {
let temp = result.join("");
if (isNaN(Number(temp, 10)) || result.length === 0) {
return false;
}
return true;
}
function isErrorExper() {
result = [];
result.push(errorExpre);
showResult();
disabledButtons();
}
function highPrecisionAdd(arg1, arg2) {
let r1, r2, m;
try {
r1 = arg1.toString().split(".")[1].length;
} catch (e) {
r1 = 0;
}
try {
r2 = arg2.toString().split(".")[1].length;
} catch (e) {
r2 = 0;
}
m = Math.pow(10, Math.max(r1, r2));
return (arg1 * m + arg2 * m) / m;
}
function highPrecisionDiv(arg1, arg2) {
let t1 = 0,
t2 = 0,
r1,
r2;
try {
t1 = arg1.toString().split(".")[1].length;
} catch (e) {}
try {
t2 = arg2.toString().split(".")[1].length;
} catch (e) {}
r1 = Number(arg1.toString().replace(".", ""));
r2 = Number(arg2.toString().replace(".", ""));
return (r1 / r2) * Math.pow(10, t2 - t1);
}
function highPrecisionMul(arg1, arg2) {
let m = 0,
s1 = arg1.toString(),
s2 = arg2.toString();
try {
m += s1.split(".")[1].length;
} catch (e) {}
try {
m += s2.split(".")[1].length;
} catch (e) {}
return (
(Number(s1.replace(".", "")) * Number(s2.replace(".", ""))) /
Math.pow(10, m)
);
}
function highPrecisionSubtr(arg1, arg2) {
let r1, r2, m, n;
try {
r1 = arg1.toString().split(".")[1].length;
} catch (e) {
r1 = 0;
}
try {
r2 = arg2.toString().split(".")[1].length;
} catch (e) {
r2 = 0;
}
m = Math.pow(10, Math.max(r1, r2));
n = r1 >= r2 ? r1 : r2;
return ((arg1 * m - arg2 * m) / m).toFixed(n);
}
function fillSystemValues(hex, dec, oct, bin) {
HEX_value.innerText = hex;
DEC_value.innerText = dec;
OCT_value.innerText = oct;
BIN_value.innerText = bin;
}
切换模式组件JS
function createList() {
const node = document.createElement("div");
node.className = "list";
const listArray = [
{
title: "标准",
url: "http://127.0.0.1:8848/calculator/index.html",
icon: `<svg
t="1656246646180"
style="margin-right: 10px"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="1276"
width="24"
height="24"
>
<path
d="M133.310936 296.552327l757.206115 0c19.781623 0 35.950949-16.169326 35.950949-35.950949 0-19.781623-15.997312-35.950949-35.950949-35.950949L133.310936 224.650428c-19.781623 0-35.950949 16.169326-35.950949 35.950949C97.359987 280.383 113.529313 296.552327 133.310936 296.552327z"
p-id="1277"
></path>
<path
d="M890.51705 476.135058 133.310936 476.135058c-19.781623 0-35.950949 16.169326-35.950949 35.950949 0 19.781623 16.169326 35.950949 35.950949 35.950949l757.206115 0c19.781623 0 35.950949-16.169326 35.950949-35.950949C926.467999 492.304384 910.298673 476.135058 890.51705 476.135058z"
p-id="1278"
></path>
<path
d="M890.51705 727.447673 133.310936 727.447673c-19.781623 0-35.950949 15.997312-35.950949 35.950949s16.169326 35.950949 35.950949 35.950949l757.206115 0c19.781623 0 35.950949-15.997312 35.950949-35.950949S910.298673 727.447673 890.51705 727.447673z"
p-id="1279"
></path>
</svg>`,
},
{
title: "科学",
url: "http://127.0.0.1:8848/calculator/science.html",
icon: `<svg t="1656254831734" style="margin-right: 10px" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2254" width="24" height="24">
<path d="M512 1020c-124 0-240-8.8-328-24.8-132.8-24-148-54.4-148-75.2 0-3.2 0.8-6.4 2.4-8.8l12.8-20s0-0.8 0.8-0.8L381.6 456V97.6c0-8.8 7.2-16 16-16h229.6c8.8 0 16 7.2 16 16V456l328.8 435.2s0 0.8 0.8 0.8l12.8 20c1.6 2.4 2.4 5.6 2.4 8.8 0 20.8-15.2 50.4-148 75.2-88 15.2-204 24-328 24zM69.6 922.4c5.6 6.4 28.8 24.8 124 41.6 85.6 15.2 198.4 23.2 317.6 23.2 119.2 0 232.8-8 317.6-23.2 95.2-16.8 118.4-35.2 124-41.6l-8.8-12.8-329.6-438.4c-2.4-2.4-3.2-6.4-3.2-9.6V113.6H413.6v347.2c0 3.2-0.8 7.2-3.2 9.6L78.4 909.6l-8.8 12.8z" p-id="2255"></path><path d="M652.8 113.6H371.2c-27.2 0-50.4-22.4-50.4-50.4V54.4c0-27.2 22.4-50.4 50.4-50.4h281.6c27.2 0 50.4 22.4 50.4 50.4V64c0 27.2-22.4 49.6-50.4 49.6zM371.2 36c-9.6 0-18.4 8-18.4 18.4V64c0 9.6 8 18.4 18.4 18.4h281.6c9.6 0 18.4-8 18.4-18.4V54.4c0-9.6-8-18.4-18.4-18.4H371.2zM475.2 168.8h-77.6c-4.8 0-8-3.2-8-8s3.2-8 8-8h77.6c4.8 0 8 3.2 8 8s-3.2 8-8 8zM475.2 248h-77.6c-4.8 0-8-3.2-8-8s3.2-8 8-8h77.6c4.8 0 8 3.2 8 8s-3.2 8-8 8zM475.2 327.2h-77.6c-4.8 0-8-3.2-8-8s3.2-8 8-8h77.6c4.8 0 8 3.2 8 8s-3.2 8-8 8zM475.2 406.4h-77.6c-4.8 0-8-3.2-8-8s3.2-8 8-8h77.6c4.8 0 8 3.2 8 8 0 4-3.2 8-8 8zM734.4 611.2H289.6c-4.8 0-8-3.2-8-8s3.2-8 8-8h444c4.8 0 8 3.2 8 8 0.8 4.8-3.2 8-7.2 8z" p-id="2256">
</path></svg>`,
},
{
title: "程序员",
url: "http://127.0.0.1:8848/calculator/programmer.html",
icon: `<svg t="1656255222727" style="margin-right: 10px" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1768" width="24" height="24">
<path
d="M159.232 268.629333m-17.066667 0a17.066667 17.066667 0 1 0 34.133334 0 17.066667 17.066667 0 1 0-34.133334 0Z" fill="#3D3D63" p-id="1769"
></path>
<path
d="M273.066667 268.629333m-17.066667 0a17.066667 17.066667 0 1 0 34.133333 0 17.066667 17.066667 0 1 0-34.133333 0Z" fill="#3D3D63" p-id="1770"
></path>
<path
d="M216.234667 268.629333m-17.066667 0a17.066667 17.066667 0 1 0 34.133333 0 17.066667 17.066667 0 1 0-34.133333 0Z" fill="#3D3D63" p-id="1771"
></path>
<path
d="M341.333333 516.266667l51.2-51.2a17.066667 17.066667 0 1 0-24.234666-24.234667l-63.488 63.658667a17.066667 17.066667 0 0 0 0 24.064l63.488 63.658666a17.066667 17.066667 0 0 0 24.234666 0 17.066667 17.066667 0 0 0 0-24.064zM585.728 591.872a17.066667 17.066667 0 0 0 24.064 0L673.450667 529.066667a17.066667 17.066667 0 0 0 0-24.064l-63.658667-63.658667a17.066667 17.066667 0 0 0-24.064 24.234667l51.2 51.2-51.2 51.2a17.066667 17.066667 0 0 0 0 23.893333zM529.066667 446.293333a17.066667 17.066667 0 0 0-23.381334 6.314667L442.709333 563.2a17.066667 17.066667 0 1 0 29.525334 17.066667l63.658666-110.08a17.066667 17.066667 0 0 0-6.826666-23.893334z" fill="#3D3D63" p-id="1772"></path><path d="M953.344 682.666667a4.949333 4.949333 0 0 1-4.608-3.242667 178.005333 178.005333 0 0 0-28.501333-49.322667 4.949333 4.949333 0 0 1 0-5.632 39.253333 39.253333 0 0 0-14.336-53.589333l-12.8-7.68V251.562667a51.2 51.2 0 0 0-51.2-51.2H136.533333a51.2 51.2 0 0 0-51.2 51.2v432.469333a39.936 39.936 0 0 0 39.765334 39.765333H358.4l-17.066667 63.146667h-22.698666a73.898667 73.898667 0 0 0-71.850667 56.832H204.8a17.066667 17.066667 0 0 0 0 34.133333h434.688a36.181333 36.181333 0 0 0 1.194667 12.117334 38.4 38.4 0 0 0 18.261333 23.893333l36.010667 20.821333a39.253333 39.253333 0 0 0 53.589333-14.506666 5.290667 5.290667 0 0 1 5.290667-2.389334 166.229333 166.229333 0 0 0 56.661333 0 5.12 5.12 0 0 1 5.290667 2.56 39.253333 39.253333 0 0 0 34.133333 19.456 38.741333 38.741333 0 0 0 19.626667-5.12l36.010666-20.821333a39.082667 39.082667 0 0 0 18.261334-23.893333 38.570667 38.570667 0 0 0-3.925334-29.696 5.12 5.12 0 0 1 0-5.802667 179.541333 179.541333 0 0 0 28.501334-49.152 4.778667 4.778667 0 0 1 4.608-3.242667 39.424 39.424 0 0 0 39.253333-39.253333v-41.642667A39.253333 39.253333 0 0 0 953.344 682.666667zM119.466667 251.562667a17.066667 17.066667 0 0 1 17.066666-17.066667h705.365334a17.066667 17.066667 0 0 1 17.066666 17.066667v51.2H119.466667z m5.632 438.101333a5.632 5.632 0 0 1-5.632-5.632V336.896h739.498666V546.133333a39.082667 39.082667 0 0 0-43.178666 17.066667 4.949333 4.949333 0 0 1-5.12 2.218667 175.274667 175.274667 0 0 0-56.661334 0 4.778667 4.778667 0 0 1-5.12-2.218667 39.082667 39.082667 0 0 0-53.589333-14.336l-36.010667 20.821333a38.229333 38.229333 0 0 0-18.261333 23.722667 39.594667 39.594667 0 0 0 3.754667 29.866667 4.608 4.608 0 0 1 0 5.632 178.005333 178.005333 0 0 0-28.501334 49.322666 4.949333 4.949333 0 0 1-4.608 3.242667 39.082667 39.082667 0 0 0-23.210666 7.68zM580.266667 786.944H375.466667l17.066666-63.146667h179.2v39.082667a39.594667 39.594667 0 0 0 8.533334 24.064z m-261.461334 34.133333h303.786667a187.733333 187.733333 0 0 0 13.312 22.698667H282.794667a39.765333 39.765333 0 0 1 35.84-22.698667z m639.658667-58.197333a5.12 5.12 0 0 1-5.12 5.12 39.424 39.424 0 0 0-36.693333 25.258667 144.384 144.384 0 0 1-22.869334 39.765333 39.424 39.424 0 0 0-3.584 44.373333 4.437333 4.437333 0 0 1 0 3.754667 4.949333 4.949333 0 0 1-2.389333 3.242667L852.309333 904.533333a5.12 5.12 0 0 1-6.997333-2.048 39.424 39.424 0 0 0-40.448-18.944 135.168 135.168 0 0 1-45.397333 0 39.424 39.424 0 0 0-40.448 19.114667 5.290667 5.290667 0 0 1-6.997334 1.877333l-36.010666-20.821333a4.949333 4.949333 0 0 1-2.389334-3.242667 4.437333 4.437333 0 0 1 0-3.754666 39.765333 39.765333 0 0 0-3.584-44.373334 142.506667 142.506667 0 0 1-23.04-39.765333A38.912 38.912 0 0 0 610.986667 768a5.12 5.12 0 0 1-5.12-5.12v-41.642667a4.949333 4.949333 0 0 1 5.12-5.12 39.253333 39.253333 0 0 0 36.522666-25.258666 140.117333 140.117333 0 0 1 23.04-39.765334 39.765333 39.765333 0 0 0 3.584-44.373333 4.778667 4.778667 0 0 1 0-3.925333 4.437333 4.437333 0 0 1 2.389334-3.072l36.010666-20.821334a4.778667 4.778667 0 0 1 2.56 0 5.12 5.12 0 0 1 4.266667 2.389334 39.594667 39.594667 0 0 0 40.448 19.114666 135.168 135.168 0 0 1 45.397333 0A39.765333 39.765333 0 0 0 845.312 580.266667a4.949333 4.949333 0 0 1 6.826667-1.706667l36.010666 20.821333a4.437333 4.437333 0 0 1 2.389334 3.072 4.778667 4.778667 0 0 1 0 3.925334 39.253333 39.253333 0 0 0 3.584 44.202666 145.237333 145.237333 0 0 1 22.869333 39.936A39.594667 39.594667 0 0 0 953.344 716.8a4.949333 4.949333 0 0 1 5.12 5.12z" fill="#3D3D63" p-id="1773"></path><path d="M782.165333 664.576a77.482667 77.482667 0 1 0 77.482667 77.482667 77.482667 77.482667 0 0 0-77.482667-77.482667z m0 120.832a43.349333 43.349333 0 1 1 43.349334-43.349333A43.349333 43.349333 0 0 1 782.165333 785.066667z" fill="#3D3D63" p-id="1774"
></path>
</svg>`,
},
];
const result = listArray
.map(
item =>
`<div class="list-item"><a class="nav" href="${item.url}">${item.icon}${item.title}</a></div>`
)
.join("");
node.innerHTML = result;
return node;
}
(function () {
const list = createList();
const body = document.querySelector("body");
body.insertBefore(list, body.children[0]);
change.addEventListener("click", () => {
if (list.style.width !== "250px") {
change.children[1].style.opacity = 0;
list.style.width = "250px";
} else {
change.children[1].style.opacity = 1;
list.style.width = 0;
}
});
const prompt = document.querySelector(".prompt-box");
if (prompt) {
document.querySelector(".shadow-box").addEventListener("click", () => {
if (prompt.classList.contains("open")) {
prompt.classList.replace("open", "close");
} else {
prompt.classList.add("close");
}
});
}
const historyButton = document.querySelector(".history-button");
historyButton.addEventListener("click", () => {
if (prompt.classList.contains("close")) {
prompt.classList.replace("close", "open");
} else {
prompt.classList.replace("open", "close");
}
});
})();
本文含有隐藏内容，请 开通VIP 后查看