JavaScript实现简单的文本逐字打印效果示例

来源：调星娱乐

本文实例讲述了JavaScript实现简单的文本逐字打印效果。分享给大家供大家参考，具体如下：

先来看看运行效果：

具体代码如下：

<!DOCTYPE>
<html>
<head>
<title>www.gxlcms.com js打字效果</title>
<meta charset="utf-8">
</head>
<style type="text/css">
div {
 width:980px;
 margin:10px auto;
 background:#F3E6EA;
 border:2px outset #f9c6aa;
 color:green;
}
</style>
<script type="text/javascript">
var i=1;
function write()
{
 var id=document.getElementById("main");
 var msg="JS打字机效果 ，原理很简单：每次多获取一个待打出的字符串的值，

输出，覆盖原来输出的内容即可JS打字机效果，原理很简单：每次多获取一个待打出的字符串的值，输出，覆盖原来输出的内容即可JS打字机效果，原理很简单：每次多获取一个待打出的字符串的值，输出，覆盖原来输出的内容即可JS打字机效果，原理很简单：每次多获取一个待打出的字符串的值，输出，覆盖原来输出的内容即可JS打字机效果，原理很简单：每次多获取一个待打出的字符串的值，输出，覆盖原来输出的内容即可JS打字机效果，原理很简单：每次多获取一个待打出的字符串的值，输出，覆盖原来输出的内容即可JS打字机效果，原理很简单：每次多获取一个待打出的字符串的值，输出，覆盖原来输出的内容即可JS打字机效果，原理很简单：每次多获取一个待打出的字符串的值，输出，覆盖原来输出的内容即可JS打字机效果，原理很简单：每次多获取一个待打出的字符串的值，输出，覆盖原来输出的内容即可"; var len=msg.length; var msg1=msg.substring(0,i); id.innerHTML=msg1; if(i==len){clearInterval(t)} else i++; } function time1() { var t=setInterval(function(){write()},50); } </script> <body onload=time1()> <div id="main"></div> </body> </html>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript运动效果与技巧汇总》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。