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 相关文章推荐
javascript 学习之旅 (3)
Feb 05 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
Jul 20 Javascript
jquery中的过滤操作详细解析
Dec 02 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
Mar 09 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
jquery表单提交带错误信息提示效果
Mar 09 Javascript
详解打造 Vue.js 可复用组件
Mar 24 Javascript
新手如何快速理解js异步编程
Jun 24 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
Aug 09 Javascript
TypeScript中使用getElementXXX()的示例代码
Sep 12 Javascript
JS实现横向轮播图(中级版)
Jan 18 Javascript
vue组件入门知识全梳理
Sep 21 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
基于文本的搜索
2006/10/09 PHP
php google或baidu分页代码
2009/11/26 PHP
奇怪的PHP引用效率问题分析
2012/03/23 PHP
实现获取http内容的php函数分享
2014/02/16 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
PHP-FPM 设置多pool及配置文件重写操作示例
2019/10/02 PHP
基于ThinkPHP删除目录及目录文件函数
2020/10/28 PHP
Prototype源码浅析 Enumerable部分之each方法
2012/01/16 Javascript
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
javaScript如何生成xmlhttp
2013/12/16 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
Google Maps API地图应用示例分享
2014/10/23 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
2016/10/01 Javascript
nodejs mysql 实现分页的方法
2017/06/06 NodeJs
详解Ubuntu安装angular-cli遇到的坑
2018/09/08 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
vue+elementUI实现图片上传功能
2019/08/20 Javascript
[59:08]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第一局
2016/02/27 DOTA
python PyTorch预训练示例
2018/02/11 Python
python使用numpy读取、保存txt数据的实例
2018/10/14 Python
Python中的heapq模块源码详析
2019/01/08 Python
Python requests模块实例用法
2019/02/11 Python
python下的opencv画矩形和文字注释的实现方法
2019/07/09 Python
Python 写入训练日志文件并控制台输出解析
2019/08/13 Python
一套C++笔试题面试题
2012/06/06 面试题
解决python 输出到csv 出现多空行的情况
2021/03/24 Python
农行实习自我鉴定
2013/09/22 职场文书
中学家长会邀请函
2014/01/17 职场文书
学校安全责任书范本
2014/07/23 职场文书
房地产项目合作意向书
2015/05/08 职场文书
签证工作证明模板
2015/06/15 职场文书
施工安全责任协议书
2016/03/23 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS
插件导致ECharts被全量引入的坑示例解析
2022/09/23 Javascript