qianwanlai/lailab-toolbox-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2026-01-17

Browse Source 
1.优化工具类
This commit is contained in:
admin
2026-01-17 12:29:47 +08:00
parent 1f8a288f1e
commit 7050446b7a
2 changed files with 139 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/java/cn/lailab/toolbox/controller/ToolController.java
+5
View File
@@ -10,4 +10,9 @@ public class ToolController {
public String JiSuanQi(){ public String JiSuanQi(){
return "tools/JiSuanQi/JiSuanQi.html"; return "tools/JiSuanQi/JiSuanQi.html";
} }
@RequestMapping("/")
public String index(){
return "index.html";
}
} }
src/main/resources/static/tools/JiSuanQi/JiSuanQi.html
+134 -229
View File
@@ -9,289 +9,194 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
font-family: "Helvetica Neue", Arial, sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
} }
body { body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f5f5f5;
}
/* 计算器容器 */
.calculator-container {
width: 100%;
max-width: 400px;
height: 90vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #000; height: 100vh;
border-radius: 20px; background-color: #ffffff;
overflow: hidden; padding: 20px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
} }
/* 显示区域 */ /* 显示区域 */
.display { .display {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
align-items: flex-end; align-items: flex-end;
padding: 40px 30px; padding: 20px 10px;
color: #fff; font-size: 8rem;
} font-weight: 200;
color: #000000;
.input-text { overflow: hidden;
font-size: 24px;
margin-bottom: 10px;
opacity: 0.8;
}
.result-text {
font-size: 40px;
font-weight: 300;
} }
/* 按钮区域 */ /* 按钮区域 */
.buttons { .buttons {
flex: 2; display: grid;
display: flex; grid-template-columns: repeat(4, 1fr);
flex-direction: column; gap: 15px;
padding: 10px;
} }
.btn-row { /* 按钮基础样式 */
display: flex; button {
flex: 1; height: 80px;
}
.btn {
flex: 1;
margin: 5px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
border: none; border: none;
outline: none; border-radius: 50px; /* 圆角按钮 */
font-size: 1.8rem;
cursor: pointer; cursor: pointer;
transition: opacity 0.2s; transition: background-color 0.2s ease;
} }
.btn:hover { /* 功能按钮（AC、+/-、%） */
opacity: 0.9; .func-btn {
background-color: #e6f7ff;
color: #1890ff;
} }
/* 按钮样式 */ .func-btn:active {
.btn-gray { background-color: #bae7ff;
background-color: #a5a5a5;
color: #000;
} }
.btn-num { /* 数字按钮 */
background-color: #333333; .num-btn {
color: #fff; background-color: #f5f5f5;
color: #000000;
} }
.btn-orange { .num-btn:active {
background-color: #ff9f0a; background-color: #e0e0e0;
color: #fff;
} }
/* 0号按钮特殊样式 */ /* 运算符按钮（天蓝色主题） */
.zero { .op-btn {
border-radius: 50px; background-color: #1890ff;
flex: 2; color: #ffffff;
} }
/* 响应式适配 */ .op-btn:active {
@media (max-width: 400px) { background-color: #096dd9;
.calculator-container { }
height: 100vh;
border-radius: 0;
}
.display { /* 0号按钮占两列 */
padding: 30px 20px; #zero {
} grid-column: span 2;
.result-text {
font-size: 36px;
}
} }
</style> </style>
</head> </head>
<body> <body>
<div class="calculator-container"> <div class="display">0</div>
<!-- 显示区域 --> <div class="buttons">
<div class="display"> <button class="func-btn" id="ac">AC</button>
<div class="input-text" id="inputValue"></div> <button class="func-btn" id="plus-minus">+/-</button>
<div class="result-text" id="resultValue">0</div> <button class="func-btn" id="percent">%</button>
</div> <button class="op-btn" id="divide">÷</button>
<!-- 按钮区域 --> <button class="num-btn" id="7">7</button>
<div class="buttons"> <button class="num-btn" id="8">8</button>
<!-- 第一行 --> <button class="num-btn" id="9">9</button>
<div class="btn-row"> <button class="op-btn" id="multiply">×</button>
<button class="btn btn-gray" onclick="clearAll()">AC</button>
<button class="btn btn-gray" onclick="deleteLast()">←</button>
<button class="btn btn-gray" onclick="handleOperator('%')">%</button>
<button class="btn btn-orange" onclick="handleOperator('/')">÷</button>
</div>
<!-- 第二行 --> <button class="num-btn" id="4">4</button>
<div class="btn-row"> <button class="num-btn" id="5">5</button>
<button class="btn btn-num" onclick="handleNumber('7')">7</button> <button class="num-btn" id="6">6</button>
<button class="btn btn-num" onclick="handleNumber('8')">8</button> <button class="op-btn" id="subtract">-</button>
<button class="btn btn-num" onclick="handleNumber('9')">9</button>
<button class="btn btn-orange" onclick="handleOperator('*')">×</button>
</div>
<!-- 第三行 --> <button class="num-btn" id="1">1</button>
<div class="btn-row"> <button class="num-btn" id="2">2</button>
<button class="btn btn-num" onclick="handleNumber('4')">4</button> <button class="num-btn" id="3">3</button>
<button class="btn btn-num" onclick="handleNumber('5')">5</button> <button class="op-btn" id="add">+</button>
<button class="btn btn-num" onclick="handleNumber('6')">6</button>
<button class="btn btn-orange" onclick="handleOperator('-')">-</button>
</div>
<!-- 第四行 --> <button class="num-btn" id="zero">0</button>
<div class="btn-row"> <button class="num-btn" id="decimal">.</button>
<button class="btn btn-num" onclick="handleNumber('1')">1</button> <button class="op-btn" id="equals">=</button>
<button class="btn btn-num" onclick="handleNumber('2')">2</button>
<button class="btn btn-num" onclick="handleNumber('3')">3</button>
<button class="btn btn-orange" onclick="handleOperator('+')">+</button>
</div>
<!-- 第五行 -->
<div class="btn-row">
<button class="btn btn-num zero" onclick="handleNumber('0')">0</button>
<button class="btn btn-num" onclick="handleNumber('.')">.</button>
<button class="btn btn-orange" onclick="calculate()">=</button>
</div>
</div>
</div> </div>
<script> <script>
let inputValue = ''; // 输入的表达式 const display = document.querySelector('.display');
let resultValue = '0'; // 计算结果 let currentValue = '0';
let previousValue = '';
// 获取DOM元素 let operator = '';
const inputEl = document.getElementById('inputValue'); let resetDisplay = false;
const resultEl = document.getElementById('resultValue');
// 更新显示 // 更新显示
function updateDisplay() { function updateDisplay() {
inputEl.textContent = inputValue; display.textContent = currentValue;
resultEl.textContent = resultValue;
} }
// 清空 // 数字按钮
function clearAll() { document.querySelectorAll('.num-btn').forEach(btn => {
inputValue = ''; btn.addEventListener('click', () => {
resultValue = '0'; const value = btn.textContent;
updateDisplay(); if (currentValue === '0' || resetDisplay) {
} currentValue = value;
resetDisplay = false;
// 退格
function deleteLast() {
if (inputValue.length > 0) {
inputValue = inputValue.substring(0, inputValue.length - 1);
// 如果还有输入内容，重新计算
if (inputValue) {
calculateResult(inputValue);
} else { } else {
resultValue = '0'; if (value === '.' && currentValue.includes('.')) return;
currentValue += value;
} }
updateDisplay(); updateDisplay();
} });
}
// 处理数字输入
function handleNumber(value) {
// 处理小数点（只能有一个）
if (value === '.' && inputValue.includes('.')) {
return;
}
// 处理开头的0
if (inputValue === '0' && value !== '.') {
inputValue = value;
} else {
inputValue += value;
}
// 实时计算
calculateResult(inputValue);
updateDisplay();
}
// 处理运算符
function handleOperator(value) {
const lastChar = inputValue.slice(-1);
// 替换运算符（如果最后一个字符是运算符）
const operators = ['+', '-', '*', '/', '%'];
if (operators.includes(lastChar)) {
inputValue = inputValue.substring(0, inputValue.length - 1) + value;
} else {
inputValue += value;
}
updateDisplay();
}
// 计算结果
function calculate() {
calculateResult(inputValue);
updateDisplay();
}
// 核心计算方法
function calculateResult(expression) {
if (!expression) return;
// 替换乘号为js识别的*
let exp = expression.replace(/×/g, '*');
try {
// 使用eval计算（实际项目中可替换为更安全的表达式解析库）
let result = eval(exp);
// 处理大数和小数
if (result.toString().length > 10) {
result = result.toPrecision(10);
}
resultValue = result.toString();
} catch (error) {
resultValue = 'Error';
console.error('计算错误:', error);
}
}
// 初始化显示
updateDisplay();
// 键盘支持（可选）
document.addEventListener('keydown', (e) => {
const key = e.key;
if (/[0-9.]/.test(key)) {
handleNumber(key);
} else if (['+', '-', '*', '/', '%'].includes(key)) {
handleOperator(key === '*' ? '×' : key);
} else if (key === 'Enter' || key === '=') {
calculate();
} else if (key === 'Backspace') {
deleteLast();
} else if (key === 'Escape') {
clearAll();
}
}); });
// 运算符按钮
document.querySelectorAll('.op-btn').forEach(btn => {
btn.addEventListener('click', () => {
if (btn.id === 'equals') return;
if (previousValue && operator && !resetDisplay) calculate();
previousValue = currentValue;
operator = btn.id;
resetDisplay = true;
});
});
// 等号按钮
document.getElementById('equals').addEventListener('click', calculate);
// 功能按钮
document.getElementById('ac').addEventListener('click', () => {
currentValue = '0';
previousValue = '';
operator = '';
resetDisplay = false;
updateDisplay();
});
document.getElementById('plus-minus').addEventListener('click', () => {
currentValue = currentValue.startsWith('-') ? currentValue.slice(1) : '-' + currentValue;
updateDisplay();
});
document.getElementById('percent').addEventListener('click', () => {
currentValue = (parseFloat(currentValue) / 100).toString();
updateDisplay();
});
// 计算逻辑
function calculate() {
if (!previousValue || !operator) return;
let result;
const prev = parseFloat(previousValue);
const curr = parseFloat(currentValue);
switch (operator) {
case 'add': result = prev + curr; break;
case 'subtract': result = prev - curr; break;
case 'multiply': result = prev * curr; break;
case 'divide': result = curr === 0 ? '错误' : prev / curr; break;
default: return;
}
currentValue = typeof result === 'number'
? (result % 1 === 0 ? result.toString() : result.toFixed(6).replace(/\.?0*$/, ''))
: result;
previousValue = '';
operator = '';
resetDisplay = true;
updateDisplay();
}
</script> </script>
</body> </body>
</html> </html>