Question

我尝试创建一个更逼真的打字，这会输入错误并通过删除/添加字符来纠正它们。

然而，我做了一个简单的解决方案，可以通过slice添加和删除字符。但我不知道如何实现错误的功能。

这是我到目前为止所做的：

var str = 'Foo bar is not equal to bar foo.';
var len = str.length;

var elem = document.body;

var rem = len;
var add = 0;

(function type(){
  if(!rem || add === len) return;

  // write
  elem.innerHTML = str.slice(0, ++add);

  // remove
  // elem.innerHTML = str.slice(0, --rem);

  setTimeout(type, 100);
}());

http://jsbin.com/upufaf/6/edit

任何想法或已经完成的解决方案如何使其发挥作用？

BTW：已经有一些名为realistic typewriter的东西了，不过我认为这个解决方案对于这个简单的问题来说太过臃肿了。

Answer 1

var str = 'Foo bar is not equal to bar foo.' ;
var alphabet = 'abcdefghijklmnopqrstuvwxyz' ;
var pos = 0 ;
var tmpStr = '' ;
var doBackspace = false ;
function startTyping (str) {

    if(doBackspace) {
        tmpStr = tmpStr.slice(0,tmpStr.length-1);
        doBackspace = false ;
    } else {

        if(Math.ceil((Math.random()*100)) < 80) {
            tmpStr += str[pos] ;
            pos++ ;

        } else {
            tmpStr += alphabet[Math.floor(Math.random()*(alphabet.length))] ;
            doBackspace = true ;
        }
    }   
    $('body').html(tmpStr) ;

    if(pos < str.length) {
        setTimeout(function(){
            startTyping(str)
        }, 300) ;
    }
}
$(document).ready(function(){
    startTyping(str) ;
});

可以将间隔300更改为更高的值以降低打字速度，也可以在字母表中添加字符以增加可能错误字符的数量，将80更低的值增加以增加错误的机会

创建更逼真的打字效果，随机删除/添加字符

1 个答案: