欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-08 13:15:19
本文实例讲述了javascript实现简单的文本逐字打印效果。分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下:

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

先来看看运行效果:

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

具体代码如下:

<!doctype>
<html>
<head>
<title>www.jb51.net 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程序设计有所帮助。