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 相关文章推荐
js window.onload 加载多个函数的方法
Nov 02 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
Aug 30 Javascript
javascript使用闭包模拟对象的私有属性和方法
Oct 05 Javascript
常用原生js自定义函数总结
Nov 20 Javascript
JS设置时间无效问题的解决办法
Feb 18 Javascript
Node.JS中事件轮询(Event Loop)的解析
Feb 25 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
May 27 Javascript
vuejs实现本地数据的筛选分页功能思路详解
Nov 15 Javascript
详解node Async/Await 更好的异步编程解决方案
May 10 Javascript
javascript中call()、apply()的区别
Mar 21 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
Jun 27 Javascript
vue vant中picker组件的使用
Nov 03 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
咖啡豆要不要放冰箱的原因
2021/03/04 冲泡冲煮
学习php设计模式 php实现原型模式(prototype)
2015/12/07 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
Laravel框架查询构造器 CURD操作示例
2019/09/04 PHP
jquery对表单操作2
2011/04/06 Javascript
解析JavaScript中的标签语句
2013/06/19 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
javascript 数组排序函数sort和reverse使用介绍
2013/11/21 Javascript
javascript中的取反再取反~~没有意义
2014/04/06 Javascript
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
javascript实现3D切换焦点图
2015/10/16 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
2015/12/08 Javascript
jQuery实现无限往下滚动效果代码
2016/04/16 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
2016/10/01 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
[05:02][DOTA2]DOTA进化论 第一期
2013/09/27 DOTA
python操作日期和时间的方法
2014/03/11 Python
Linux RedHat下安装Python2.7开发环境
2017/05/20 Python
python-opencv在有噪音的情况下提取图像的轮廓实例
2017/08/30 Python
python 读取txt中每行数据,并且保存到excel中的实例
2018/04/29 Python
python 实现批量xls文件转csv文件的方法
2018/10/23 Python
一篇文章弄懂Python中的可迭代对象、迭代器和生成器
2019/08/12 Python
python3 pathlib库Path类方法总结
2019/12/26 Python
Python猴子补丁知识点总结
2020/01/05 Python
ALDO英国官网:加拿大女鞋品牌
2018/02/19 全球购物
土木工程应届生求职信
2013/10/31 职场文书
教师求职自荐信
2014/03/09 职场文书
勤奋学习演讲稿
2014/05/10 职场文书
六一亲子活动总结
2014/07/01 职场文书
交通事故协议书范文
2014/10/23 职场文书
装饰技术负责人岗位职责
2015/04/13 职场文书
社区义诊通知
2015/04/24 职场文书
法人代表证明书范本
2015/06/18 职场文书
浅析Python实现DFA算法
2021/06/26 Python
为什么MySQL 删除表数据 磁盘空间还一直被占用
2021/10/16 MySQL