From 7050446b7a562dbc9276a5694c29975c843a69fd Mon Sep 17 00:00:00 2001
From: popup <18690563721@163.com>
Date: Sat, 17 Jan 2026 12:29:47 +0800
Subject: [PATCH] =?UTF-8?q?2026-01-17=201.=E4=BC=98=E5=8C=96=E5=B7=A5?=
 =?UTF-8?q?=E5=85=B7=E7=B1=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../toolbox/controller/ToolController.java    |   5 +
 .../static/tools/JiSuanQi/JiSuanQi.html       | 363 +++++++-----------
 2 files changed, 139 insertions(+), 229 deletions(-)

diff --git a/src/main/java/cn/lailab/toolbox/controller/ToolController.java b/src/main/java/cn/lailab/toolbox/controller/ToolController.java
index d4129e7..143fda2 100644
--- a/src/main/java/cn/lailab/toolbox/controller/ToolController.java
+++ b/src/main/java/cn/lailab/toolbox/controller/ToolController.java
@@ -10,4 +10,9 @@ public class ToolController {
     public String JiSuanQi(){
         return "tools/JiSuanQi/JiSuanQi.html";
     }
+
+    @RequestMapping("/")
+    public String index(){
+        return "index.html";
+    }
 }
diff --git a/src/main/resources/static/tools/JiSuanQi/JiSuanQi.html b/src/main/resources/static/tools/JiSuanQi/JiSuanQi.html
index bf15f0b..e84e343 100644
--- a/src/main/resources/static/tools/JiSuanQi/JiSuanQi.html
+++ b/src/main/resources/static/tools/JiSuanQi/JiSuanQi.html
@@ -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">
+        <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="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="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('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="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('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="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" 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>
-
-            <!-- 第五行 -->
-            <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>