文字加扰动画JS

时间:2018-11-27 00:23:35

标签: javascript animation output scramble

我一直在尝试创建一个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

1 个答案:

答案 0 :(得分:0)

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

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

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.右括号到处都是