用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 相关文章推荐
js获取提交的字符串的字节数
Feb 09 Javascript
javascript实现面向对象类的功能书写技巧
Mar 07 Javascript
jquery select(列表)的操作(取值/赋值)
Mar 16 Javascript
利用js实现遮罩以及弹出可移动登录窗口
Jul 08 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
May 11 Javascript
javascript面向对象之对象的深入理解
Jan 13 Javascript
jQuery带时间的日期控件代码分享
Aug 26 Javascript
Bootstrap组合上、下拉框简单实现代码
Mar 06 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
Mar 23 Javascript
vue中的mvvm模式讲解
Jan 31 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
Feb 26 Javascript
简单了解vue 插值表达式Mustache
Jul 22 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
239军机修复记
2021/03/02 无线电
PHP json_encode() 函数详解及中文乱码问题
2015/11/05 PHP
php 防止表单重复提交两种实现方法
2016/11/03 PHP
php基于Redis消息队列实现的消息推送的方法
2018/11/28 PHP
防止页面被iframe(兼容IE,Firefox火狐)
2010/07/04 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
2013/10/29 Javascript
JavaScript实现找出字符串中第一个不重复的字符
2014/09/03 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
jQuery对象与DOM对象转换方法详解
2016/05/10 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
JS清除字符串中重复值的实现方法
2016/08/03 Javascript
微信小程序图表插件(wx-charts)实例代码
2017/01/17 Javascript
AngularJs表单校验功能实例代码
2017/02/09 Javascript
vue集成chart.js的实现方法
2019/08/20 Javascript
jQuery实现开关灯效果
2020/08/02 jQuery
Vue向后台传数组数据,springboot接收vue传的数组数据实例
2020/11/12 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
vue 页面跳转的实现方式
2021/01/12 Vue.js
[02:06]DOTA2肉山黑名单魔法终结者 敌法师中文配音鉴赏
2013/06/17 DOTA
[51:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/30 DOTA
一个简单的python程序实例(通讯录)
2013/11/29 Python
基于python代码实现简易滤除数字的方法
2018/07/17 Python
python批量修改图片后缀的方法(png到jpg)
2018/10/25 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
Python使用crontab模块设置和清除定时任务操作详解
2019/04/09 Python
Python龙贝格法求积分实例
2020/02/29 Python
django-xadmin根据当前登录用户动态设置表单字段默认值方式
2020/03/13 Python
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
档案接收函
2014/01/13 职场文书
开业典礼主持词
2014/03/21 职场文书
大学生就业自我推荐信
2014/05/10 职场文书
小学班主任培训方案
2014/06/04 职场文书
2015年师德师风承诺书
2015/01/22 职场文书
vue项目多环境配置(.env)的实现
2021/07/21 Vue.js