随机分数html-程序员茄子

代码随机分数html

2025-01-25 10:56:34 +0800 CST views 340
该文本描述了一个简单的网页应用，用户点击按钮后会播放音效并生成一个随机分数，伴随有动画效果，如数字滚动、烟花、彩带和闪光等。使用了HTML、CSS和JavaScript来实现这些功能，提供了丰富的视觉和听觉体验。
<!DOCTYPE html>
<html>
<head>
    <style>
        :root {
            --gold: #ffd700;
            --red: #ff0000;
        }

        body {
            background: #000;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            overflow: hidden;
            font-family: 'Arial Black', sans-serif;
        }

        #luckyButton {
            padding: 20px 40px;
            font-size: 1.5em;
            background: linear-gradient(45deg, #2c3e50, #3498db);
            border: none;
            border-radius: 30px;
            color: white;
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
            z-index: 100;
        }

        #luckyButton:hover {
            transform: scale(1.1);
            box-shadow: 0 0 30px #3498db;
        }

        .score-box {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 8em;
            color: var(--gold);
            text-shadow: 0 0 30px var(--gold);
            opacity: 0;
            z-index: 1000;
        }

        .score-final {
            animation: scorePop 0.5s ease-out forwards;
        }

        @keyframes scorePop {
            0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
            70% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
            100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
        }

        .firework {
            position: absolute;
            width: 10px;
            height: 10px;
            background: var(--gold);
            border-radius: 50%;
            animation: explode 1s forwards;
        }

        @keyframes explode {
            0% { transform: scale(1); opacity: 1; }
            100% { transform: scale(8); opacity: 0; }
        }

        .golden-light {
            position: fixed;
            width: 200vw;
            height: 200vh;
            background: radial-gradient(circle, 
                rgba(255,215,0,0.3) 0%,
                transparent 60%
            );
            animation: lightPulse 1s forwards;
        }

        @keyframes lightPulse {
            0% { transform: scale(0); opacity: 1; }
            100% { transform: scale(3); opacity: 0; }
        }

        .confetti {
            position: absolute;
            width: 15px;
            height: 15px;
            background: linear-gradient(45deg, var(--gold), var(--red));
            animation: confettiFall 2s ease-out forwards;
        }

        @keyframes confettiFall {
            0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
            100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
        }

        .sparkle {
            position: absolute;
            width: 8px;
            height: 8px;
            background: #fff;
            animation: sparkle 0.8s linear forwards;
        }

        @keyframes sparkle {
            0% { transform: scale(1); opacity: 1; }
            100% { transform: scale(5); opacity: 0; }
        }
    </style>
</head>
<body>
    <button id="luckyButton">试试手气</button>
    <audio id="drumroll" src="https://actions.google.com/sounds/v1/crowds/drum_roll.ogg"></audio>
    <audio id="fanfare" src="https://actions.google.com/sounds/v1/crowds/cheer.ogg"></audio>

    <script>
        const btn = document.getElementById('luckyButton');
        const drumroll = document.getElementById('drumroll');
        const fanfare = document.getElementById('fanfare');

        btn.addEventListener('click', async () => {
            btn.disabled = true;
            
            // 播放倒计时音效
            drumroll.play();
            
            // 创建滚动数字
            const scoreBox = createScoreBox();
            
            // 生成目标分数
            const target = Math.floor(Math.random() * 101);
            
            // 数字滚动动画
            await animateNumber(scoreBox, target);
            
            // 触发最终特效
            createFinalEffect(target);
            
            // 重置按钮
            setTimeout(() => {
                btn.disabled = false;
            }, 3000);
        });

        function createScoreBox() {
            const div = document.createElement('div');
            div.className = 'score-box';
            document.body.appendChild(div);
            return div;
        }

        function animateNumber(element, target) {
            return new Promise(resolve => {
                let current = 0;
                const startTime = Date.now();
                const duration = 2000;

                const update = () => {
                    const progress = Math.min((Date.now() - startTime) / duration, 1);
                    
                    // 加速滚动效果
                    current = Math.floor(easeOutQuad(progress) * target);
                    
                    element.textContent = current;
                    element.style.opacity = progress * 0.8;
                    
                    // 添加随机闪烁效果
                    if (Math.random() > 0.5) {
                        createRandomSpark();
                    }

                    if (progress < 1) {
                        requestAnimationFrame(update);
                    } else {
                        resolve();
                    }
                }

                requestAnimationFrame(update);
            });
        }

        function createFinalEffect(score) {
            // 停止倒计时音效
            drumroll.pause();
            
            // 播放欢呼音效
            fanfare.play();

            // 最终数字特效
            const finalScore = document.querySelector('.score-box');
            finalScore.classList.add('score-final');
            finalScore.style.color = score > 50 ? '#ff0000' : '#00ff00';
            
            // 全屏闪光
            createGoldenLight();
            
            // 大爆炸特效
            createFireworkBurst();
            
            // 彩带雨
            createConfettiStorm();
            
            // 自动清理
            setTimeout(() => {
                finalScore.remove();
            }, 3000);
        }

        function createGoldenLight() {
            const light = document.createElement('div');
            light.className = 'golden-light';
            document.body.appendChild(light);
            setTimeout(() => light.remove(), 1000);
        }

        function createFireworkBurst() {
            for(let i = 0; i < 30; i++) {
                const firework = document.createElement('div');
                firework.className = 'firework';
                firework.style.left = Math.random() * 100 + '%';
                firework.style.top = Math.random() * 100 + '%';
                firework.style.background = `hsl(${Math.random()*360}, 100%, 50%)`;
                document.body.appendChild(firework);
                setTimeout(() => firework.remove(), 1000);
            }
        }

        function createConfettiStorm() {
            for(let i = 0; i < 100; i++) {
                const confetti = document.createElement('div');
                confetti.className = 'confetti';
                confetti.style.left = Math.random() * 100 + '%';
                confetti.style.animationDelay = Math.random() * 0.5 + 's';
                document.body.appendChild(confetti);
                setTimeout(() => confetti.remove(), 2000);
            }
        }

        function createRandomSpark() {
            const spark = document.createElement('div');
            spark.className = 'sparkle';
            spark.style.left = Math.random() * 100 + '%';
            spark.style.top = Math.random() * 100 + '%';
            document.body.appendChild(spark);
            setTimeout(() => spark.remove(), 800);
        }

        function easeOutQuad(t) {
            return t * (2 - t);
        }
    </script>
</body>
</html>
复制全文生成海报网页开发前端技术用户交互动画效果
代码 随机分数html

推荐文章

代码随机分数html
