纯js如何实现打字机效果

这篇文章给大家分享的是有关纯js如何实现打字机效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

效果图

应用场景

用处不大，只是看到网上有类似的效果，写了四五十行看不懂的代码，于是尝试能不能简单的实现

html

<h3 id="text-box"></h3><!--一行也是代码-->css        h3 {   width: 800px;   line-height: 40px;   border-bottom: 1px solid;   margin: 200px auto;   font-size: 24px;  }    .animate {   display: inline-block;   padding: 0 5px;   vertical-align: 3px;   font-size: 20px;   font-weight: normal;  }    .animate.on {   animation: fade 1.5s infinite forwards;  }    @keyframes fade {   from {    opacity: 0;   }   to {    opacity: 1;   }  }

js

let textBox = $('#text-box');let index = 0;let str = 'Welcome to my website!';   let len = str.length;   function input() {    textBox.html(str.substr(0, index) + '<span class="animate">|</span>');    setTimeout(function() {    index++;     if(index === len + 1) {     $('.animate').addClass('on');     return;    }     input();    }, Math.random() * 600)    console.log(index);  }   input();

感谢各位的阅读！关于“纯js如何实现打字机效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！