Question

我试图让这个文本改变矩阵电影就像在JavaScript中效果一样。基本的概念是在html和JavaScript中有一个div取得div的内部文本并操纵它来创建不断变化的随机文本效果，就像在矩阵电影。我对JavaScript很陌生，我很难弄清楚动画背后的逻辑，就像每个步骤一样，一步接一个，就像整个动画过程中接下来会发生的那样。

无论如何，我试图自己做，但你可以怀疑我失败了。

这是我的代码：

<html>
<head>
    <script>

        var text = document.getElementById("text").innerText;
        var length_var = text.length;
        var possible = [];
        var possible_text ="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
        var counter = 0;
        var arr_text = [];

        var new_func = function(){
            arr_text[Math.floor(Math.random() * length_var)] = possible.charAt(Math.floor(Math.random() * possible.length));
            alert(arr_text);

        };

        var call_func = function(){

            for(var i=0; i<=possible_text.length; i++){
                possible[i] = possible_text.charAt(i);
            }

            for(var i=0; i<= length_var ; i++){
                arr_text[i] = text.charAt(i);
            }

            setInterval(new_func, 100);

        };

    </script>
</head>
<body onload="call_func()">

    <div id="text">
        Hello There!
    </div>
</body>
</html>

我打算做的事情可以在这个页面上看到，因为我非常积极地自己做这个效果。

链接：http://events.ccc.de/congress/2012/wiki/Main_Page

页面的标题文本包含此类动画。

请帮助

Answer 1

试试这个 -

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
        function randString(len) {
            "use strict";
               var i, out="", all ="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
                for (i = 0; i < len; i++) {
                    out += all.charAt(Math.floor(Math.random()*all.length));
                }
            return out;
        }
        function main() {
            "use strict";
            var $_inter = setInterval(function() {
                var text = document.getElementById("text");
                text.innerHTML = randString(text.innerHTML.length);
            }, 100);
        }
        window.onload = main;
        </script>
    </head>
    <body>
        <div id="text">Hello World!</div>
    </body>
</html>

Answer 2

这会按顺序更改字符串。

function main() {
    "use strict";
    var counter = 0, all = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    var $_inter = setInterval(function() {
        var text = document.getElementById("text");
        text.innerHTML = text.innerHTML.substring(0, counter) + all.charAt(Math.floor(Math.random()*all.length)) + text.innerHTML.substring(counter+1);
        counter = (counter+1)%text.innerHTML.length;
    }, 100);
}
window.onload = main;

Answer 3

以下是JSFiddle的汇总this resource。它非常快，您可以轻松配置它。

基本上创建一个空白画布并渲染图形。以下是执行该操作的JS和HTML代码：

HTML：

<html style="background:black; width:100%; height:100%">
    <body style="background:black; width:100%; height:100%">
        <canvas id="c" style="display: block;"></canvas>
    </body>
</html>

JS：

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

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

//chinese characters - taken from the unicode charset
var chinese = "田由甲申甴电甶男甸甹町画甼甽甾甿畀畁畂畃畄畅畆畇畈畉畊畋界畍畎畏畐畑";
//converting the string into an array of single characters
chinese = chinese.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 chinese character to print
        var text = chinese[Math.floor(Math.random()*chinese.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 4

网站上的程序的关键（真的，非常丑陋）涉及创建一个“haXX0r-like”字符数组，然后注入它们并从文本中删除它们。

他们也加快并减慢了他们的过程，并且在我的快速阅读中看到的，在执行加法传递和删除传递之间反弹。

他们的代码的缺点是，它是一堆循环，一堆“if”包含两个或三个循环，一个接一个......然后他们添加“模式 - 切换“到那个，他们说”如果我们在模式1中添加东西并快速完成，如果我们处于模式2，删除东西并降低速度，如果我们处于这个子模式无论是模式，相应地设置速度，如果速度大于或小于此速度，我们处于这种模式，然后停止我们正在做的事情，等待5秒并再次调用它......“

......不漂亮。

但是他们从一个引号开始，在字符串中找到一个随机点，然后用该字符替换该点上的字符，加上新的“＆lt;”，“？”，“{”等。 ..

加速和减速，因为他们添加和删除随机选择的字符类型。

Answer 5

优雅的片段

canvas = document.body.appendChild(document.createElement('canvas'))
screen = window.screen;
width = canvas.width = screen.width;
height = canvas.height = screen.height;
p = Array(255).join(1).split('');
context = canvas.getContext('2d');

setInterval(function(){
    context.fillStyle = 'rgba(0,0,0,0.05)';
    context.fillRect(0, 0, width, height);
    context.fillStyle = 'rgba(0,255,0,1)';
    p = p.map(function(v,i){
        r = Math.random();
        context.fillText(String.fromCharCode(Math.floor(2720 + r * 33)),i*10,v);
        v += 10; 
        return v > 768 + r * 1e4 ? 0 : v
    })
}, 33)

Answer 6

如果你想要一些字符串随机化的东西并慢慢地用原始字符替换每个字符，这里的东西可能适合。替换顺序也是随机的，因此字符串不按顺序替换，但最终以原始字符串结束。

更高级的解决方案是为每个字母赋予自己的定时器，使其具有不同的延迟，以便它们以不同的速度和不同的时间长度运行。但这可能会给一个大字符串带来一些严重的系统资源。

function Randomiser(el, count, delay) {
  this.element = el;
  this.originalText = el.textContent || el.innerText || '';
  this.places = [];
  this.currentText = [];
  this.count = count || 3;   // iterations before fixing a character
  this.delay = delay || 100; // milliseconds between updates
  this.iteration = 0;
  this.startTime = new Date();

  var i = this.originalText.length;

  while (i--) {
    this.places[i] = [i];
  }
}

Randomiser.prototype.randomise = function() {
  var charSet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  var i = this.places.length;

  while (i--) {
    this.currentText[this.places[i]] = charSet.charAt((Math.random() * charSet.length) | 0);
  }
  this.iteration += 1;
}

Randomiser.prototype.setContent = function() {
  var t = this.currentText.join('');

  if (typeof this.element.textContent == 'string') {
    this.element.textContent = t;
  } else {
    this.element.innerText = t;
  }
}

Randomiser.prototype.run = function() {
  var n;
  var temp = [];

  // If first run, randomise to initiate
  if (!this.iteration) {
    this.randomise();
  }

  // If there are places left
  if (this.places.length) {

    // If reached count, randomly remove one place and set its character
    // to the original value
    if (!(this.iteration % this.count)) {
      n = this.places.splice((Math.random() * this.places.length|0), 1)[0];
      this.currentText[n] = this.originalText.charAt(n);
    }

    // Randomise the string and call itself
    this.randomise(); 
    this.setContent();
    var randomiser = this;
    setTimeout(function(){randomiser.run();}, this.delay); 
  }
  // If no places left, end
}

// Kick it off
var r = new Randomiser(document.getElementById('text'), 5, 200);
r.run();

以上使用经典的原型继承，它可以使用一个闭包来做同样的事情。所有这些原型函数也可以放在一个分配给Randomiser.prototype的对象中。

如何在javascript中使矩阵像文本更改效果？

6 个答案: