我试图让一个div有一个随机生成的字符串向左移动，然后在末尾添加一个字符以创建类似滚动的效果

Question

过去几天我开始尝试在codepen中学习javascript、html和css，并尝试制作矩阵代码雨型效果。我确实有其他编程语言的经验。我让 div 使用随机生成的字符串在一段时间内向下滚动。但是，当我尝试将适当的字符串（以数组的形式）保存到另一个数组中，以便稍后用于将该字符串移至一个数组并添加一个新的随机字符时。不是这样做，而是将名为 store 的整个数组设置为最新的字符串（以数组的形式）

下面是我的javascript代码（包括console.log以供我尝试调试）

var numDivs = 10;
var pos = [];
var delay = [];

/* Check page is loaded and create each of the divs for the 'raindrops' */
for (let i = 0; i < numDivs; i++) {
  document.addEventListener('DOMContentLoaded', function() {
      var div = document.createElement('div');
      div.id = 'matrix'+i;
      div.className = 'matrixC m'+i;

      document.body.appendChild(div);
  }, false);
}

/* Generate 12 character string for each of the 'raindrops' */
var characters = ["日", "ﾊ","ﾐ","ﾋ","ｰ","ｳ","ｼ","ﾅ","ﾓ","ﾆ","ｻ","ﾜ","ﾂ","ｵ","ﾘ","ｱ","ﾎ","ﾃ","ﾏ","ｹ","ﾒ","ｴ","ｶ","ｷ","ﾑ","ﾕ","ﾗ","ｾ","ﾈ","ｽ","ﾀ","ﾇ","ﾍ","0","1","2","3","4","5","7","8","9","Z",":","・",".",'"',"=","*","+","-","<",">","¦","｜","ç","ｸ"];

var store = [];
var state2 = "false";

function genNum() {
  var stringArr = [];
  for (let n = 0; n < numDivs; n++) {
    var finalString = "";
    var char = 0;
    if (state2 == "false"){
      var state = "false";
    }
    
    if (state == "false"){
      for (let m = 0; m < 20; m++) {
        let char = characters[Math.floor(Math.random() * characters.length)];
        finalString += char;
        stringArr[m] = char;
      }
      state = "true";
    }
    else {
      stringArr = store[n];
      stringArr.shift();
      let char = characters[Math.floor(Math.random() * characters.length)];
      stringArr[19] = char;
      for (let i = 0; i < stringArr.length; i++) {
        finalString += stringArr[i];
      }
    }
    store[n] = stringArr;
    console.log(n + ": " + finalString+", " + stringArr);
    console.log(store);
    document.getElementById("matrix"+n).innerHTML = finalString;   
  }
  state2 = "true";
}

setInterval(genNum, 100); /* Regenerate string from above every 0.15s */

let root = document.documentElement;
for (let i = 0; i < numDivs; i++) {
  pos[i]=((Math.random() * 100) + "vw"); /* Set random position across page */
}
for (let i = 0; i < numDivs; i++) {
  delay[i]=((Math.random() * 10) + "s"); /* Set random offset time for start of animation */
}


let dynamicStyles = null;

function addAnimation(body) { /* create animation function using parsed code */
  if (!dynamicStyles) {
    dynamicStyles = document.createElement('style');
    dynamicStyles.type = 'text/css';
    document.head.appendChild(dynamicStyles);
  }

  dynamicStyles.sheet.insertRule(body, dynamicStyles.length);
}

for (let i = 0; i < numDivs; i++) { /* For each 'raindrop' create animation from random point across page down to off-screen */
  addAnimation(`
  @keyframes fall`+i+` { 
    from {
      transform: translate(`+pos[i]+`,-150%);
    } 
    to {
      transform: translate(`+pos[i]+`,100vh);
    }
   }`);
}

/* Give each div their corresponding animation, specifying all details */
document.addEventListener("DOMContentLoaded", function () {
  for (let i = 0; i < numDivs; i++) {
    document.getElementById("matrix"+i).style.animation = "fall"+i+" 7.5s linear "+delay[i]+" infinite"; 
  }
});

如果你需要它，我这里也有我的CSS：

body {
  background-color: black;
}

.matrixC {
  transform: translate(-200%,-200%); /* Make sure none are on screen at start*/
  font-size: 10px;
  width: 5px; /* Keeps text vertical */
  display: inline-block;
  text-align: center;
  word-wrap: break-word; /* Keeps text vertical */
  background: linear-gradient(black, #d0ebc4); /* Creates fade effect from bottom to top */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 20px #70ea37;  /* Creates glow */
  margin: -5px; /* For some reason makes it more evenly spread */
}

我尝试将存储状态移动到代码中的不同位置，并将其更改为 switch case，该 switch case 精确指定了要更改数组的哪一部分，但这仍然输出相同的错误。

Answer 1

else {
  stringArr = store[n].slice(); // Create a copy of the array
  stringArr.shift();
  let char = characters[Math.floor(Math.random() * characters.length)];
  stringArr[19] = char;
  for (let i = 0; i < stringArr.length; i++) {
    finalString += stringArr[i];
  }
}

您还可以使用 join 方法来简化创建

finalString

的循环：

else {
  stringArr = store[n].slice(); // Create a copy of the array
  stringArr.shift();
  let char = characters[Math.floor(Math.random() * characters.length)];
  stringArr[19] = char;
  finalString = stringArr.join('');
}