打字机打字效果 js代码分享

不知道大家有没有看过打字机的打字效果，就是一个一个文字按照有规律的时间，码出来的效果，非常的好看，这里也找到这么一个js代码，效果为打字机打字效果，特意的分享给大家，首先让我们来展示以下效果怎么样。

打字机打字效果展示

测试结束

实现代码

有时候我们分享内容的时候可以使用这个方法，让大家看着舒心，或者是防止伸手党直接拿了东西就走人，让他们的停留时间长一点，都可以。

大家自己替换代码中的中文内容即可：

<div style="margin: 0 auto; margin-left: 10%; color: blue;"><span id="MainContainer">js代码为正在打出的内容，把代码里面的汉字修改成自己想要输出的文字即可，如看不到内容，请<b><a>点击这里</a></b>刷新页面</span></div>
<script> 
var mtimer;
var index=1;
var length=0;
var words;
var delay=80;
function aaa(){
 words='js代码为正在输出的内容，把代码里面的汉字修改成自己想要输出的文字即可，<br />&lt;script type="text/javascript"&gt;<br />var mtimer;<br />var index=1;<br />var length=0;<br />var words;<br />var delay=200;<br />window.onload=function(){<br />words="HTML打字机效果实现";<br />length=words.length;<br />mtimer=setInterval("Show()", delay);<br />}<br />function Show(){<br />if(index==words.length){clearInterval(mtimer);<br />}<br />document.getElementById("MainContainer").innerHTML=words.substr(0,index);<br />index++;}<br />&lt;/script&gt;';
 length=words.length;
 mtimer=setInterval(Show, delay);
function Show(){
 if(index==words.length){
 clearInterval(mtimer);
 }
 document.getElementById("MainContainer").innerHTML=words.substr(0,index);
 index++;
}
};
aaa();
</script>

如果你也喜欢就快点保存这段代码把，或者将这个页面添加在你的书签里面吧。

来源：https://www.wuzuowei.net/7660.html