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(){
return "tools/JiSuanQi/JiSuanQi.html";
}
@RequestMapping("/")
public String index(){
return "index.html";
}
}
src/main/resources/static/tools/JiSuanQi/JiSuanQi.html
+132 -227
View File
@@ -9,289 +9,194 @@
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Helvetica Neue", Arial, sans-serif;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
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;
flex-direction: column;
background-color: #000;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
height: 100vh;
background-color: #ffffff;
padding: 20px;
}
/* 显示区域 */
.display {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
padding: 40px 30px;
color: #fff;
}
.input-text {
font-size: 24px;
margin-bottom: 10px;
opacity: 0.8;
}
.result-text {
font-size: 40px;
font-weight: 300;
padding: 20px 10px;
font-size: 8rem;
font-weight: 200;
color: #000000;
overflow: hidden;
}
/* 按钮区域 */
.buttons {
flex: 2;
display: flex;
flex-direction: column;
padding: 10px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.btn-row {
display: flex;
flex: 1;
}
.btn {
flex: 1;
margin: 5px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
/* 按钮基础样式 */
button {
height: 80px;
border: none;
outline: none;
border-radius: 50px; /* 圆角按钮 */
font-size: 1.8rem;
cursor: pointer;
transition: opacity 0.2s;
transition: background-color 0.2s ease;
}
.btn:hover {
opacity: 0.9;
/* 功能按钮（AC、+/-、%） */
.func-btn {
background-color: #e6f7ff;
color: #1890ff;
}
/* 按钮样式 */
.btn-gray {
background-color: #a5a5a5;
color: #000;
.func-btn:active {
background-color: #bae7ff;
}
.btn-num {
background-color: #333333;
color: #fff;
/* 数字按钮 */
.num-btn {
background-color: #f5f5f5;
color: #000000;
}
.btn-orange {
background-color: #ff9f0a;
color: #fff;
.num-btn:active {
background-color: #e0e0e0;
}
/* 0号按钮特殊样式 */
.zero {
border-radius: 50px;
flex: 2;
/* 运算符按钮（天蓝色主题） */
.op-btn {
background-color: #1890ff;
color: #ffffff;
}
/* 响应式适配 */
@media (max-width: 400px) {
.calculator-container {
height: 100vh;
border-radius: 0;
.op-btn:active {
background-color: #096dd9;
}
.display {
padding: 30px 20px;
}
.result-text {
font-size: 36px;
}
/* 0号按钮占两列 */
#zero {
grid-column: span 2;
}
</style>
</head>
<body>
<div class="calculator-container">
<!-- 显示区域 -->
<div class="display">
<div class="input-text" id="inputValue"></div>
<div class="result-text" id="resultValue">0</div>
</div>
<!-- 按钮区域 -->
<div class="display">0</div>
<div class="buttons">
<!-- 第一行 -->
<div class="btn-row">
<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="func-btn" id="ac">AC</button>
<button class="func-btn" id="plus-minus">+/-</button>
<button class="func-btn" id="percent">%</button>
<button class="op-btn" id="divide">÷</button>
<!-- 第二行 -->
<div class="btn-row">
<button class="btn btn-num" onclick="handleNumber('7')">7</button>
<button class="btn btn-num" onclick="handleNumber('8')">8</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="7">7</button>
<button class="num-btn" id="8">8</button>
<button class="num-btn" id="9">9</button>
<button class="op-btn" id="multiply">×</button>
<!-- 第三行 -->
<div class="btn-row">
<button class="btn btn-num" onclick="handleNumber('4')">4</button>
<button class="btn btn-num" onclick="handleNumber('5')">5</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="4">4</button>
<button class="num-btn" id="5">5</button>
<button class="num-btn" id="6">6</button>
<button class="op-btn" id="subtract">-</button>
<!-- 第四行 -->
<div class="btn-row">
<button class="btn btn-num" onclick="handleNumber('1')">1</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>
<button class="num-btn" id="1">1</button>
<button class="num-btn" id="2">2</button>
<button class="num-btn" id="3">3</button>
<button class="op-btn" id="add">+</button>
<!-- 第五行 -->
<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>
<button class="num-btn" id="zero">0</button>
<button class="num-btn" id="decimal">.</button>
<button class="op-btn" id="equals">=</button>
</div>
<script>
let inputValue = ''; // 输入的表达式
let resultValue = '0'; // 计算结果
// 获取DOM元素
const inputEl = document.getElementById('inputValue');
const resultEl = document.getElementById('resultValue');
const display = document.querySelector('.display');
let currentValue = '0';
let previousValue = '';
let operator = '';
let resetDisplay = false;
// 更新显示
function updateDisplay() {
inputEl.textContent = inputValue;
resultEl.textContent = resultValue;
display.textContent = currentValue;
}
// 清空
function clearAll() {
inputValue = '';
resultValue = '0';
updateDisplay();
}
// 退格
function deleteLast() {
if (inputValue.length > 0) {
inputValue = inputValue.substring(0, inputValue.length - 1);
// 如果还有输入内容，重新计算
if (inputValue) {
calculateResult(inputValue);
// 数字按钮
document.querySelectorAll('.num-btn').forEach(btn => {
btn.addEventListener('click', () => {
const value = btn.textContent;
if (currentValue === '0' || resetDisplay) {
currentValue = value;
resetDisplay = false;
} else {
resultValue = '0';
if (value === '.' && currentValue.includes('.')) return;
currentValue += value;
}
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>
</body>
</html>