自动写代码之黑客背景页面的实现

在现代编程世界中，代码不仅仅是实现功能的工具，它也可以成为一种艺术形式。通过将代码与动态效果结合，我们可以创造出令人眼前一亮的视觉体验。今天，我想分享一个有趣的实现——自动代码打字效果。这个效果模拟了代码逐字出现在屏幕上的过程，仿佛有一个隐形的程序员正在编写代码，给人一种沉浸式的编程体验。

实现这一效果的核心是通过JavaScript动态更新页面内容，并结合CSS动画来模拟光标的闪烁。首先，我们需要一个容器来显示代码，这里使用了`<pre>`和`<code>`标签来保留代码的格式。为了让代码看起来更贴近编程环境，页面背景设置为黑色，字体颜色为绿色，这种经典的“黑底绿字”风格让人联想到早期的终端界面。光标则通过一个带有闪烁动画的`<span>`元素实现，它的颜色与字体一致，宽度为2px，高度与字体相匹配，给人一种真实的打字体验。

在JavaScript部分，我们定义了一个`autoType`函数，它通过递归调用逐字将代码内容添加到页面中。每次更新代码时，都会在末尾添加一个光标元素，并通过`scrollIntoView`方法将页面滚动到光标位置，确保代码始终可见。当代码完全显示后，效果会重新开始，形成一个无限循环的动画。为了让代码内容更灵活，我们通过`fetch`方法从外部文件加载代码，这样可以根据需要动态更换显示的内容。

这种自动代码打字效果不仅可以用作个人网站的装饰，还可以用于演示代码的编写过程，或者在编程教学中展示代码的逻辑结构。它的实现并不复杂，但却能为页面增添一份独特的科技感和趣味性。如果你也想让自己的网站更具吸引力，不妨尝试一下这个效果，或许它会成为你网站的亮点之一。

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="img/icon.png">
    <title>Auto Code Typing</title>
    <style>
        body {
            background-color: #000; /* 设置背景颜色为黑色 */
            color: #00ff00; /* 设置字体颜色为绿色 */
            font-family: 'Courier New', monospace; /* 使用等宽字体 */
        }

        .cursor {
            display: inline-block;
            width: 2px; /* 光标宽度 */
            height: 1.2em; /* 光标高度 */
            margin-bottom: -0.2em; /* 调整光标位置 */
            background-color: #00ff00; /* 设置光标颜色为绿色 */
            animation: cursor-blink 0.8s infinite; /* 光标闪烁动画 */
        }

        @keyframes cursor-blink {
            0%, 100% {
                opacity: 1; /* 光标完全可见 */
            }
            50% {
                opacity: 0; /* 光标完全透明 */
            }
        }

        .code-container {
            max-height: 1000px; /* 设置代码容器的最大高度 */
            overflow-y: scroll; /* 允许垂直滚动 */
        }

        pre {
            margin: 0; /* 清除<pre>元素的默认边距 */
        }

        code {
            font-size: 16px; /* 设置代码字体大小 */
        }
    </style>
</head>
<body>
<div class="code-container">
    <pre><code id="code" class="language-javascript"></code></pre>
</div>

<script>
    // 自动打字效果函数
    function autoType(codeElement, codeText) {
        let currentIndex = 0; // 当前打字的位置

        function typeCode() {
            // 更新代码内容，显示已打出的部分代码和光标
            codeElement.innerHTML = codeText.substring(0, currentIndex) +
                '<span class="cursor"></span>';
            currentIndex++; // 移动到下一个字符

            // 如果未打完所有代码，继续打字
            if (currentIndex <= codeText.length) {
                scrollToCursor(codeElement); // 滚动到光标位置
                setTimeout(typeCode, 200); // 设置打字间隔时间
            } else {
                // 重新开始打字效果
                currentIndex = 0;
                setTimeout(typeCode, 1000); // 设置重新开始前的延迟时间
            }
        }

        // 滚动到光标位置的函数
        function scrollToCursor(element) {
            const cursorElement = element.querySelector('.cursor');
            if (cursorElement) {
                // 平滑滚动到光标位置
                cursorElement.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
            }
        }

        typeCode(); // 开始打字效果
    }

    // 页面加载完成后执行
    document.addEventListener('DOMContentLoaded', function () {
        const codeElement = document.getElementById('code'); // 获取代码元素

        // 从外部文件加载代码
        fetch('js/generatedCode.js')
            .then(response => response.text())
            .then(generatedCode => {
                autoType(codeElement, generatedCode); // 开始自动打字效果

                // 设置页面全屏样式
                document.body.style.margin = '0';
                document.body.style.overflow = 'hidden';
                document.documentElement.style.height = '100%';
                document.documentElement.style.overflow = 'hidden';
            })
            .catch(error => console.error('加载代码时出错:', error)); // 捕获并输出错误
    });
</script>

</body>
</html>

自动写代码之黑客背景页面的实现

完整代码

实现效果

悦读