Анимация скремблирования текста JS

Question

Я пытался создать анимацию из 8 символов, которая будет шифровать и изменять значение, я думаю, как вы могли бы увидеть с расшифровкой в ​​фильмах.Я искал другие ответы и пробовал несколько вещей, но, кажется, не помогаю в том, что я после.Вот мой код:

<div class="container">
<div class="content">
    <div class="random">
        <span class="nbr ltr">0</span>
        <span class="nbr ltr">0</span>
        <span class="nbr ltr">0</span>
        <span class="nbr ltr">0</span>
        <span class="nbr ltr">0</span>
        <span class="nbr ltr">0</span>
        <span class="nbr ltr">0 </span>
    </div>
</div>
<script type="text/javascript">
$(document).ready(function() {

var $randomnbr = $('.nbr');
var $timer = 30;
var $it;
var $data = 0;
var $index;
var $change;
var $letters = ["x", "a", "z", "v", "c", "s", "k", "t", ];

$randomnbr.each(function() {

change = Math.round(Math.random()*100);
$(this).attr('data-change', change);

});

function random() {
    return Math.round(Math.round()*9);
};

function select() {
    return Math.round(Math.round()*randomnbr.length+1);
};

function value() {
    $('.nbr:nth-child('+select()+')').html(''+random()+'');
    $('.nbr:nth-child('+select()+')').attr('data-number', $data);
    $data++;

    $randomnbr.each(function() {
        if(parseInt($(this).attr('data-number')) > parseInt($(this)).attr('data-change''))) {
            index = $('.ltr').index(this);
            $(this).html(letters[index]);
            $(this).removeClass('nbr');
        }
    });
};

$it = setInterval(value, $timer);

});
</script>

Любая помощь будет оценена!ТИА

Answer 1

В вашем коде слишком много ошибок.Пожалуйста, попробуйте сравнить ваш код с этим.

Примечание: я не уверен, что это то, что вы пытаетесь сделать.сначала запустите мой фрагмент.

  var randomnbr = $('.nbr');
  var timer = 30;
  var it;
  var data = 0;
  var index;
  var change;
  var letters = ["x", "a", "z", "v", "c", "s", "k", "t", ];

  randomnbr.each(function() {

    change = Math.round(Math.random() * 100);
    $(this).attr('data-change', change);

  });

  function random() {
    return Math.round(Math.random() * 9);
  };

  function select() {
    return Math.round((Math.random() * randomnbr.length) + 1);
  };

  function value() {
    $('.nbr:nth-child(' + select() + ')').html('' + random() + '');
    $('.nbr:nth-child(' + select() + ')').attr('data-number', data);
    data++;

    randomnbr.each(function() {
      if (parseInt($(this).attr('data-number')) > parseInt($(this).attr('data-change'))) {
        index = $('.ltr').index(this);
        $(this).html(letters[index]);
        $(this).removeClass('nbr');
      }
    });
  };

  it = setInterval(value, timer);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="content">
    <div class="random">
      <span class="nbr ltr">0</span>
      <span class="nbr ltr">0</span>
      <span class="nbr ltr">0</span>
      <span class="nbr ltr">0</span>
      <span class="nbr ltr">0</span>
      <span class="nbr ltr">0</span>
      <span class="nbr ltr">0 </span>
    </div>
  </div>
</div>

Список ошибок:1. некоторые переменные используют $ в начале, что нормально, но не нужно, вы должны использовать его повсеместно, если хотите начать с $2. вы используете раунд вместо случайных для генерации случайных чисел3. Ваша заключительная скобка везде