Stories

Detail Return Return

網頁自制數學助手 - Stories Detail

介紹
本論文的數學助手不做過多講解，因為比較簡單，主要是1，本文屬於AI回答，僅供參考。2，他會跟你秀一段。3,它有一定的思維能力，你可以把不會的數學題發給它

源碼

<!DOCTYPE html>
<html lang="zh-CN">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>智能數學AI助手 - 全能版</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    
    body {
        background: linear-gradient(135deg, #6e8efb, #a777e3);
        color: #333;
        min-height: 100vh;
        padding: 20px;
    }
    
    .container {
        max-width: 900px;
        margin: 0 auto;
        background-color: rgba(255, 255, 255, 0.95);
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        overflow: hidden;
    }
    
    header {
        background: linear-gradient(135deg, #2c3e50, #4a6491);
        color: white;
        padding: 25px 30px;
        text-align: center;
    }
    
    h1 {
        font-size: 2.5rem;
        margin-bottom: 10px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }
    
    .subtitle {
        font-size: 1.2rem;
        opacity: 0.9;
    }
    
    .chat-container {
        display: flex;
        flex-direction: column;
        height: 500px;
        padding: 20px;
        overflow-y: auto;
    }
    
    .message {
        max-width: 80%;
        padding: 15px 20px;
        margin-bottom: 20px;
        border-radius: 18px;
        line-height: 1.5;
        position: relative;
        animation: fadeIn 0.3s ease-out;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    .ai-message {
        align-self: flex-start;
        background-color: #f0f5ff;
        border-bottom-left-radius: 5px;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    }
    
    .user-message {
        align-self: flex-end;
        background: linear-gradient(135deg, #6e8efb, #a777e3);
        color: white;
        border-bottom-right-radius: 5px;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    }
    
    .input-container {
        display: flex;
        padding: 20px;
        border-top: 1px solid #eee;
        background-color: #f9f9f9;
    }
    
    input {
        flex: 1;
        padding: 15px 20px;
        border: 2px solid #ddd;
        border-radius: 30px;
        font-size: 16px;
        outline: none;
        transition: border-color 0.3s;
    }
    
    input:focus {
        border-color: #6e8efb;
    }
    
    button {
        background: linear-gradient(135deg, #6e8efb, #a777e3);
        color: white;
        border: none;
        border-radius: 30px;
        padding: 15px 30px;
        margin-left: 15px;
        cursor: pointer;
        font-size: 16px;
        font-weight: 600;
        transition: transform 0.2s, box-shadow 0.2s;
        box-shadow: 0 4px 15px rgba(110, 142, 251, 0.4);
    }

button:hover {

        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(110, 142, 251, 0.6);
    }
    
    .math-example {
        background-color: #f8f9fa;
        border-left: 4px solid #6e8efb;
        padding: 15px;
        margin: 15px 0;
        border-radius: 0 10px 10px 0;
    }
    
    .math-formula {
        font-family: 'Times New Roman', serif;
        font-size: 18px;
        margin: 10px 0;
        padding: 10px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    
    .thinking {
        display: flex;
        align-items: center;
        color: #6e8efb;
        font-style: italic;
        margin: 10px 0;
    }
    
    .thinking::after {
        content: "...";
        animation: dots 1.5s steps(4, end) infinite;
    }
    
    @keyframes dots {
        0%, 20% { color: rgba(0,0,0,0); text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0); }
        40% { color: #6e8efb; text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0); }
        60% { text-shadow: .25em 0 0 #6e8efb, .5em 0 0 rgba(0,0,0,0); }
        80%, 100% { text-shadow: .25em 0 0 #6e8efb, .5em 0 0 #6e8efb; }
    }
    
    .intelligence-meter {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
        padding: 10px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 20px;
    }
    
    .iq-label {
        font-weight: bold;
        margin-right: 10px;
        color: white;
    }
    
    .iq-value {
        font-weight: bold;
        color: #ffeb3b;
        text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    }
    
    .simple-calc {
        background-color: #e8f5e9;
        border: 1px solid #4caf50;
        border-radius: 10px;
        padding: 15px;
        margin: 10px 0;
    }
    
    .calc-result {
        font-weight: bold;
        color: #2e7d32;
        font-size: 1.1em;
    }
    
    @media (max-width: 600px) {
        .container {
            border-radius: 10px;
        }
        
        h1 {
            font-size: 1.8rem;
        }
        
        .message {
            max-width: 90%;
        }
        
        .input-container {
            flex-direction: column;
        }
        
        button {
            margin-left: 0;
            margin-top: 10px;
        }
    }
</style>

</head>
<body>

<div class="container">
    <header>
        <h1>智能數學AI助手 - 全能版</h1>
        <p class="subtitle">從基礎算術到高等數學，無所不能</p >
        <div class="intelligence-meter">
            <span class="iq-label">AI智商評估：</span>
            <span class="iq-value">極高 (IQ 180+)</span>
        </div>
    </header>
    
    <div class="chat-container" id="chatContainer">
        <div class="message ai-message">
            <p>你好！我是全能數學AI助手，從1+1到微積分，我都能解答！</p >
            <div class="math-example">
                <p>你可以問我：</p >
                <ul>
                    <li>基礎運算：1+1, 15×23, √144, 2³, 5! 等</li>
                    <li>解方程：\(x^2 - 5x + 6 = 0\)</li>
                    <li>求導數：\(\frac{d}{dx}(x^3 + 2x^2 - x)\)</li>
                    <li>幾何問題：計算半徑為5的圓的面積</li>
                    <li>概率問題：拋擲兩個骰子，點數和為7的概率</li>
                </ul>
            </div>
            <p>請提出你的數學問題吧！</p >
        </div>
    </div>
    
    <div class="input-container">
        <input type="text" id="userInput" placeholder="輸入數學問題或表達式...">
        <button id="sendButton">發送</button>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function()

{

        const chatContainer = document.getElementById('chatContainer');
        const userInput = document.getElementById('userInput');
        const sendButton = document.getElementById('sendButton');
        
        // 數學表達式計算器
        function evaluateMathExpression(expr) {
            try {
                // 替換數學符號為JavaScript可識別的
                expr = expr
                    .replace(/×/g, '*')
                    .replace(/÷/g, '/')
                    .replace(/√/g, 'Math.sqrt')
                    .replace(/π/g, 'Math.PI')
                    .replace(/≈/g, '≈')
                    .replace(/!/g, '!')
                    .replace(/\^/g, '**')
                    .replace(/sin\(/g, 'Math.sin(')
                    .replace(/cos\(/g, 'Math.cos(')
                    .replace(/tan\(/g, 'Math.tan(')
                    .replace(/log\(/g, 'Math.log10(')
                    .replace(/ln\(/g, 'Math.log(');
                
                // 處理階乘
                if (expr.includes('!')) {
                    const num = parseInt(expr.replace('!', ''));
                    if (num >= 0) {
                        let fact = 1;
                        for (let i = 2; i <= num; i++) fact *= i;
                        return fact;
                    } else {
                        return "錯誤：階乘只能計算非負整數";
                    }
                }
                
                // 處理約等於
                if (expr.includes('≈')) {
                    const parts = expr.split('≈');
                    if (parts.length === 2) {
                        const value = eval(parts[0]);
                        const approx = eval(parts[1]);
                        return Math.abs(value - approx) < 0.0001 ? "正確" : "不正確";
                    }
                }
                
                // 普通表達式求值
                const result = eval(expr);
                
                // 處理浮點數精度問題
                if (Number.isInteger(result)) {
                    return result;
                } else {
                    return Number(result.toFixed(10));
                }
            } catch (error) {
                return "無法計算此表達式";
            }
        }
        
        // 示例問題和答案
        const mathResponses = {
            '方程': {
                question: '解方程：\(x^2 - 5x + 6 = 0\)',
                answer: `解：\\
                1. 因式分解：\\(x^2 - 5x + 6 = (x-2)(x-3) = 0\\)\\
                2. 解得：\\(x_1 = 2\\)，\\(x_2 = 3\\)\\
                所以方程的解為 \\(x = 2\\) 或 \\(x = 3\\)。`
            },
            '導數': {
                question: '求導數：\\(\\frac{d}{dx}(x^3 + 2x^2 - x)\\)',
                answer: `解：\\
                使用冪函數求導法則：\\(\\frac{d}{dx}x^n = n \\cdot x^{n-1}\\)\\
                \\(\\frac{d}{dx}(x^3) = 3x^2\\)\\
                \\(\\frac{d}{dx}(2x^2) = 4x\\)\\
                \\(\\frac{d}{dx}(-x) = -1\\)\\
                所以：\\(\\frac{d}{dx}(x^3 + 2x^2 - x) = 3x^2 + 4x - 1\\)`
            },
            '面積': {
                question: '計算半徑為5的圓的面積',
                answer: `解：\\
                圓的面積公式：\\(A = \\pi r^2\\)\\
                代入半徑 \\(r = 5\\)：\\
                \\(A = \\pi \\times 5^2 = 25\\pi\\)\\
                所以圓的面積為 \\(25\\pi\\) 平方單位。`
            },
            '概率': {
                question: '拋擲兩個骰子，點數和為7的概率',
                answer: `解：\\
                兩個骰子的點數組合共有 \\(6 \\times 6 = 36\\) 種可能。\\
                點數和為7的組合有：(1,6), (2,5), (3,4), (4,3), (5,2), (6,1) 共6種。\\
                所以概率為：\\(P = \\frac{6}{36} = \\frac{1}{6}\\)。`
            },
            '積分': {
                question: '計算積分：\\(\\int_0^2 (2x - x^2) dx\\)',
                answer: `解：\\
                1. 求原函數：\\(\\int (2x - x^2) dx = x^2 - \\frac{x^3}{3} + C\\)\\
                2. 計算定積分：\\(\\left[x^2 - \\frac{x^3}{3}\\right]_0^2 = (4 - \\frac{8}{3}) - (0 - 0) = \\frac{4}{3}\\)\\
                所以積分結果為 \\(\\frac{4}{3}\\)。`
            },
            '矩陣': {
                question: '計算矩陣 \\(\\begin{pmatrix} 2 & 1 \\\\ 0 & 3 \\end{pmatrix}^{10}\\) 的特徵值',
                answer: `解：\\
                1. 矩陣 \\(A = \\begin{pmatrix} 2 & 1 \\\\ 0 & 3 \\end{pmatrix}\\) 是上三角矩陣，特徵值為主對角線元素：\\(\\lambda_1 = 2\\)，\\(\\lambda_2 = 3\\)\\
                2. 矩陣冪的特徵值：\\(A^{10}\\) 的特徵值為 \\(\\lambda_1^{10} = 2^{10} = 1024\\)，\\(\\lambda_2^{10} = 3^{10} = 59049\\)\\
                所以特徵值為 1024 和 59049。`
            }
        };

// 添加用户消息

        function addUserMessage(message) {
            const messageElement = document.createElement('div');
            messageElement.className = 'message user-message';
            messageElement.innerHTML = `<p>${message}</p >`;
            chatContainer.appendChild(messageElement);
            chatContainer.scrollTop = chatContainer.scrollHeight;
        }
        
        // 添加AI消息
        function addAiMessage(message, withThinking = true) {
            if (withThinking) {
                const thinkingElement = document.createElement('div');
                thinkingElement.className = 'thinking';
                thinkingElement.textContent = '思考中';
                chatContainer.appendChild(thinkingElement);
                chatContainer.scrollTop = chatContainer.scrollHeight;
                
                setTimeout(() => {
                    chatContainer.removeChild(thinkingElement);
                    addFinalAiMessage(message);
                }, 1500);
            } else {
                addFinalAiMessage(message);
            }
        }
        
        function addFinalAiMessage(message) {
            const messageElement = document.createElement('div');
            messageElement.className = 'message ai-message';
            messageElement.innerHTML = `<p>${message.replace(/\n/g, '<br>')}</p >`;
            chatContainer.appendChild(messageElement);
            chatContainer.scrollTop = chatContainer.scrollHeight;
            
            // 重新渲染MathJax
            if (window.MathJax) {
                MathJax.typesetPromise([messageElement]).catch(err => console.log('MathJax error:', err));
            }
        }
        
        // 處理用户輸入
        function handleUserInput() {
            const message = userInput.value.trim();
            if (message === '') return;
            
            addUserMessage(message);
            userInput.value = '';
            
            // 檢查是否是簡單數學表達式
            const simpleMathRegex = /^[\d+\-*/().√π^!≈×÷\s]+$/;
            if (simpleMathRegex.test(message)) {
                const result = evaluateMathExpression(message);
                addAiMessage(`<div class="simple-calc">
                    <p>計算表達式：${message}</p >
                    <p class="calc-result">結果：${result}</p >
                </div>`, false);
                return;
            }
            
            // 查找匹配的問題類型
            let foundMatch = false;
            for (const [key, value] of Object.entries(mathResponses)) {
                if (message.toLowerCase().includes(key.toLowerCase())) {
                    addAiMessage(value.answer);
                    foundMatch = true;
                    break;
                }
            }
            
            // 如果沒有匹配到預設問題
            if (!foundMatch) {
                if (message.includes('？') || message.includes('?')) {
                    addAiMessage('這是一個很好的數學問題！雖然我的知識庫中沒有完全匹配的答案，但根據我的分析，這個問題的解答思路應該是...<br><br>（注：這是一個演示版本，完整版將能夠解答更多複雜問題）');
                } else {
                    addAiMessage('請提出一個具體的數學問題，比如：<br>• 基礎運算：1+1, 15×23, √144, 2³, 5! 等<br>• 解方程：\\(x^2 - 5x + 6 = 0\\)<br>• 計算圓的面積<br>• 求函數的導數<br>• 概率計算問題');
                }
            }
        }
        
        // 事件監聽
        sendButton.addEventListener('click', handleUserInput);
        userInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                handleUserInput();
            }
        });
        
        // 初始化時添加示例問題
        setTimeout(() => {
            addAiMessage('讓我展示一下我的全面能力，既能解決複雜問題，也能處理基礎運算：', false);
            
            // 展示基礎運算能力
            setTimeout(() => {
                const basicExpressions = [
                    '1+1',
                    '15×23',
                    '√144',
                    '2³',
                    '5!',
                    'π'
                ];
                
                basicExpressions.forEach(expr => {
                    setTimeout(() => {
                        addUserMessage(expr);
                        
                        setTimeout(() => {
                            const result = evaluateMathExpression(expr);
                            addAiMessage(`<div class="simple-calc">
                                <p>計算表達式：${expr}</p >
                                <p class="calc-result">結果：${result}</p >
                            </div>`, false);
                        }, 800);
                    }, basicExpressions.indexOf(expr) * 2000);
                });
                
                // 然後展示覆雜問題
                setTimeout(() => {
                    const complexProblems = Object.values(mathResponses).slice(0, 3);
                    complexProblems.forEach(problem => {
                        setTimeout(() => {
                            addUserMessage(problem.question);
                            
                            setTimeout(() => {
                                addAiMessage(problem.answer, false);
                            }, 1000);
                        }, (basicExpressions.length * 2000) + (complexProblems.indexOf(problem) * 3000));
                    });
                }, 1000);
            }, 1000);
        }, 2000);
    });
</script>

</body>
</html>

HTML
user avatar liu_chen Avatar aixiaodewulongcha_ehoerm Avatar thinkerdjx Avatar feixianghelanren Avatar 2763926672 Avatar
Favorites 5 users favorite the story!
Favorites

Add a new Comments

Some HTML is okay.