主页 / 网络编程 /

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

网络编程 2021-07-04 17:34www.168986.cn编程入门
这篇文章主要介绍了JavaScript实现简单的文本逐字打印效果,涉及javascript结合时间函数动态操作页面元素相关实现技巧,需要的朋友可以参考下

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

先来看看运行效果

具体代码如下

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

上一篇：基于angular6.0实现的一个组件懒加载功能示例 下一篇：jQuery实现鼠标点击处心形漂浮的炫酷效果示例

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by