HTML 无限循环输出“啦啦啦“的页面

最新推荐文章于 2025-11-25 10:27:20 发布

原创最新推荐文章于 2025-11-25 10:27:20 发布 · 273 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #java

html 专栏收录该内容

23 篇文章

订阅专栏

HTML 无限循环输出"啦啦啦"的页面

以下是一个简单的HTML页面，会无限循环输出"啦啦啦啦啦啦啦啦啦啦啦啦啦啦"：

<!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>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 20px;
            overflow-x: hidden;
        }
        .lala-container {
            white-space: nowrap;
            font-size: 24px;
            color: #ff69b4;
            animation: colorChange 5s infinite;
        }
        @keyframes colorChange {
            0% { color: #ff69b4; }
            25% { color: #9370db; }
            50% { color: #32cd32; }
            75% { color: #ffa500; }
            100% { color: #ff69b4; }
        }
    </style>
</head>
<body>
    <div class="lala-container" id="lala"></div>

    <script>
        const lalaContainer = document.getElementById('lala');
        let count = 0;
        
        function addLala() {
            lalaContainer.textContent += '啦啦啦';
            count++;
            
            // 每输出100个"啦啦啦"后换行（可选）
            if(count % 100 === 0) {
                lalaContainer.innerHTML += '<br>';
            }
            
            // 使用requestAnimationFrame实现无限循环
            requestAnimationFrame(addLala);
        }
        
        // 开始循环
        addLala();
    </script>
</body>
</html>