У меня возникли проблемы с созданием эффекта пишущей машинки javascript

Предполагается, что она набирает одну букву в то время, когда вы открываете страницу, однако она вообще не появляется. Я новичок в этом 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>

Вам нужно было добавить что-то щелкнув. (Я добавил текст «click me» в div).

источник

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

ответ

Смежные вопросы