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 相关文章推荐
返回对象在当前级别中是第几个元素的实现代码
Jan 20 Javascript
jQuery 1.8 Release版本发布了
Aug 14 Javascript
JavaScript语言核心数据类型和变量使用介绍
Aug 23 Javascript
php,js,css字符串截取的办法集锦
Sep 26 Javascript
不到30行JS代码实现Excel表格的方法
Nov 15 Javascript
bootstrap改变按钮加载状态
Dec 01 Javascript
JavaScript的事件机制详解
Jan 17 Javascript
JS实现的合并多个数组去重算法示例
Apr 11 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
May 30 Javascript
JavaScript canvas实现雨滴特效
Jan 10 Javascript
Angular性能优化之第三方组件和懒加载技术
May 10 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程序的方法小结
2012/02/23 PHP
PHP新手用的Insert和Update语句构造类
2012/03/31 PHP
php实现查询百度google收录情况(示例代码)
2013/08/02 PHP
php上传文件并存储到mysql数据库的方法
2015/03/16 PHP
php中get_defined_constants函数用法实例分析
2015/05/12 PHP
IE8 兼容性问题(属性名区分大小写)
2009/06/04 Javascript
jquery控制listbox中项的移动并排序
2009/11/12 Javascript
Javascript解决常见浏览器兼容问题的12种方法
2010/01/04 Javascript
jquery更换文章内容与改变字体大小代码
2013/09/30 Javascript
超级简单的jquery操作表格方法
2014/12/15 Javascript
JS+CSS实现滑动切换tab菜单效果
2015/08/25 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
2016/04/15 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
2016/05/25 Javascript
关于function类中定义变量this的简单说明
2016/05/28 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
微信小程序 request接口的封装实例代码
2017/04/26 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
2017/09/11 Javascript
AngularJS中控制器函数的定义与使用方法示例
2017/10/10 Javascript
vue项目总结之文件夹结构配置详解
2017/12/13 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
2018/09/29 Javascript
JavaScript Image对象实现原理实例解析
2020/08/26 Javascript
详解Python文本操作相关模块
2017/06/22 Python
Python爬虫框架Scrapy常用命令总结
2018/07/26 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
CSS书写规范、顺序和命名规则
2014/03/06 HTML / CSS
英国奢侈品概念店:Base Blu
2019/05/16 全球购物
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
牵手50新加坡:专为黄金岁月的单身人士而设的交友网站
2020/08/16 全球购物
学生会竞聘书范文
2014/03/31 职场文书
医疗纠纷协议书
2014/04/16 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
党的群众路线教育实践活动个人整改措施
2014/10/27 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server