JavaScriptのタイプライターエフェクトを作成するときに問題が発生しています

ページを開いたときに一度に1文字ずつ入力すると思われますが、まったく表示されません。私はこのjavascriptのもので初心者です。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; 
}

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); 
});

出典

2017-02-11 Tarik Jones

正確に何を達成したいですか？その文章を手紙でサイトに書く機能を作りたいですか？ –

これを使用して、私はより少ないコードで動作させました。私は現実の世界に影響を与えるためにいくつかのランダムな時間に使用されなかったもう一つ..

$(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) 
 
    }) 
 
})

<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>

出典

2017-02-11 15:36:26

$(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に「click me」というテキストを追加しました）。

出典

2017-02-11 15:34:03 matt

あなたがCDNを逃すことがあります。

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

コードは良好です。

出典

2017-02-11 15:40:15

JavaScriptのタイプライターエフェクトを作成するときに問題が発生しています

答えて

関連する問題