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


Posted in Javascript onApril 12, 2018

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

先来看看运行效果:

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

具体代码如下:

<!DOCTYPE>
<html>
<head>
<title>3water.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 相关文章推荐
实例详解jQuery结合GridView控件的使用方法
Jan 04 Javascript
原生JavaScript实现滚动条效果
Mar 24 Javascript
全面解析bootstrap格子布局
May 22 Javascript
jQuery插件Validation快速完成表单验证的方式
Jul 28 Javascript
jQuery实现复选框的全选和反选
Feb 02 Javascript
BootStrap 表单控件之单选按钮水平排列
May 23 Javascript
基于vue2.0实现的级联选择器
Jun 09 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
微信小程序返回多级页面的实现方法
Oct 27 Javascript
浅谈javascript中的prototype和__proto__的理解
Apr 07 Javascript
微信小程序实现弹出菜单动画
Jun 21 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
Sep 19 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 #jQuery
Koa项目搭建过程详细记录
Apr 12 #Javascript
React props和state属性的具体使用方法
Apr 12 #Javascript
react-native 圆弧拖动进度条实现的示例代码
Apr 12 #Javascript
关于vue中 $emit的用法详解
Apr 12 #Javascript
Vue 页面跳转不用router-link的实现代码
Apr 12 #Javascript
JS中promise化微信小程序api
Apr 12 #Javascript
You might like
php中文本数据翻页(留言本翻页)
2006/10/09 PHP
PHP+DBM的同学录程序(2)
2006/10/09 PHP
php 自写函数代码 获取关键字 去超链接
2010/02/08 PHP
php实现设计模式中的单例模式详解
2014/10/11 PHP
PHP生成json和xml类型接口数据格式
2015/05/17 PHP
php多进程中的阻塞与非阻塞操作实例分析
2020/03/04 PHP
DOM精简教程
2006/10/03 Javascript
海量经典的jQuery插件集合
2010/01/12 Javascript
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
jQuery中append()方法用法实例
2015/01/08 Javascript
有关JavaScript中call()和apply() 的一些理解
2016/05/20 Javascript
静态页面html中跳转传值的JS处理技巧
2016/06/22 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
2016/07/11 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
NodeJs使用Mysql模块实现事务处理实例
2017/05/31 NodeJs
浅谈react-native热更新react-native-pushy集成遇到的问题
2017/09/30 Javascript
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
详解vue中localStorage的使用方法
2018/11/22 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
2020/07/28 Javascript
python中实现定制类的特殊方法总结
2014/09/28 Python
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2018/04/19 Python
Python3.5集合及其常见运算实例详解
2019/05/01 Python
Python中six模块基础用法
2019/12/08 Python
超全Python图像处理讲解(多模块实现)
2020/04/13 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
2017/08/18 HTML / CSS
EJB timer的种类
2014/10/28 面试题
CAD制图设计师自荐信
2014/01/29 职场文书
冬季施工防火方案
2014/05/17 职场文书
工伤事故证明
2014/10/20 职场文书
教师个人工作总结范文2014
2014/11/10 职场文书
党员自评材料范文
2014/12/17 职场文书
感恩教育观后感
2015/06/17 职场文书
幼儿园教师心得体会范文
2016/01/21 职场文书