NoMoreCountdown

by niuuin

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代码编写动画 + 随机切换删除模式</title>
    <!-- 引入 Prism.js 样式 -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism-tomorrow.css" rel="stylesheet"/>
    <style>
        body {
            font-family: monospace;
            background-color: #1e1e1e;
            color: white;
            padding: 20px;
            margin: 0;
        }
        pre {
            white-space: pre-wrap;
            font-size: 20px;
            line-height: 1.5;
            margin: 0;
            overflow: hidden;
        }
        code {
            display: block;
            position: relative;
            overflow: hidden;
        }
        /* 打字光标动画 */
        #code::after {
            content: "|";
            position: absolute;
            color: white;
            animation: blink 1s infinite;
        }
        @keyframes blink {
            0% { opacity: 1; }
            50% { opacity: 0; }
            100% { opacity: 1; }
        }
    </style>
</head>
<body>
    <pre><code id="code" class="language-javascript"></code></pre>

    <!-- 引入 Prism.js 库 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/prism.js"></script>
    <script>
        const codeLines = [
            "class TimePhilosopher {",
            "    init() {",
            "        this.mood = \"calm\";",
            "        this.timeline = new Timeline();",
            "    }",
            "    checkTimePressure() {",
            "        if (this.timeline.countdownActive()) {",
            "            this.mood = \"stressed\";",
            "            this.throwError(\"Time is not a cage.\");",
            "        } else {",
            "            this.mood = \"你好 | Hello\";",
            "        }",
            "    }",
            "    throwError(message) {",
            "        echo(`Warning: ${message}`);",
            "...