用HTML5和JavaScript实现黑客帝国风格的字符雨效果

这篇文章距离上次修改已过248天，其中的内容可能已经有所变动。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hacker Typer</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-family: 'Press Start 2P', monospace;
            background: #000;
            overflow: hidden;
        }
        #typed {
            font-size: 36px;
            color: #0F0;
            text-shadow: 0 0 5px #0F0, 0 0 20px #0F0, 0 0 30px #0F0, 0 0 40px #0F0, 0 0 50px #0F0, 0 0 60px #0F0, 0 0 70px #0F0, 0 0 80px #0F0, 0 0 90px #0F0, 0 0 100px #0F0;
        }
    </style>
</head>
<body>
    <div id="typed"></div>
    <script>
        const typed = document.getElementById('typed');
        const strings = ['Hackers', 'Pirates', 'Criminals', 'Rebels', 'Freedom Fighters'];
        const speed = 80; // Time between characters
        let index = 0; // Current string index
        let currentString = ''; // The current string being typed
        let charIndex = 0; // The current character being typed
 
        function updateTyped() {
            if (charIndex < currentString.length) {
                if (currentString.charAt(charIndex) === '|') {
                    typed.style.color = '#FF0000';
                } else {
                    typed.style.color = '#0F0';
                }
                typed.innerHTML = currentString.substring(0, charIndex) + (charIndex % 2 ? '_' : '');
                charIndex++;
            } else {
                typed.innerHTML = currentString;
                charIndex = 0;
                index = (index + 1) % strings.length;
                currentString = strings[index];
                setTimeout(updateTyped, 1000);
            }
            setTimeout(updateTyped, speed);
        }
 
        currentString = strings[index];
        updateTyped();
    </script>
</body>
</html>

这段代码使用了类似于原始代码的逻辑，但是修正了一些问题，并且使用了更现代的JavaScript语法。它定义了一个字符串数组strings，用于存储要显示的文本。speed变量控制着打字的速度。updateTyped函数负责更新HTML元素的内容，实现字符的打字效果。每次调用setTimeout都会在指定的时间后再次调用\`updat

用HTML5和JavaScript实现黑客帝国风格的字符雨效果

评论已关闭

推荐阅读