html开发数字雨特效代码

HTML开发数字雨特效代码：

html>
    head>
    title>
    数字雨特效/title>
    style>
body {
    background-color: #000000;
    overflow: hidden;
}
.stream {
    position: absolute;
    font-size: 16px;
    color: #66FF00;
    z-index: 1;
    pointer-events: none;
}
    /style>
    /head>
    body>
    script>
    // 获取视窗宽度和高度const width = window.innerWidth;
    const height = window.innerHeight;
    // 数字雨层数const numStreams = 100;
    // 每层数字数量const numChars = 50;
    // 数字雨字符集const charSet = '0123456789ABCDEF';
// 随机生成数字function randomChar() {
    return charSet.charAt(Math.floor(Math.random() * charSet.length));
}
// 数字雨层对象class Stream {
constructor() {
    this.x = Math.floor(Math.random() * width);
    this.y = Math.floor(Math.random() * height);
    this.speed = Math.floor(Math.random() * 10) + 1;
    this.length = Math.floor(Math.random() * 10) + numChars;
    this.chars = new Array(this.length).fill(0).map(() =>
    randomChar());
}
// 更新数字雨位置update() {
    this.y += this.speed;
    if (this.y >
height) {
    this.y = -this.length * 16;
}
}
// 渲染数字雨render(ctx) {
    const charWidth = 8;
    for (let i = 0;
     i  this.length;
 i++) {
    const char = this.chars[i];
    ctx.fillText(char, this.x, this.y + i * charWidth);
}
}
}
    const streams = new Array(numStreams).fill(0).map(() =>
    new Stream());
// 绘制数字雨function draw() {
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    document.body.appendChild(canvas);
    const ctx = canvas.getContext('2d');
    ctx.font = '16px Consolas';
    ctx.fillStyle = '#66FF00';
    streams.forEach(stream =>
{
    stream.update();
    stream.render(ctx);
}
    );
    // 间隔一定时间重绘数字雨setTimeout(() =>
{
    requestAnimationFrame(() =>
{
    document.body.removeChild(canvas);
    draw();
}
)}
    , 50);
}
    draw();
    /script>
    /body>
    /html>
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！