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>

任何帮助将不胜感激！ TIA

Answer 1

您的代码有太多错误。请尝试将您的代码与此进行比较。

注意：我不确定这是否是您要尝试的操作。先运行我的代码段。

id

  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);

错误列表：
1.一些变量在开始时使用<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>，虽然可以，但没有必要，如果要以$开始，必须在整个过程中使用它
2.您使用舍入而不是随机数来生成随机数
3.右括号到处都是

文字加扰动画JS

1 个答案: