2

我试图在 JavaScript 中制作这种文本更改矩阵电影的效果。基本概念是 html 中存在一个 div，而 JavaScript 获取该 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

页面的标题文本包含这样的动画。

请帮忙

4

6 回答 6

2

试试这个- 

<!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>
于 2013-03-31T04:27:38.447 回答
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;
于 2013-03-31T04:59:07.877 回答
2

在这里看看这个JSFiddle，从这个资源放在一起。它非常快，您可以轻松配置它。

基本上创建一个空白画布并渲染图形。这是执行此操作的 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);
于 2015-08-27T12:50:31.847 回答
1

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

从我在快速通读中看到的情况来看，他们还加快和减慢了他们的过程，并在添加通道和移除通道之间反弹。

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

...不漂亮。

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

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

于 2013-03-31T04:33:01.707 回答
1

优雅的片段

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)

于 2021-07-04T15:08:07.740 回答
0

如果您想要一些可以随机化字符串并慢慢将每个字符替换为原始字符的东西，那么这里可能会适合您。替换顺序也是随机的，因此字符串被乱序替换，但最终以原始字符串结束。

一个更好的解决方案是给每个字母一个不同延迟的计时器，以便它们以不同的速度和不同的时间长度运行。但这可能会为大字符串消耗一些严重的系统资源。

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 的单个对象中。

于 2013-03-31T06:17:46.280 回答