纯JavaScript生成动态星空（繁星闪闪）404页面，页面元素全部由JavaScript产生包括标题，并附带逐字打印文字效果，支持展现三段内容!或者更多内容;JS代码可加密。
效果图：（不知道录出来大家看得见星星不，实际效果 星星和输入文字动画都要好一些！）
代码如下
document.addEventListener('DOMContentLoaded', function () {
const viewportMeta = document.createElement('meta');
viewportMeta.name = 'viewport';
viewportMeta.content = 'width=device-width, initial-scale=1.0';
document.head.appendChild(viewportMeta);
const styleElement = document.createElement('style');
styleElement.textContent = `
body {
margin: 0;
overflow: hidden;
background-color: black;
color: white;
font-family: 'Arial', sans-serif;
}
#stars {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.star {
position: absolute;
background-color: white;
border-radius: 50%;
width: 2px;
height: 2px;
animation: twinkle 2s infinite;
}
@keyframes twinkle {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
#error-message {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 36px;
white-space: nowrap;
overflow: hidden;
}
`;
document.head.appendChild(styleElement);
const body = document.body;
const starsContainer = document.createElement('div');
starsContainer.id = 'stars';
starsContainer.style.position = 'absolute';
starsContainer.style.top = '0';
starsContainer.style.left = '0';
starsContainer.style.width = '100%';
starsContainer.style.height = '100%';
body.appendChild(starsContainer);
const errorMessageContainer = document.createElement('div');
errorMessageContainer.id = 'error-message';
errorMessageContainer.style.position = 'absolute';
errorMessageContainer.style.top = '50%';
errorMessageContainer.style.left = '50%';
errorMessageContainer.style.transform = 'translate(-50%, -50%)';
errorMessageContainer.style.fontSize = '36px';
errorMessageContainer.style.whiteSpace = 'nowrap';
errorMessageContainer.style.overflow = 'hidden';
body.appendChild(errorMessageContainer);
const messages = ["可能页面飞到了宇宙去呢...", "404千万条,200第一条!", "404", "聚合CDN"];//提示词
function createStar() {
const star = document.createElement('div');
star.className = 'star';
const xy = Math.random() * 100;
const duration = Math.random() * 1 + 0.5;
const delay = Math.random() * 2;
star.style.position = 'absolute';
star.style.backgroundColor = 'white';
star.style.borderRadius = '50%';
star.style.width = '2px';
star.style.height = '2px';
star.style.left = `${Math.random() * 100}%`;
star.style.top = `${Math.random() * 100}%`;
star.style.animationDuration = `${duration}s`;
star.style.animationDelay = `-${delay}s`;
starsContainer.appendChild(star);
}
function createStars() {
for (let i = 0; i < 100; i++) {
createStar();
}
}
function typeText(message, index, callback) {
if (index < message.length) {
errorMessageContainer.innerHTML += message.charAt(index);
index++;
setTimeout(function () {
typeText(message, index, callback);
}, 150);
} else {
setTimeout(callback, 1000);
}
}
function deleteText(callback) {
let text = errorMessageContainer.innerHTML;
if (text.length > 0) {
text = text.slice(0, -1);
errorMessageContainer.innerHTML = text;
setTimeout(function () {
deleteText(callback);
}, 50);
} else {
setTimeout(callback, 1000);
}
}
function displayMessages() {
let index = 0;
function nextMessage() {
deleteText(function () {
setTimeout(function () {
typeText(messages[index], 0, function () {
index = (index + 1) % messages.length;
nextMessage();
});
}, 1000);
});
}
nextMessage();
}
createStars();
displayMessages();
window.addEventListener('resize', function () {
while (starsContainer.firstChild) {
starsContainer.removeChild(starsContainer.firstChild);
}
createStars();
});
});
document.title = "404 Lucky"; //网页名
console.log("404 Lucky");
console.log("本代码来自：在意博客 更多资源访问：https://zai1.com" );
如何使用
新建一个js文件，保存上面的代码，引用即可。
比如
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><script src="你的网站域名/你的JS名.js"></script></head><body></body><
