使用DeepSeek制作初中数学教学课件的经验分享

老刘博客2025-07-072025-07-07

　　今天从一个蝴蝶号的博主视频里，学到了一个使用deep seek制作教学课件的方法，第一次面对面的感觉到了deep seek的强大，把过程分享给大家，希望能够给大家带来不一样的体验。

　　我们进入deep seek的官方页面之后，通过自己的账号进入对话页面，再给出的对话框中输入如下问题：

我是一名初中数学教师，想用动画演示二次函数的性质，需要在给出的动画中可以修改二次项系数、一次项系数、常数项的数值，可以通过修改二次函数的顶点坐标来调整抛物线的位置，请帮我制作一个动画进行演示，并以HTML的格式输出，页面也提供可以直接下载的按钮。

　　这段文字的主要意义在于三个方面：1.我是谁；2.我想做什么；3.我的要求是什么。类似的文案自己可以思考对应来写，但是最后一句话需要特别注意

1	请帮我制作一个动画进行演示，并以HTML的格式输出，页面也提供可以直接下载的按钮

　　这里注意动画的输出格式和提供部分下载按钮，然后选择我们选择“深度思考”模式，之后deep seek就开始撰写代码，给出的代码如下

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二次函数动态演示工具</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
            color: #fff;
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
        }
        
        header {
            text-align: center;
            padding: 20px 0;
            margin-bottom: 20px;
        }
        
        h1 {
            font-size: 2.8rem;
            margin-bottom: 10px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }
        
        .subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
            max-width: 800px;
            margin: 0 auto;
        }
        
        .download-btn {
            display: inline-block;
            background: #ff6b6b;
            color: white;
            padding: 12px 30px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: bold;
            margin-top: 20px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            border: none;
            cursor: pointer;
            font-size: 1.1rem;
        }
        
        .download-btn:hover {
            background: #ff5252;
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.3);
        }
        
        .content {
            display: flex;
            gap: 25px;
            margin-bottom: 30px;
        }
        
        .control-panel {
            flex: 1;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(10px);
        }
        
        .panel-title {
            font-size: 1.8rem;
            margin-bottom: 20px;
            text-align: center;
            color: #ffd166;
            border-bottom: 2px solid rgba(255, 255, 255, 0.2);
            padding-bottom: 15px;
        }
        
        .control-group {
            margin-bottom: 25px;
        }
        
        .control-title {
            font-size: 1.3rem;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }
        
        .control-title i {
            margin-right: 10px;
            color: #ffd166;
        }
        
        .slider-container {
            margin-bottom: 20px;
        }
        
        .slider-label {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
        }
        
        input[type="range"] {
            width: 100%;
            height: 10px;
            border-radius: 5px;
            background: rgba(255, 255, 255, 0.2);
            outline: none;
            -webkit-appearance: none;
        }
        
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: #ffd166;
            cursor: pointer;
            box-shadow: 0 0 5px rgba(0,0,0,0.5);
        }
        
        input[type="number"] {
            background: rgba(255, 255, 255, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: white;
            padding: 8px 12px;
            border-radius: 8px;
            font-size: 1.1rem;
            width: 100%;
            margin-top: 5px;
        }
        
        .canvas-container {
            flex: 2;
            background: rgba(0, 0, 0, 0.25);
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
            position: relative;
        }
        
        canvas {
            background: #0c1e3e;
            display: block;
        }
        
        .info-panel {
            flex: 1;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(10px);
        }
        
        .function-display {
            font-size: 2.2rem;
            text-align: center;
            margin: 30px 0;
            font-family: 'Cambria Math', serif;
            color: #ffd166;
            min-height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .properties {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            padding: 20px;
            margin-top: 25px;
        }
        
        .prop-title {
            font-size: 1.4rem;
            margin-bottom: 15px;
            color: #ffd166;
            text-align: center;
        }
        
        .prop-item {
            padding: 12px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
        }
        
        .prop-label {
            flex: 1;
            font-weight: bold;
        }
        
        .prop-value {
            flex: 1;
            text-align: right;
            font-family: monospace;
            color: #ffd166;
        }
        
        .instructions {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            padding: 20px;
            margin-top: 25px;
            font-size: 0.95rem;
            line-height: 1.6;
        }
        
        .instructions ul {
            padding-left: 20px;
            margin-top: 10px;
        }
        
        .instructions li {
            margin-bottom: 8px;
        }
        
        .grid-lines {
            position: absolute;
            top: 0;
            left: 0;
            pointer-events: none;
        }
        
        @media (max-width: 1100px) {
            .content {
                flex-direction: column;
            }
            
            .canvas-container {
                order: -1;
                margin-bottom: 25px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>二次函数动态演示工具</h1>
            <p class="subtitle">通过调整二次项系数、一次项系数和常数项，或直接修改顶点坐标，实时观察抛物线图像的变化</p>
            <button class="download-btn" id="downloadBtn">下载当前图像</button>
        </header>
        
        <div class="content">
            <div class="control-panel">
                <h2 class="panel-title">函数参数控制</h2>
                
                <div class="control-group">
                    <h3 class="control-title"><i>➊</i> 一般形式参数</h3>
                    <div class="slider-container">
                        <div class="slider-label">
                            <span>二次项系数 (a):</span>
                            <span id="a-value">1.00</span>
                        </div>
                        <input type="range" id="a-slider" min="-5" max="5" step="0.01" value="1">
                    </div>
                    
                    <div class="slider-container">
                        <div class="slider-label">
                            <span>一次项系数 (b):</span>
                            <span id="b-value">0.00</span>
                        </div>
                        <input type="range" id="b-slider" min="-10" max="10" step="0.01" value="0">
                    </div>
                    
                    <div class="slider-container">
                        <div class="slider-label">
                            <span>常数项 (c):</span>
                            <span id="c-value">0.00</span>
                        </div>
                        <input type="range" id="c-slider" min="-10" max="10" step="0.01" value="0">
                    </div>
                </div>
                
                <div class="control-group">
                    <h3 class="control-title"><i>➋</i> 顶点形式参数</h3>
                    <div class="slider-container">
                        <div class="slider-label">
                            <span>顶点横坐标 (h):</span>
                            <span id="h-value">0.00</span>
                        </div>
                        <input type="range" id="h-slider" min="-5" max="5" step="0.01" value="0">
                    </div>
                    
                    <div class="slider-container">
                        <div class="slider-label">
                            <span>顶点纵坐标 (k):</span>
                            <span id="k-value">0.00</span>
                        </div>
                        <input type="range" id="k-slider" min="-5" max="5" step="0.01" value="0">
                    </div>
                </div>
                
                <div class="control-group">
                    <h3 class="control-title"><i>➌</i> 直接输入参数</h3>
                    <div class="slider-container">
                        <label for="a-input">二次项系数 (a):</label>
                        <input type="number" id="a-input" step="0.01" value="1">
                    </div>
                    
                    <div class="slider-container">
                        <label for="b-input">一次项系数 (b):</label>
                        <input type="number" id="b-input" step="0.01" value="0">
                    </div>
                    
                    <div class="slider-container">
                        <label for="c-input">常数项 (c):</label>
                        <input type="number" id="c-input" step="0.01" value="0">
                    </div>
                </div>
            </div>
            
            <div class="canvas-container">
                <canvas id="graphCanvas" width="800" height="600"></canvas>
            </div>
            
            <div class="info-panel">
                <h2 class="panel-title">函数信息</h2>
                
                <div class="function-display" id="functionDisplay">
                    f(x) = x²
                </div>
                
                <div class="properties">
                    <h3 class="prop-title">函数性质</h3>
                    <div class="prop-item">
                        <div class="prop-label">开口方向:</div>
                        <div class="prop-value" id="direction">向上</div>
                    </div>
                    <div class="prop-item">
                        <div class="prop-label">顶点坐标:</div>
                        <div class="prop-value" id="vertex">(0.00, 0.00)</div>
                    </div>
                    <div class="prop-item">
                        <div class="prop-label">对称轴:</div>
                        <div class="prop-value" id="axis">x = 0.00</div>
                    </div>
                    <div class="prop-item">
                        <div class="prop-label">y轴截距:</div>
                        <div class="prop-value" id="y-intercept">0.00</div>
                    </div>
                    <div class="prop-item">
                        <div class="prop-label">判别式 (Δ):</div>
                        <div class="prop-value" id="discriminant">0.00</div>
                    </div>
                    <div class="prop-item">
                        <div class="prop-label">与x轴交点:</div>
                        <div class="prop-value" id="x-intercepts">(0.00, 0.00)</div>
                    </div>
                </div>
                
                <div class="instructions">
                    <h3>使用说明：</h3>
                    <ul>
                        <li>通过滑块或输入框调整二次函数参数</li>
                        <li>修改一般形式参数(a,b,c)或顶点形式参数(h,k)</li>
                        <li>观察函数图像和性质的实时变化</li>
                        <li>点击"下载当前图像"保存为PNG文件</li>
                        <li>在坐标系中，每个网格代表1个单位长度</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 获取DOM元素
        const canvas = document.getElementById('graphCanvas');
        const ctx = canvas.getContext('2d');
        
        // 获取控制元素
        const aSlider = document.getElementById('a-slider');
        const bSlider = document.getElementById('b-slider');
        const cSlider = document.getElementById('c-slider');
        const hSlider = document.getElementById('h-slider');
        const kSlider = document.getElementById('k-slider');
        
        const aInput = document.getElementById('a-input');
        const bInput = document.getElementById('b-input');
        const cInput = document.getElementById('c-input');
        
        const aValue = document.getElementById('a-value');
        const bValue = document.getElementById('b-value');
        const cValue = document.getElementById('c-value');
        const hValue = document.getElementById('h-value');
        const kValue = document.getElementById('k-value');
        
        const functionDisplay = document.getElementById('functionDisplay');
        const directionElem = document.getElementById('direction');
        const vertexElem = document.getElementById('vertex');
        const axisElem = document.getElementById('axis');
        const yInterceptElem = document.getElementById('y-intercept');
        const discriminantElem = document.getElementById('discriminant');
        const xInterceptsElem = document.getElementById('x-intercepts');
        const downloadBtn = document.getElementById('downloadBtn');
        
        // 函数参数
        let a = 1;
        let b = 0;
        let c = 0;
        
        // 坐标系设置
        const originX = canvas.width / 2;
        const originY = canvas.height / 2;
        const scale = 40;  // 每个单位对应的像素数
        
        // 初始化
        function init() {
            updateFromStandard();
            draw();
            setupEventListeners();
        }
        
        // 设置事件监听器
        function setupEventListeners() {
            // 滑块事件
            aSlider.addEventListener('input', function() {
                a = parseFloat(this.value);
                aValue.textContent = a.toFixed(2);
                aInput.value = a;
                updateFromStandard();
                draw();
            });
            
            bSlider.addEventListener('input', function() {
                b = parseFloat(this.value);
                bValue.textContent = b.toFixed(2);
                bInput.value = b;
                updateFromStandard();
                draw();
            });
            
            cSlider.addEventListener('input', function() {
                c = parseFloat(this.value);
                cValue.textContent = c.toFixed(2);
                cInput.value = c;
                updateFromStandard();
                draw();
            });
            
            hSlider.addEventListener('input', function() {
                const h = parseFloat(this.value);
                hValue.textContent = h.toFixed(2);
                updateFromVertex(h, k);
                draw();
            });
            
            kSlider.addEventListener('input', function() {
                const k = parseFloat(this.value);
                kValue.textContent = k.toFixed(2);
                updateFromVertex(h, k);
                draw();
            });
            
            // 输入框事件
            aInput.addEventListener('input', function() {
                a = parseFloat(this.value) || 0;
                aSlider.value = a;
                aValue.textContent = a.toFixed(2);
                updateFromStandard();
                draw();
            });
            
            bInput.addEventListener('input', function() {
                b = parseFloat(this.value) || 0;
                bSlider.value = b;
                bValue.textContent = b.toFixed(2);
                updateFromStandard();
                draw();
            });
            
            cInput.addEventListener('input', function() {
                c = parseFloat(this.value) || 0;
                cSlider.value = c;
                cValue.textContent = c.toFixed(2);
                updateFromStandard();
                draw();
            });
            
            // 下载按钮事件
            downloadBtn.addEventListener('click', function() {
                const link = document.createElement('a');
                link.download = `二次函数-${a.toFixed(1)}x²${b >= 0 ? '+' : ''}${b.toFixed(1)}x${c >= 0 ? '+' : ''}${c.toFixed(1)}.png`;
                link.href = canvas.toDataURL('image/png');
                link.click();
            });
        }
        
        // 根据一般形式更新顶点形式
        function updateFromStandard() {
            // 计算顶点坐标 (h, k)
            const h = -b / (2 * a);
            const k = c - (b * b) / (4 * a);
            
            hSlider.value = h;
            kSlider.value = k;
            hValue.textContent = h.toFixed(2);
            kValue.textContent = k.toFixed(2);
            
            updateFunctionDisplay();
            updateProperties();
        }
        
        // 根据顶点形式更新一般形式
        function updateFromVertex(h, k) {
            // 顶点形式: y = a(x - h)^2 + k
            // 展开: y = a(x² - 2hx + h²) + k
            //      = ax² - 2ahx + ah² + k
            a = a; // a保持不变
            b = -2 * a * h;
            c = a * h * h + k;
            
            aSlider.value = a;
            bSlider.value = b;
            cSlider.value = c;
            
            aValue.textContent = a.toFixed(2);
            bValue.textContent = b.toFixed(2);
            cValue.textContent = c.toFixed(2);
            
            aInput.value = a;
            bInput.value = b;
            cInput.value = c;
            
            updateFunctionDisplay();
            updateProperties();
        }
        
        // 更新函数显示
        function updateFunctionDisplay() {
            let expression = 'f(x) = ';
            
            if (a !== 0) {
                if (a === -1) expression += '-';
                else if (a !== 1) expression += a.toFixed(2);
                expression += 'x²';
            }
            
            if (b !== 0) {
                expression += b < 0 ? ' - ' : ' + ';
                if (Math.abs(b) !== 1) expression += Math.abs(b).toFixed(2);
                expression += 'x';
            }
            
            if (c !== 0) {
                expression += c < 0 ? ' - ' : ' + ';
                expression += Math.abs(c).toFixed(2);
            }
            
            if (a === 0 && b === 0 && c === 0) {
                expression = 'f(x) = 0';
            }
            
            functionDisplay.textContent = expression;
        }
        
        // 更新函数性质
        function updateProperties() {
            // 开口方向
            directionElem.textContent = a > 0 ? '向上' : a < 0 ? '向下' : '非二次函数';
            
            // 顶点坐标
            const h = -b / (2 * a);
            const k = c - (b * b) / (4 * a);
            vertexElem.textContent = `(${h.toFixed(2)}, ${k.toFixed(2)})`;
            
            // 对称轴
            axisElem.textContent = `x = ${h.toFixed(2)}`;
            
            // y轴截距
            yInterceptElem.textContent = c.toFixed(2);
            
            // 判别式
            const discriminant = b * b - 4 * a * c;
            discriminantElem.textContent = discriminant.toFixed(2);
            
            // 与x轴交点
            if (a === 0) {
                xInterceptsElem.textContent = '非二次函数';
            } else if (discriminant > 0) {
                const x1 = (-b + Math.sqrt(discriminant)) / (2 * a);
                const x2 = (-b - Math.sqrt(discriminant)) / (2 * a);
                xInterceptsElem.textContent = `(${x1.toFixed(2)}, 0) 和 (${x2.toFixed(2)}, 0)`;
            } else if (discriminant === 0) {
                const x = -b / (2 * a);
                xInterceptsElem.textContent = `(${x.toFixed(2)}, 0)`;
            } else {
                xInterceptsElem.textContent = '无实数解';
            }
        }
        
        // 绘制坐标系和函数图像
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // 绘制网格
            drawGrid();
            
            // 绘制坐标轴
            drawAxes();
            
            // 绘制函数图像
            drawFunction();
        }
        
        // 绘制网格
        function drawGrid() {
            ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)';
            ctx.lineWidth = 1;
            
            // 垂直线
            for (let x = originX % scale; x < canvas.width; x += scale) {
                ctx.beginPath();
                ctx.moveTo(x, 0);
                ctx.lineTo(x, canvas.height);
                ctx.stroke();
            }
            
            // 水平线
            for (let y = originY % scale; y < canvas.height; y += scale) {
                ctx.beginPath();
                ctx.moveTo(0, y);
                ctx.lineTo(canvas.width, y);
                ctx.stroke();
            }
        }
        
        // 绘制坐标轴
        function drawAxes() {
            ctx.strokeStyle = '#ffffff';
            ctx.lineWidth = 2;
            
            // x轴
            ctx.beginPath();
            ctx.moveTo(0, originY);
            ctx.lineTo(canvas.width, originY);
            ctx.stroke();
            
            // y轴
            ctx.beginPath();
            ctx.moveTo(originX, 0);
            ctx.lineTo(originX, canvas.height);
            ctx.stroke();
            
            // 绘制箭头
            drawArrow(originX, 0, originX, 10);
            drawArrow(canvas.width - 10, originY, canvas.width, originY);
            
            // 绘制刻度
            ctx.fillStyle = '#ffffff';
            ctx.font = '12px Arial';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'top';
            
            // x轴刻度
            for (let x = -Math.floor(originX / scale); x <= Math.floor((canvas.width - originX) / scale); x++) {
                if (x === 0) continue;
                const px = originX + x * scale;
                ctx.beginPath();
                ctx.moveTo(px, originY - 5);
                ctx.lineTo(px, originY + 5);
                ctx.stroke();
                
                ctx.fillText(x.toString(), px, originY + 8);
            }
            
            // y轴刻度
            ctx.textAlign = 'right';
            ctx.textBaseline = 'middle';
            for (let y = -Math.floor(originY / scale); y <= Math.floor((canvas.height - originY) / scale); y++) {
                if (y === 0) continue;
                const py = originY - y * scale;
                ctx.beginPath();
                ctx.moveTo(originX - 5, py);
                ctx.lineTo(originX + 5, py);
                ctx.stroke();
                
                ctx.fillText(y.toString(), originX - 8, py);
            }
            
            // 原点标记
            ctx.fillText('O', originX - 10, originY + 15);
            
            // 轴标签
            ctx.textAlign = 'right';
            ctx.textBaseline = 'bottom';
            ctx.fillText('y', originX - 10, 15);
            
            ctx.textAlign = 'left';
            ctx.fillText('x', canvas.width - 10, originY - 10);
        }
        
        // 绘制箭头
        function drawArrow(fromX, fromY, toX, toY) {
            const headLength = 10;
            const angle = Math.atan2(toY - fromY, toX - fromX);
            
            ctx.beginPath();
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }
        
        // 绘制函数图像
        function drawFunction() {
            if (a === 0 && b === 0 && c === 0) return;
            
            ctx.strokeStyle = '#ffd166';
            ctx.lineWidth = 3;
            ctx.beginPath();
            
            const step = 0.1;
            let isFirstPoint = true;
            
            for (let x = -10; x <= 10; x += step) {
                const screenX = originX + x * scale;
                const y = a * x * x + b * x + c;
                
                // 如果y值过大，跳过这个点
                if (Math.abs(y) > 100) continue;
                
                const screenY = originY - y * scale;
                
                if (isFirstPoint) {
                    ctx.moveTo(screenX, screenY);
                    isFirstPoint = false;
                } else {
                    ctx.lineTo(screenX, screenY);
                }
            }
            
            ctx.stroke();
            
            // 绘制顶点
            const h = -b / (2 * a);
            const k = a * h * h + b * h + c;
            const vertexX = originX + h * scale;
            const vertexY = originY - k * scale;
            
            ctx.fillStyle = '#ef476f';
            ctx.beginPath();
            ctx.arc(vertexX, vertexY, 6, 0, Math.PI * 2);
            ctx.fill();
            
            // 绘制顶点标签
            ctx.fillStyle = '#ffffff';
            ctx.font = 'bold 14px Arial';
            ctx.textAlign = 'left';
            ctx.textBaseline = 'bottom';
            ctx.fillText(`顶点 (${h.toFixed(2)}, ${k.toFixed(2)})`, vertexX + 10, vertexY - 10);
        }
        
        // 初始化
        init();
    </script>
</body>
</html>

　　实话实说，代码一句看不懂，但是给出的动画效果太震撼了

　　希望能够帮助教师朋友，在这里分享一下deep seek的官方链接：

1	https://chat.deepseek.com/