提交表单随机背景颜色并且播放烟花特效

<!DOCTYPE html><br />
<html lang="zh-CN"><br />
<head><br />
    <meta charset="UTF-8"><br />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"><br />
    <title>提交触发烟花+背景变色</title><br />
    <style><br />
        body {<br />
            transition: background-color 0.5s ease; /* 背景色过渡动画 */<br />
            min-height: 100vh;<br />
            display: flex;<br />
            justify-content: center;<br />
            align-items: center;<br />
            margin: 0;<br />
            font-family: sans-serif;<br />
        }<br />
        .form-container {<br />
            background: white;<br />
            padding: 2rem 3rem;<br />
            border-radius: 10px;<br />
            box-shadow: 0 0 20px rgba(0,0,0,0.1);<br />
        }<br />
        input {<br />
            padding: 0.8rem;<br />
            margin: 0.5rem 0;<br />
            width: 250px;<br />
            border: 1px solid #ddd;<br />
            border-radius: 5px;<br />
        }<br />
        button {<br />
            padding: 0.8rem 2rem;<br />
            background: #2c3e50;<br />
            color: white;<br />
            border: none;<br />
            border-radius: 5px;<br />
            cursor: pointer;<br />
            margin-top: 1rem;<br />
        }<br />
        button:hover {<br />
            background: #34495e;<br />
        }<br />
        /* 烟花容器需全屏覆盖且不影响其他元素 */<br />
        #fireworks {<br />
            position: fixed;<br />
            top: 0;<br />
            left: 0;<br />
            width: 100%;<br />
            height: 100%;<br />
            pointer-events: none; /* 允许点击穿透 */<br />
            z-index: 9999;<br />
        }<br />
    </style><br />
</head><br />
<body><br />
    <div class="form-container"><br />
        <h2>提交表单触发效果</h2><br />
        <form id="myForm"><br />
            <div><br />
                <label>姓名：</label><br><br />
                <input type="text" required placeholder="请输入姓名"><br />
            </div><br />
            <div><br />
                <label>邮箱：</label><br><br />
                <input type="email" required placeholder="请输入邮箱"><br />
            </div><br />
            <button type="submit">提交表单</button><br />
        </form><br />
    </div><br />
<br />
    <!-- 烟花Canvas容器 --><br />
    <canvas id="fireworks"></canvas><br />
<br />
    <script><br />
        // 1. 表单提交逻辑 + 背景色切换<br />
        const form = document.getElementById('myForm');<br />
        const body = document.body;<br />
        const bgColors = ['#f8f9fa', '#e3f2fd', '#e8f5e9', '#fff3e0', '#fce4ec']; // 切换色库<br />
        let currentColorIndex = 0;<br />
<br />
        form.addEventListener('submit', function(e) {<br />
            e.preventDefault(); // 阻止表单默认提交（实际项目可替换为接口请求）<br />
            <br />
            // 切换背景色<br />
            currentColorIndex = (currentColorIndex + 1) % bgColors.length;<br />
            body.style.backgroundColor = bgColors[currentColorIndex];<br />
            <br />
            // 发射烟花<br />
            createFireworks();<br />
            <br />
            // 提交成功提示（可选）<br />
            alert('提交成功！已触发烟花和背景变色～');<br />
        });<br />
<br />
        // 2. 烟花效果核心逻辑<br />
        function createFireworks() {<br />
            const canvas = document.getElementById('fireworks');<br />
            const ctx = canvas.getContext('2d');<br />
            <br />
            // 设置Canvas尺寸为窗口大小<br />
            canvas.width = window.innerWidth;<br />
            canvas.height = window.innerHeight;<br />
<br />
            // 随机烟花发射位置（以鼠标点击位置为中心，此处用表单位置优化）<br />
            const formRect = form.getBoundingClientRect();<br />
            const x = formRect.left + formRect.width / 2; // 表单水平中心<br />
            const y = formRect.top - 50; // 表单上方50px处发射<br />
<br />
            // 烟花粒子配置<br />
            const particles = [];<br />
            const particleCount = 80; // 粒子数量<br />
            const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff']; // 烟花颜色库<br />
<br />
            // 创建粒子<br />
            for (let i = 0; i < particleCount; i++) {<br />
                const angle = Math.random() * Math.PI * 2; // 随机角度<br />
                const speed = 2 + Math.random() * 5; // 随机速度<br />
                particles.push({<br />
                    x,<br />
                    y,<br />
                    vx: Math.cos(angle) * speed,<br />
                    vy: Math.sin(angle) * speed,<br />
                    color: colors[Math.floor(Math.random() * colors.length)],<br />
                    alpha: 1,<br />
                    decay: 0.01 + Math.random() * 0.02 // 透明度衰减速度<br />
                });<br />
            }<br />
<br />
            // 绘制并更新粒子<br />
            function draw() {<br />
                ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布<br />
                let alive = false;<br />
<br />
                particles.forEach(particle => {<br />
                    if (particle.alpha > 0) {<br />
                        alive = true;<br />
                        // 更新位置（添加重力效果）<br />
                        particle.vy += 0.1;<br />
                        particle.x += particle.vx;<br />
                        particle.y += particle.vy;<br />
                        // 衰减透明度<br />
                        particle.alpha -= particle.decay;<br />
<br />
                        // 绘制粒子<br />
                        ctx.beginPath();<br />
                        ctx.arc(particle.x, particle.y, 2, 0, Math.PI * 2);<br />
                        ctx.fillStyle = `${particle.color}${Math.floor(particle.alpha * 255).toString(16).padStart(2, '0')}`;<br />
                        ctx.fill();<br />
                    }<br />
                });<br />
<br />
                // 粒子未消失前持续绘制<br />
                if (alive) requestAnimationFrame(draw);<br />
            }<br />
<br />
            draw();<br />
        }<br />
<br />
        // 窗口大小变化时更新Canvas尺寸<br />
        window.addEventListener('resize', () => {<br />
            const canvas = document.getElementById('fireworks');<br />
            canvas.width = window.innerWidth;<br />
            canvas.height = window.innerHeight;<br />
        });<br />
    </script><br />
</body><br />
</html><br />
<br />