增强型打字机效果，HTML代码在线实时编辑、实时预览

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141

            
            <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>增强型打字机效果 作者：江枫爱写网页</title>
    <style>
        .type-container {
            min-height: 60px;
            position: relative;
            margin: 2rem;
        }

        #typewriter {
            font-family: 'Courier New', monospace;
            font-size: 2.5em;
            color: #00ff88;
            text-shadow: 0 0 10px #00ff8880;
            white-space: nowrap;
            position: relative;
            display: inline-block;
        }

        
        .cursor {
            position: absolute;
            right: -15px;
            bottom: 2px;
            width: 12px;
            height: 1.2em;
            background: #00ff88;
            box-shadow: 0 0 15px #00ff88;
            animation: cursor-blink 1.1s infinite;
            opacity: 0; /* 初始隐藏 */
        }

        
        .typing .cursor {
            animation: none;
            opacity: 1;
        }

        @keyframes cursor-blink {
            0%, 50% { opacity: 1; }
            51%, 100% { opacity: 0; }
        }

        
        body {
            background: #1a1a1a;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="type-container">
        <span id="typewriter"></span>
        <div class="cursor"></div>
    </div>

    <script>
        class TypeWriter {
            constructor(element, cursor, texts, options = {}) {
                this.element = element;
                this.cursor = cursor;
                this.texts = texts;
                this.speed = options.speed || 100;
                this.deleteSpeed = options.deleteSpeed || 50;
                this.delay = options.delay || 2000;
                this.index = 0;
                this.isDeleting = false;
                this.text = '';
                this.isTyping = false;
                this.type();
            }

            type() {
                const currentText = this.texts[this.index];
                const fullLength = currentText.length;

                
                if (!this.isTyping) {
                    this.cursor.classList.add('typing');
                    this.isTyping = true;
                }

                if (this.isDeleting) {
                    this.text = currentText.substring(0, this.text.length - 1);
                } else {
                    this.text = currentText.substring(0, this.text.length + 1);
                }
              
                this.element.textContent = this.text;
                
                
                const textWidth = this.element.offsetWidth;
                this.cursor.style.left = textWidth + 5 + 'px';

                let typeSpeed = this.speed;
                if (!this.isDeleting) {
                    if (this.text === currentText) {
                        typeSpeed = this.delay;
                        this.isDeleting = true;
                        this.cursor.classList.remove('typing');
                    } else if (this.text.length === 0) {
                        typeSpeed = this.speed * 2;
                    }
                } else {
                    typeSpeed = this.deleteSpeed;
                    if (this.text === '') {
                        this.isDeleting = false;
                        this.index = (this.index + 1) % this.texts.length;
                        this.cursor.classList.add('typing');
                    }
                }

                setTimeout(() => this.type(), typeSpeed);
            }
        }

        // 初始化
        const element = document.getElementById('typewriter');
        const cursor = document.querySelector('.cursor');
        const texts = [
            "正在检查网站访问权限...",
            "您拥有访问权限，请稍后...",
            "正在检查您的访问行为...",
            "行为异常！重新检查权限..."
        ];

        new TypeWriter(element, cursor, texts, {
            speed: 120,
            deleteSpeed: 40,
            delay: 1500
        });
    </script>
</body>
</html>