用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 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
May 23 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
Apr 17 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
Jun 06 Javascript
javascript获取选中的文本的方法代码
Oct 30 Javascript
当前流行的JavaScript代码风格指南
Sep 10 Javascript
javascript实现获取浏览器版本、浏览器类型
Dec 02 Javascript
jquery中validate与form插件提交的方式小结
Mar 26 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 Javascript
AngularJS学习第二篇 AngularJS依赖注入
Feb 13 Javascript
Vue 中使用 CSS Modules优雅方法
Apr 09 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
Feb 21 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
Feb 16 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中将字符串转为HTML的实体引用的一个类
2013/02/03 PHP
php对csv文件的读取,写入,输出下载操作详解
2013/08/10 PHP
php导出excel格式数据问题
2014/03/11 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
用js解决数字不能换行问题
2010/08/10 Javascript
JavaScript解析URL参数示例代码
2013/08/12 Javascript
jquery中each遍历对象和数组示例
2014/08/05 Javascript
jQuery中remove()方法用法实例
2014/12/25 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
2016/07/20 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
2017/04/25 Javascript
微信小程序日历组件calendar详解及实例
2017/06/08 Javascript
React Native实现地址挑选器功能
2017/10/24 Javascript
nodejs实现百度舆情接口应用示例
2020/02/07 NodeJs
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
2020/10/27 Javascript
[42:36]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第二局
2016/02/26 DOTA
Python闭包的两个注意事项(推荐)
2017/03/20 Python
Windows下安装Django框架的方法简明教程
2018/03/28 Python
Python自定义装饰器原理与用法实例分析
2018/07/16 Python
python+selenium实现自动化百度搜索关键词
2019/06/03 Python
python中web框架的自定义创建
2019/09/08 Python
Python面向对象之私有属性和私有方法应用案例分析
2019/12/31 Python
python爬虫学习笔记之Beautifulsoup模块用法详解
2020/04/09 Python
Python爬虫自动化爬取b站实时弹幕实例方法
2021/01/26 Python
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
教师评优的个人自我评价分享
2013/09/19 职场文书
大学生职业生涯规划方案
2014/01/03 职场文书
计算机专业毕业生自荐信范文
2014/03/06 职场文书
学习经验演讲稿
2014/05/10 职场文书
日语专业毕业生自荐书
2014/06/18 职场文书
销售工作决心书
2015/02/04 职场文书
拔河比赛新闻稿
2015/07/17 职场文书
《童年》读后感(三篇)
2019/08/27 职场文书
Django实现翻页的示例代码
2021/05/24 Python
Python实现双向链表基本操作
2022/05/25 Python