Question

我正在创建一个脚本来更改按钮中的字母a-la“电视 - 破解密码”样式，随机字母，慢慢地被一个人想出来。

我希望它运行相同的时间（2秒），无论最终的字符串长度如何。因此，ABC和This is a longer string!都需要2秒，但是ABC，每个字母都会被随机化多次。

到目前为止，我所知道的变量是，每50毫秒运行2000毫秒，我知道输出文本长度，例如： 3和24.我需要知道每封信会改变多少次。

我一直绞尽脑汁试图让它发挥作用，但无济于事。

<input type="text" id="text" />
<input type="button" id="change" value="Change" />
<br /><br />
<span id="output">This is where the output will</span>

$(function(){

    var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
    function getRandomInt(min, max){
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    function randomChar(){
        return chars[getRandomInt(0, chars.length - 1)];
    }

    var $output = $('#output');
    $output.text($output.text() + ' be');


    var INTERVAL = 50;

    var newOutput = function($elem, $newText){

        var chars = new String($newText).split('');
        var totalChars = chars.length;
        var doneChars = 0;


        var timer = setInterval(function(){

            var output = '';
            for(var staticChars = 0;staticChars < doneChars;staticChars++){
                output += chars[staticChars];
            }

            for(var randomChars = 0;randomChars < (totalChars -    doneChars);randomChars++){
                output += randomChar();
            }

            $elem.text(output);



          if(doneChars === totalChars){
                clearInterval(timer);
          }

          doneChars++;
        }, INTERVAL);

    }

  $('#change').click(function(){

    newOutput($output, $('#text').val());

  });
});

Answer 1

这可以通过设置您想要执行突变的总时间然后将该时间量除以目标字符串的长度来完成。这将为您提供在每个角色上花费的时间。从那里，您可以在突变之间使用一定的时间，并在插入正确的字符之前不断改变最后一个字符。

＆＃13;

$(function(){
  var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
  function getRandomInt(min, max){
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  function randomChar(){
    return chars[getRandomInt(0, chars.length - 1)];
  }
  
  var $output = $('#output');
  $output.text($output.text() + ' be');

  var INTERVAL = 50;
  var TOTAL_TIME = 2000;
  var TIME_PER_SWAP = 50;
  var newOutput = function($elem, $newText) {
    var chars = $newText.split('');
    var totalChars = chars.length;
    var doneChars = 0;
    // Total amount of time to spend on each new character
    var timePerCharacter = TOTAL_TIME / totalChars;
    setTimeout(function changeChar() {
      $elem.text($elem.text().slice(0, doneChars) + chars[doneChars++]);
      if (doneChars < totalChars) {
        setTimeout(changeChar, timePerCharacter);
      }
    }, timePerCharacter)
    
    // Randomly mix up the character
    setTimeout(function mix() {
      if (doneChars >= totalChars) {
      	return;
      }
      $elem.text($elem.text().slice(0, doneChars) + randomChar());
      setTimeout(mix, TIME_PER_SWAP);
    }, 0);
  }
  
  $('#change').click(function(){
    newOutput($output, $('#text').val());
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text" />
<input type="button" id="change" value="Change" />
<br /><br />
<span id="output">This is where the output will</span>

＆＃13;

Answer 2

这是我的参考实现，不是使用jQuery，只是好老的vanillaJS：）

var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var els = document.querySelectorAll('div'), d;

function randChar() {
  return chars[Math.floor(Math.random() * chars.length)];
}
function setCharAt(str,index,chr) {
  if(index > str.length-1) return str;
  return str.substr(0,index) + chr + str.substr(index+1);
}
function unwind(el, arr, interval)
{
  el.innerText = arr.pop();
  if(arr.length)
    setTimeout(function(){unwind(el, arr, interval)}, interval);
}
for(var i = 0; i != els.length; i++)
{
  d = els[i];
  var origText = d.innerText, twists = [d.innerText];
  var iterations = Math.round(Math.sqrt(origText.length) * 10);
  var timePer = Math.round(2000 / iterations);
  while(--iterations)
  {
    origText = setCharAt(origText, Math.floor(Math.random() * origText.length), randChar());
    twists.push(origText);
  }
  unwind(d, twists, timePer);
}

div {
  margin:1em;
  border:1px solid black;
  font:9pt monospace;
  padding:0.25em;
}

<div>Test1</div>
<div>ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
<div>Lorem ipsum dolor sit amet</div>
<div>Quis non odit sordidos, vanos, leves, futtiles? Aliter homines, aliter philosophos loqui putas oportere? Semovenda est igitur voluptas, non solum ut recta sequamini, sed etiam ut loqui deceat frugaliter. Unum nescio, quo modo possit, si luxuriosus sit, finitas cupiditates habere. Si est nihil nisi corpus, summa erunt illa: valitudo, vacuitas doloris, pulchritudo, cetera. Primum quid tu dicis breve?</div>
<div>What is this 'Lorem Ipsum' or 'Lorum Ipsum' stuff?

In publishing and graphic design, placeholder text is commonly used to demonstrate the elements of a document or visual presentation, such as font, typography, and layout. Even though using "lorem ipsum" often arouses curiosity because of its resemblance to classical Latin, it is not intended to have meaning. Where text is visible in a document, people tend to focus on the textual content rather than upon overall presentation, so publishers use lorem ipsum when displaying a typeface or design elements and page layout in order to direct the focus to the publication style and not the meaning of the text. 
</div>

使整个过程持续一段时间

2 个答案: