用javascript实现自动输出网页文本


Posted in Javascript onJuly 30, 2015

用javascript实现自动输出网页文本,用了setTimeout(),递归和String.substring();两个函数实现此功能,下面把实现代码分享给大家。

做出的效果就像是有一个打字员在打字.

<!doctype html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="Generator" content="EditPlus®">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <title>Document</title>
 </head>
 <body bgcolor="#ccc" onload="printer();">
  <h2 align="center">文本自动输出</h2>
  <br>
  <br>
  <hr width="400" color="black">
  <br>
 <form align="center">
  <textarea cols="50" rows="30" id="text" style="background-color:#FF99CC; color: #330033; cursor: default; font-family: Arial; font-size: 18px" wrap=virtual></textarea>
 </form>
 </body>
 <script type="text/javascript">
 
  //获取textarea对象
  var text=document.getElementById("text");
  //要输出的内容
  var str=" 传统的HTML语言不能开发交互式的动态网页,而JavaScript却能很好的做到这一点。JavaScript是一门相当简单易学的网络化编程语言,通过把她和HTML语言相互结合起来,能够实现实时的动态网页特效,这给网页浏览者在浏览网页的同时也提供了某些乐趣。";
  var pos=0;
  //利用递归和setTimeout()实现文字输出
  function printer(){
   text.value=str.substring(0,pos)+"|";
   //判断是否到达结尾.如果是则一秒后再来一遍.
   if(pos++>str.length){
    pos=0;
    setTimeout("printer()",1000);
   }else{
    setTimeout("printer()",50);
   }
  }
 </script>
 </html>

以上代码就是本文对用javascript实现自动输出网页文本的全部内容,希望大家喜欢。

Javascript 相关文章推荐
解决jQuery动态获取手机屏幕高和宽的问题
May 07 Javascript
使用typeof方法判断undefined类型
Sep 09 Javascript
关于javascript中dataset的问题小结
Nov 16 Javascript
jqGrid表格应用之新增与删除数据附源码下载
Dec 02 Javascript
vue.js 获取当前自定义属性值
Jun 01 Javascript
Dropify.js图片宽高自适应的方法
Nov 27 Javascript
vue通过点击事件读取音频文件的方法
May 30 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
Nov 14 Javascript
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
Sep 23 Javascript
vue excel上传预览和table内容下载到excel文件中
Dec 10 Javascript
理解javascript中的原型和原型链
Jul 30 #Javascript
原生js与jQuery实现简单的tab切换特效对比
Jul 30 #Javascript
文字垂直滚动之javascript代码
Jul 29 #Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
Jul 29 #Javascript
如何用javascript计算文本框还能输入多少个字符
Jul 29 #Javascript
详解JavaScript的Polymer框架中的通知交互
Jul 29 #Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
Jul 29 #Javascript
You might like
PHP如何得到当前页和上一页的地址?
2006/11/27 PHP
php运行出现Call to undefined function curl_init()的解决方法
2010/11/02 PHP
如何利用预加载优化Laravel Model查询详解
2017/08/11 PHP
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
jQuery Jcrop插件实现图片选取功能
2011/11/23 Javascript
举例讲解JavaScript中关于对象操作的相关知识
2015/11/16 Javascript
jquery实现可旋转可拖拽的文字效果代码
2016/01/27 Javascript
AngularJS 遇到的小坑与技巧小结
2016/06/07 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
2016/12/26 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
2017/04/13 jQuery
微信小程序文章详情页面实现代码
2018/09/10 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
2018/10/18 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
2019/05/15 Javascript
[02:47]3.19DOTA2发布会 国服成长历程回顾
2014/03/25 DOTA
python实现从字典中删除元素的方法
2015/05/04 Python
简单了解python模块概念
2018/01/11 Python
python和shell获取文本内容的方法
2018/06/05 Python
解决python3中cv2读取中文路径的问题
2018/12/05 Python
详解Python函数式编程—高阶函数
2019/03/29 Python
Python实现对adb命令封装
2020/03/06 Python
Python3 shelve对象持久存储原理详解
2020/03/23 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
Django中ORM找出内容不为空的数据实例
2020/05/20 Python
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
去加拿大的旅行和假期:Canadian Affair
2016/10/25 全球购物
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
应届生体育教师自荐信
2013/10/03 职场文书
求职信的要素有哪些呢
2013/12/26 职场文书
中级会计职业生涯规划范文
2014/01/16 职场文书
考试不及格的检讨书
2014/01/22 职场文书
写给老婆的检讨书
2014/02/21 职场文书
数控机床专业自荐信
2014/05/19 职场文书
毕业设计致谢语
2015/05/14 职场文书
Python爬虫爬取全球疫情数据并存储到mysql数据库的步骤
2021/03/29 Python
Android开发实现极为简单的QQ登录页面
2022/04/24 Java/Android