用HTML5和JavaScript实现黑客帝国风格的字符雨效果
<!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
评论已关闭