从通宵加班到3分钟搞定：用AI做课件告别烦琐动画设置

AI科技 2025年10月15日 03:47 0 admin

放学后，喧闹的校园渐渐安静下来。办公室里只剩李老师还对着屏幕愁眉紧锁。“难道真的要做一百二十个动画关键帧？！完了完了，明天王主任听课，我这个时分秒课件怕是要砸锅……”

菲菲背着包正要下班，透过玻璃窗，她看到了近乎绝望的李老师的脸。

“怎么啦？李老师！”菲菲凑近一看，噗嗤笑出声，“您该不会……在手动设置六十个旋转动画吧？”

“不然呢？”李老师指着屏幕上密密麻麻的动画设置窗口，“一秒一个动画，一分钟六十秒，一小时六十分……这得做到天亮啊！我已经晕得都搞不清哪个是哪个了！”

菲菲拉开旁边椅子坐下：“李老师，您这个办法老土了。现在是AI时代了，用AI编程分分钟就能搞定了！”

菲菲指尖在键盘轻敲，打开#deepseek#网站，“把你要制作课件的详细功能告诉它就行——比如这样——”

她边说边打字，一行行指令流水般倾泻：生成一个时分秒动态演示的HTML代码，要求实现如下功能：#让AI触手可及#课件

1、画一个时钟的钟面，钟面用淡蓝色的渐变色填充。标上从1至12的数字。画出时针、分针、秒针，分别设置为橙色、蓝色、红色，画出60个小刻度，设置为黑色。页面背景用back.jpg，设置一个按钮，点击后能全屏显示网页。

2、制作演示1秒钟的功能，点击按钮，实现秒针从12开始转动，转动1秒后停下，点击按钮后继续转动1秒钟，并配上读秒的声音效果，声音的文件名是：second.mp3。

3、制作演示1分钟=60秒的功能，点击按钮实现，秒针从12开始转动1圈，共转动实际时间60秒，转动过程中，相应的60个小刻度同时显示成红色，同时分针应转动1分钟。秒针转动时配上读秒的声音效果。

4、制作演示1小时=60分的功能，点击按钮实现，分针从12开始转动1圈，相应的小刻度同时显示成红色，时针转动1大格。不显示秒针。

5、设置一个暂停按钮，在演示1分钟=60秒、1小时=60分时，按暂停可停止，再按继续转动。

随着回车键清脆一响，屏幕上飞快地跳出许多代码。

“这就……好了？”李老师难以置信地看着菲菲把代码保存为HTML文件。双击运行，一个精致时钟跃入眼帘：淡蓝渐变的表盘上，红针轻跳、蓝针缓移、橙针遥相呼应。

“滴答。”

可控制的1秒演示

演示1分=60秒

演示1小时=60分

随着真实秒声响起，李老师激动得声音发颤：“这、这效果比我做一周的PPT还流畅！”

“技术从来不是门槛，”菲菲托着腮笑，“难的是想到能用新工具突破旧思路。”

窗外晚霞漫天，映出李老师舒展的笑脸。

原来，从束手无策到游刃有余，只隔着一句勇敢的提问。

第二天的公开课上，李老师的“星空时钟”惊艳全场。王主任特意留下录像作示范课件。

下面就是这段代码了，老师们可以直接复制使用了，或者分享给其他老师哦。点亮小心心，赞一下聪明美丽的菲菲哟。

<!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="UTF-8">    <title>时间单位换算演示（读秒音效版）</title>    <style>        /* 样式代码与之前保持一致 */        * {            margin: 0;            padding: 0;            box-sizing: border-box;        }        body {            margin: 0;            padding: 0;            background-image: url('back.jpg');            background-size: cover;            background-position: center;            height: 100vh;            display: flex;            justify-content: center;            align-items: center;            overflow: hidden;        }        .container {            text-align: center;            padding: 20px;            border-radius: 10px;            background-color: rgba(255, 255, 255, 0.8);            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);        }        #clockCanvas {            border: 3px solid #333;            border-radius: 50%;            background-color: #fff;        }        .controls {            margin-top: 20px;            display: flex;            justify-content: center;            gap: 10px;            flex-wrap: wrap;        }        button {            padding: 10px 20px;            font-size: 16px;            cursor: pointer;            border: none;            border-radius: 5px;            color: white;            transition: all 0.3s;        }        button:hover {            transform: scale(1.05);        }        #minSecBtn { background-color: #4CAF50; }        #hourMinBtn { background-color: #2196F3; }        #pauseBtn { background-color: #f44336; }        #singleSecBtn { background-color: #ff9800; }        #fullscreenBtn { background-color: #9C27B0; }        .time-display {            margin-top: 20px;            font-family: Arial, sans-serif;            font-size: 24px;            font-weight: bold;        }        .info-text {            margin-top: 10px;            font-size: 18px;            color: #333;            min-height: 22px;        }    </style></head><body>    <div class="container">        <canvas id="clockCanvas" width="600" height="600"></canvas>        <div class="time-display">            <span id="hour">00</span>:<span id="minute">00</span>:<span id="second">00</span>        </div>        <div class="info-text" id="info">请选择演示模式</div>        <div class="controls">             <button id="singleSecBtn">演示1秒</button>             <button id="minSecBtn">1分钟=60秒</button>            <button id="hourMinBtn">1小时=60分</button>              <button id="pauseBtn">暂停</button>            <button id="fullscreenBtn">全屏显示</button>        </div>    </div>    <!-- 读秒音效（使用单个"second.mp3"文件，每秒播放一次） -->    <audio id="secondSound" preload="auto">        <source src="second.mp3" type="audio/mpeg"> <!-- 需准备短促的"秒"提示音 -->    </audio>    <script>        const canvas = document.getElementById('clockCanvas');        const ctx = canvas.getContext('2d');        const centerX = canvas.width / 2;        const centerY = canvas.height / 2;        const radius = 280;        // 新增：记录上一秒的秒数（用于触发音效）        let lastSecond = -1;         let animationId = null;        let isRunning = false;        let isPaused = false;        let elapsedTime = 0;        let demoType = null;        let singleSecProgress = 0;        const secondSound = document.getElementById('secondSound');        let lastTime = 0;        let demoDuration;        const hourDisplay = document.getElementById('hour');        const minuteDisplay = document.getElementById('minute');        const secondDisplay = document.getElementById('second');        const infoText = document.getElementById('info');        const pauseBtn = document.getElementById('pauseBtn');        const fullscreenBtn = document.getElementById('fullscreenBtn');        initClock();        function initClock() {            drawClock(0);        }        function drawClock(progress) {            ctx.clearRect(0, 0, canvas.width, canvas.height);            // 绘制钟面渐变            const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, radius);            gradient.addColorStop(0, '#e6f7ff');            gradient.addColorStop(1, '#b3e0ff');            ctx.beginPath();            ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);            ctx.fillStyle = gradient;            ctx.fill();            ctx.strokeStyle = '#333';            ctx.lineWidth = 4;            ctx.stroke();            // 绘制小时刻度            for (let i = 0; i < 12; i++) {                const angle = (i * 30 - 90) * Math.PI / 180;                const outerRadius = radius - 10;                const innerRadius = radius - 30;                                ctx.beginPath();                ctx.moveTo(centerX + innerRadius * Math.cos(angle), centerY + innerRadius * Math.sin(angle));                ctx.lineTo(centerX + outerRadius * Math.cos(angle), centerY + outerRadius * Math.sin(angle));                ctx.lineWidth = 5;                ctx.strokeStyle = '#333';                ctx.stroke();                const numRadius = radius - 50;                const numX = centerX + numRadius * Math.cos(angle);                const numY = centerY + numRadius * Math.sin(angle);                ctx.font = 'bold 24px Arial';                ctx.fillStyle = '#333';                ctx.textAlign = 'center';                ctx.textBaseline = 'middle';                ctx.fillText(i === 0 ? 12 : i, numX, numY);            }            // 绘制分钟刻度            let activeMarks = 0;            if (demoType === 'minSec') {                activeMarks = Math.floor(progress);                // 核心修改：1分=60秒模式下，每秒播放一次音效                const currentSecond = activeMarks;                if (                    isRunning && !isPaused && // 仅在运行且未暂停时播放                    currentSecond > lastSecond && // 确保每秒只触发一次                    currentSecond <= 60 // 限制在演示时长内                ) {                    secondSound.currentTime = 0; // 重置音效播放位置（避免叠加）                    secondSound.play().catch(e => console.log('音效播放失败:', e));                    lastSecond = currentSecond; // 更新上一秒记录                }            } else if (demoType === 'hourMin') {                activeMarks = Math.floor(progress * 60 / demoDuration);            } else if (demoType === 'singleSec') {                activeMarks = singleSecProgress;            }            for (let j = 0; j < 60; j++) {                if (j % 5 === 0) continue;                const angle = (j * 6 - 90) * Math.PI / 180;                const outerRadius = radius - 10;                const innerRadius = radius - 20;                const isActive = j <= activeMarks;                ctx.beginPath();                ctx.moveTo(centerX + innerRadius * Math.cos(angle), centerY + innerRadius * Math.sin(angle));                ctx.lineTo(centerX + outerRadius * Math.cos(angle), centerY + outerRadius * Math.sin(angle));                ctx.lineWidth = isActive ? 3 : 2;                ctx.strokeStyle = isActive ? '#ff0000' : '#999';                ctx.stroke();            }            // 指针角度计算            let secondAngle = 0, minuteAngle = 0, hourAngle = 0;            if (demoType === 'minSec') {                secondAngle = (progress % 60) * 6 * Math.PI / 180; // 6度/秒（60秒转1圈）                minuteAngle = (progress / 60) * 6 * Math.PI / 180;            } else if (demoType === 'hourMin') {                minuteAngle = (progress % 120) * 3 * Math.PI / 180; // 3度/秒（120秒转1圈）                hourAngle = (progress / 120) * 30 * Math.PI / 180;            } else if (demoType === 'singleSec') {                secondAngle = singleSecProgress * 6 * Math.PI / 180;            }            // 绘制指针（时针橙色、分针蓝色，无头部圆点）            drawPointer(hourAngle, radius * 0.5, 6, '#ff9800');            drawPointer(minuteAngle, radius * 0.7, 4, '#0000ff');            if (demoType !== 'hourMin') {                drawPointer(secondAngle, radius * 0.85, 2, '#ff0000');            }            // 绘制中心点            ctx.beginPath();            ctx.arc(centerX, centerY, 8, 0, Math.PI * 2);            ctx.fillStyle = '#333';            ctx.fill();            updateTimeDisplay(progress);            updateInfoText(progress);        }        function drawPointer(angle, length, width, color) {            ctx.save();            ctx.translate(centerX, centerY);            ctx.rotate(angle);            ctx.beginPath();            ctx.moveTo(0, 15);            ctx.lineTo(0, -length);            ctx.lineWidth = width;            ctx.strokeStyle = color;            ctx.lineCap = 'round';            ctx.stroke();            ctx.restore();        }        function updateTimeDisplay(progress) {            let hours = 0, minutes = 0, seconds = 0;            if (demoType === 'minSec') {                seconds = Math.floor(progress) % 60;                minutes = Math.floor(progress / 60);            } else if (demoType === 'hourMin') {                minutes = Math.floor(progress) % 60;                hours = Math.floor(progress / 60);            } else if (demoType === 'singleSec') {                seconds = singleSecProgress;            }            hourDisplay.textContent = hours.toString().padStart(2, '0');            minuteDisplay.textContent = minutes.toString().padStart(2, '0');            secondDisplay.textContent = seconds.toString().padStart(2, '0');        }        function updateInfoText(progress) {            if (!demoType) {                infoText.textContent = '请选择演示模式';            } else if (demoType === 'singleSec') {                infoText.textContent = `演示1秒：当前${singleSecProgress}秒（点击"演示1秒"继续）`;            } else if (progress >= demoDuration) {                infoText.textContent = demoType === 'minSec'                     ? '演示结束：1分钟=60秒'                     : '演示结束：1小时=60分';                stopAnimation();            } else {                infoText.textContent = demoType === 'minSec'                     ? `1分钟=60秒：已演示${Math.floor(progress)}秒/${demoDuration}秒`                     : `1小时=60分：已演示${Math.floor(progress)}秒/${demoDuration}秒`;            }        }        function animate(timestamp) {            if (!lastTime) lastTime = timestamp;            const deltaTime = (timestamp - lastTime) / 1000;            lastTime = timestamp;            if (!isRunning || isPaused) return;            elapsedTime += deltaTime;            if (elapsedTime >= demoDuration) {                elapsedTime = demoDuration;                drawClock(elapsedTime);                stopAnimation();                return;            }            drawClock(elapsedTime);            animationId = requestAnimationFrame(animate);        }        function startAnimation(type) {            if (isRunning) stopAnimation();            demoType = type;            demoDuration = type === 'minSec' ? 60 : 120;            isRunning = true;            isPaused = false;            elapsedTime = 0;            lastTime = 0;            lastSecond = -1; // 重置上一秒记录（避免演示重启时音效错乱）            pauseBtn.textContent = '暂停';            requestAnimationFrame(animate);        }        function stopAnimation() {            isRunning = false;            isPaused = false;            cancelAnimationFrame(animationId);            pauseBtn.textContent = '暂停';        }        function togglePause() {            if (!isRunning) return;            isPaused = !isPaused;            pauseBtn.textContent = isPaused ? '继续' : '暂停';            if (!isPaused) {                lastTime = 0;                requestAnimationFrame(animate);            }        }        function startSingleSecDemo() {            if (singleSecProgress >= 60) {                infoText.textContent = '单秒演示已结束（最多60秒）';                return;            }            demoType = 'singleSec';            singleSecProgress++;            secondSound.play().catch(e => console.log('音效播放失败:', e));            drawClock(0);        }        function toggleFullscreen() {            if (!document.fullscreenElement) {                document.documentElement.requestFullscreen().catch(err => {                    infoText.textContent = `全屏请求失败: ${err.message}`;                });            } else {                if (document.exitFullscreen) {                    document.exitFullscreen();                }            }        }        // 按钮事件绑定        document.getElementById('minSecBtn').addEventListener('click', () => startAnimation('minSec'));        document.getElementById('hourMinBtn').addEventListener('click', () => startAnimation('hourMin'));        document.getElementById('singleSecBtn').addEventListener('click', startSingleSecDemo);        pauseBtn.addEventListener('click', togglePause);        fullscreenBtn.addEventListener('click', toggleFullscreen);        document.addEventListener('fullscreenchange', () => {            fullscreenBtn.textContent = document.fullscreenElement ? '退出全屏' : '全屏显示';        });    </script></body></html>