纯JS生成元素:星空闪闪+逐字打印文字效果404页面-在意博客

纯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><

关注公众号获取更多资讯~

文章版权归作者所有，未经允许请勿转载。

THE END