Question

它打算在你打开页面的时候键入一个字母，然而，它根本没有出现。我是这个javascript的新手。

HTML

<div class="wrap">
  <div class="test type" data-text="Hi, my name is John Doe"></div>
</div>

CSS

body {
  font: 16px/20px sans-serif;
}


.wrap {
  width: 500px;
  margin: 30px auto;
  text-align: center;
}

.test {
  margin-top: 10px;
  text-align: left;
}

JS

function typeWriter(text, n) {
  if (n < (text.length)) {
    $('.test').html(text.substring(0, n+1));
    n++;
    setTimeout(function() {
      typeWriter(text, n)
    }, 100);
  }
}

$('.type').click(function(e) {
  e.stopPropagation();

  var text = $('.test').data('text');

  typeWriter(text, 0);
});

Answer 1

$(function(){
  function typeWriter(text, n) {
    if (n < (text.length)) {
      $('.test').html(text.substring(0, n+1));
      n++;
      setTimeout(function() {
        typeWriter(text, n)
      }, 100);
    }
  }

  $('.type').click(function(e) {
    e.stopPropagation();

    var text = $('.test').data('text');

    typeWriter(text, 0);
  });
});

body {
  font: 16px/20px sans-serif;
}


.wrap {
  width: 500px;
  margin: 30px auto;
  text-align: center;
}

.test {
  margin-top: 10px;
  text-align: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <div class="test type" data-text="Hi, my name is John Doe">Click me</div>
</div>

您需要添加点击内容。（我在div中添加了“点击我”的文字。）

Answer 2

使用这个，我用更少的代码工作。我做的另一件事是使用一些随机时间来给出现实世界的效果。

＆＃13;

$(function(){
 
  var txt = $(".type").data("text").split("");
  txt.forEach(function(chr, i){
  var rand = Math.floor(Math.random() * 100) + 1;
    setTimeout(function(){
        $(".type").append( chr );
      },300*(i+1) + rand)
  })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test type" data-text="Hi, my name is John Doe"></div>

＆＃13;

Answer 3

您可能会错过CDN。

＆＃13;

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

＆＃13;

＆＃13; 你的代码很好。

我无法制作javascript打字机效果

3 个答案: