Question

我想显示一条模拟键盘写入的欢迎信息。我尝试这样做，但我无法实现它：

$(function(){
    $('h2').text(''); //delete the previous text
    var msg = 'Welcome'; //new text for the h2 element
    var phrase = '';

    for(var i=0; i<msg.length; i++){
        phrase += msg[i];
        $('h2').text(phrase).delay(10000);//here i want to pause 
    }
});

Answer 1

使用函数setTimeout来模拟该效果。

＆＃13;

$(function() {
  $('h2').text(''); //delete the previous text
  
  function write(msg, phrase, index) {
    if (index == msg.length) return;
  
    phrase += msg[index];
    $('h2').text(phrase);
    
    setTimeout(function() {
      write(msg, phrase, ++index);
    }, 100);
  }
  
  var msg = 'Welcome'; //new text for the h2 element
  write(msg, '', 0);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2></h2>

＆＃13;

如何实现打字机效果？

1 个答案: