JavaScript 脉冲二进制数字背景效应，最佳实现方法？

Question

我为我的个人网站编写了简单的脉冲二进制背景效果，我想获得有关最有效方法的输入（我很确定我的方法非常乏味，不是最好的方法去做吧）。

我的最终目标是创造一些不那么静态、更自由流动的东西。我希望所有数字都有机会脉冲，而不是有一组要脉冲的数字列表（就像我现在拥有的那样），但是循环遍历 25000 spans 在客户端需要大量资源并且造成一些不希望的滞后。

我的另一个目标是尽可能让手指像重力作用在它们身上一样下落，就像矩阵式动画 :D

如能提供有关如何实现这一点的任何信息，我们将不胜感激！

给出代码和JSFiddle： JSFiddle

document.write("<div id='binaryWrapper'>");
for (var i = 0; i < 25000; i++) {
    var digit = Math.round(Math.random());
    if (Math.random() > 0.03) {
        document.write("<span class='digit binaryDigit'>" + digit + "</span>");
    } else {
        document.write("<span class='digit binaryDigitColored'>" + digit + "</span>");
    } 
}
document.write("</div>");

var elements = document.getElementsByClassName("binaryDigitColored");
var staticElements = [];
for (var i = 0; i < elements.length; i++) {
    staticElements.push(elements[i]);
}
setInterval(function() {
    for (var i = 0; i < staticElements.length; i++) {
        if (Math.round(Math.random()) > 0.02) {
            staticElements[i].setAttribute("class", "binaryDigit");
        } else {
            var index = Math.round(Math.random() * (staticElements.length - 1));
            staticElements[index].removeAttribute("class", "binaryDigit");
            staticElements[index].setAttribute("class", "binaryDigitColored");
        }
    }
}, 500);

#binaryWrapper {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    word-wrap: break-word;
    z-index: -1;
    background-color: #000000;
}
.binaryDigit {
    color: #222222;
    transition: color 1s ease-in;
}
.binaryDigitColored {
    color:lightgreen;
    transition: color 1s ease-out;
}

Answer 1

我认为你应该看看 js 画布，网上有很多资源。

如果您想了解一般的编程知识，那么我建议您尝试使用 OOP 进行此操作，其中每个数字都是一个实例化对象。它将为您的代码提供一些结构。

如果您只是想要一个解决方案，那么这里有一些代码： http://jsfiddle.net/jnuas/vxnpu7y0/

var c = document.getElementById("c");
var ctx = c.getContext("2d");

//making the canvas full screen
c.height = window.innerHeight;
c.width = window.innerWidth;

//chararr 
var chararr = "0123456789";
//converting the string into an array of single characters
chararr = chararr.split("");

var font_size = 10;
var columns = c.width/font_size; //number of columns for the rain
//an array of drops - one per column
var drops = [];
//x below is the x coordinate
//1 = y co-ordinate of the drop(same for every drop initially)
for(var x = 0; x < columns; x++)
    drops[x] = 1; 

//drawing the characters
function draw()
{
    //Black BG for the canvas
    //translucent BG to show trail
    ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
    ctx.fillRect(0, 0, c.width, c.height);
    
    ctx.fillStyle = "#0F0"; //green text
    ctx.font = font_size + "px arial";
    //looping over drops
    for(var i = 0; i < drops.length; i++)
    {
        //a random chararr character to print
        var text = chararr[Math.floor(Math.random()*chararr.length)];
        //x = i*font_size, y = value of drops[i]*font_size
        ctx.fillText(text, i*font_size, drops[i]*font_size);
        
        //sending the drop back to the top randomly after it has crossed the screen
        //adding a randomness to the reset to make the drops scattered on the Y axis
        if(drops[i]*font_size > c.height && Math.random() > 0.975)
            drops[i] = 0;
        
        //incrementing Y coordinate
        drops[i]++;
    }
}

setInterval(draw, 33);

Answer 2

您似乎只需要它作为背景，不需要精确的数字模式或顺序，

我发现这非常简单明了 matrix animation codepen Clive Cooper 使用 canvas，这里是他的 js 代码。


code in the snippet

// Initialising the canvas
    var canvas = document.querySelector('canvas'),
        ctx = canvas.getContext('2d');
    
    // Setting the width and height of the canvas
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    
    // Setting up the letters
    var letters = 'ABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZ';
    letters = letters.split('');
    
    // Setting up the columns
    var fontSize = 10,
        columns = canvas.width / fontSize;
    
    // Setting up the drops
    var drops = [];
    for (var i = 0; i < columns; i++) {
      drops[i] = 1;
    }
    
    // Setting up the draw function
    function draw() {
      ctx.fillStyle = 'rgba(0, 0, 0, .1)';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      for (var i = 0; i < drops.length; i++) {
        var text = letters[Math.floor(Math.random() * letters.length)];
        ctx.fillStyle = '#0f0';
        ctx.fillText(text, i * fontSize, drops[i] * fontSize);
        drops[i]++;
        if (drops[i] * fontSize > canvas.height && Math.random() > .95) {
          drops[i] = 0;
        }
      }
    }
    
    // Loop the animation
    setInterval(draw, 33);

* {margin: 0; padding: 0}
body {background: #000;}
canvas {display: block;}

<canvas>
            
</canvas>

最后，要将其用作您页面的背景，请查看 this

JavaScript 脉冲二进制数字背景效应，最佳实现方法？

JavaScript Pulsing Binary Digit Background Effect, Best Implementation Method?

javascript

css

binary

background