显示入门:字幕滚动＋倒计数显示

字幕滚动＋倒计数显示

网页版 AI生成
源码下载链接：https://download.youkuaiyun.com/download/carcar2004/91181081
（添加代码下载链接）

主要功能点：

1. 倒计时颜色变化：
   • 大于5秒时显示绿色
   • 小于等于5秒时红黄交替闪烁
2. 背景闪烁效果：
   • 倒计时结束后背景闪烁3秒
   • 使用CSS动画实现平滑的闪烁效果
3. 自动显示控制面板：
   • 倒计时结束3秒后自动显示输入框和按钮
   • 点击屏幕切换控制面板显示的功能
4. 视觉效果优化：
   • 所有颜色变化添加平滑过渡效果
   • 数字添加发光效果增强视觉冲击力
5. 代码结构调整：
   • 确保所有效果都能正确停止和重置

这个版本完全实现所有功能，并且在各种设备上都能良好运行，具有流畅的动画效果和清晰的视觉反馈。

代码块中显示不完整，需要的话，参考下载链接。

开始

<audio id="bellSound" preload="auto">
    <source src="https://assets.mixkit.co/sfx/preview/mixkit-alarm-digital-clock-beep-989.mp3" type="audio/mpeg">
</audio>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const textInput = document.getElementById('textInput');
        const timerInput = document.getElementById('timerInput');
        const startBtn = document.getElementById('startBtn');
        const scrollingText = document.getElementById('scrollingText');
        const scrollingContainer = document.getElementById('scrollingContainer');
        const controlPanel = document.querySelector('.control-panel');
        const countdown = document.getElementById('countdown');
        const bellSound = document.getElementById('bellSound');
        const body = document.body;
        
        let animationId = null;
        let countdownId = null;
        let flashIntervalId = null;
        let position = 0;
        let characters = [];
        let speed = 2;
        let isPlaying = false;
        let panelVisible = true;
        let isFlashing = false;
        
        function startScrolling() {
            const text = textInput.value.trim();
            if (!text) return;
            
            const timerSeconds = parseInt(timerInput.value) || 10;
            
            // 清除之前的动画
            stopAllAnimations();
            
            // 清空显示区域
            scrollingText.innerHTML = '';
            countdown.textContent = timerSeconds;
            countdown.classList.add('show');
            updateCountdownColor(timerSeconds);
            
            // 创建字符元素
            characters = Array.from(text).map(char => {
                const span = document.createElement('span');
                span.className = 'character';
                span.textContent = char;
                scrollingText.appendChild(span);
                return span;
            });
            
            // 重置位置
            position = window.innerWidth;
            
            // 同时开始倒计时和文字滚动
            startCountdown(timerSeconds);
            isPlaying = true;
            animate();
            
            // 隐藏控制面板
            hideControlPanel();
        }
        
        function startCountdown(seconds) {
            let remaining = seconds;
            countdown.textContent = remaining;
            
            countdownId = setInterval(() => {
                remaining--;
                countdown.textContent = remaining;
                updateCountdownColor(remaining);
                
                if (remaining <= 0) {
                    clearInterval(countdownId);
                    onCountdownComplete();
                }
            }, 1000);
        }
        
        function updateCountdownColor(seconds) {
            if (seconds > 5) {
                countdown.classList.remove('red', 'yellow');
                countdown.classList.add('green');
            } else {
                countdown.classList.remove('green');
                // 红黄交替闪烁
                if (seconds % 2 === 0) {
                    countdown.classList.remove('yellow');
                    countdown.classList.add('red');
                } else {
                    countdown.classList.remove('red');
                    countdown.classList.add('yellow');
                }
            }
        }
        
        function onCountdownComplete() {
            // 播放铃声
            bellSound.play();
            
            // 闪烁字幕
            scrollingText.classList.add('flash');
            
            // 背景闪烁3秒
            body.classList.add('flash-bg');
            
            // 3秒后停止所有效果并显示控制面板
            setTimeout(() => {
                scrollingText.classList.remove('flash');
                body.classList.remove('flash-bg');
                countdown.classList.remove('show');
                
                // 显示控制面板
                showControlPanel();
            }, 3000);
        }
        
        function animate() {
            position -= speed;
            
            // 检查是否需要重置位置
            let totalWidth = characters.reduce((sum, char) => sum + char.offsetWidth, 0);
            
            // 如果所有文字都滚出了屏幕，重置位置
            if (position < -totalWidth) {
                position = window.innerWidth;
            }
            
            // 更新位置
            scrollingText.style.transform = getTransformStyle(position);
            
            // 继续动画
            if (isPlaying) {
                animationId = requestAnimationFrame(animate);
            }
        }
        
        function stopAllAnimations() {
            if (animationId) {
                cancelAnimationFrame(animationId);
                animationId = null;
            }
            if (countdownId) {
                clearInterval(countdownId);
                countdownId = null;
            }
            if (flashIntervalId) {
                clearInterval(flashIntervalId);
                flashIntervalId = null;
            }
            isPlaying = false;
            scrollingText.classList.remove('flash');
            countdown.classList.remove('show', 'green', 'red', 'yellow');
            body.classList.remove('flash-bg');
        }
        
        function getTransformStyle(pos) {
            const isPortrait = window.innerHeight > window.innerWidth;
            if (isPortrait) {
                return `translateX(${pos}px) translateY(-50%)`;
            } else {
                return `translateY(${pos}px) translateX(-50%)`;
            }
        }
        
        function handleOrientationChange() {
            // 重新计算位置
            position = window.innerWidth;
            scrollingText.style.transform = getTransformStyle(position);
            
            // 调整字符大小
            const isPortrait = window.innerHeight > window.innerWidth;
            const charSize = isPortrait ? 
                Math.min(window.innerWidth, window.innerHeight) * 0.15 :
                Math.min(window.innerWidth, window.innerHeight) * 0.15;
            
            document.querySelectorAll('.character').forEach(char => {
                char.style.fontSize = `${charSize}px`;
            });
        }
        
        function hideControlPanel() {
            controlPanel.classList.add('hidden');
            panelVisible = false;
        }
        
        function showControlPanel() {
            controlPanel.classList.remove('hidden');
            panelVisible = true;
        }
        
        function toggleControlPanel() {
            if (panelVisible) {
                hideControlPanel();
            } else {
                showControlPanel();
            }
        }
        
        startBtn.addEventListener('click', startScrolling);
        
        textInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                startScrolling();
            }
        });
        
        scrollingContainer.addEventListener('click', function() {
            toggleControlPanel();
        });
        
        // 监听屏幕旋转
        window.addEventListener('resize', handleOrientationChange);
        window.addEventListener('orientationchange', handleOrientationChange);
        
        // 初始化
        handleOrientationChange();
        
        // 防止双击缩放
        document.addEventListener('dblclick', function(e) {
            e.preventDefault();
        }, { passive: false });
    });
</script>