用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创建div 实现代码
Apr 27 Javascript
jquery 输入框数字限制插件
Nov 10 Javascript
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
Apr 06 Javascript
浅说js变量
May 25 Javascript
简体中文转换繁体中文(实现代码)
Dec 25 Javascript
javascript匀速运动实现方法分析
Jan 08 Javascript
Bootstrap警告框(Alert)插件使用方法
Mar 21 Javascript
AngularJS中$http的交互问题
Mar 29 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
Jun 12 Javascript
vue.js 获取select中的value实例
Mar 01 Javascript
详解express + mock让前后台并行开发
Jun 06 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
Oct 24 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自定义函数收代码
2010/08/01 PHP
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
8个必备的PHP功能实例代码
2013/10/27 PHP
Yii2框架实现数据库常用操作总结
2017/02/08 PHP
PHP共享内存使用与信号控制实例分析
2018/05/09 PHP
Ajax+PHP实现的删除数据功能示例
2019/02/12 PHP
解决Laravel 使用insert插入数据,字段created_at为0000的问题
2019/10/11 PHP
学习jquery之一
2007/04/27 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
2013/11/08 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
2015/03/25 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
微信小程序实现MUI数字输入框效果
2018/01/31 Javascript
vue实现简单的MVVM框架
2018/08/05 Javascript
angularjs使用div模拟textarea文本框的方法
2018/10/02 Javascript
浅谈vue限制文本框输入数字的正确姿势
2019/09/02 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
2020/01/22 Javascript
python文件写入实例分析
2015/04/08 Python
Python线程的两种编程方式
2015/04/14 Python
Python制作爬虫抓取美女图
2016/01/20 Python
完美解决Python2操作中文名文件乱码的问题
2017/01/04 Python
详解python上传文件和字符到PHP服务器
2017/11/24 Python
Tensorflow之Saver的用法详解
2018/04/23 Python
在Mac下使用python实现简单的目录树展示方法
2018/11/01 Python
django中使用POST方法获取POST数据
2019/08/20 Python
python实现从wind导入数据
2019/12/03 Python
scrapy处理python爬虫调度详解
2020/11/23 Python
违反交通安全法检讨书
2014/10/24 职场文书
2014年银行员工工作总结
2014/11/12 职场文书
公司总经理岗位职责
2015/04/01 职场文书
歼十出击观后感
2015/06/11 职场文书
让人感觉高大上的讲话稿怎么写?
2019/07/08 职场文书
元素水平垂直居中的方式
2021/03/31 HTML / CSS
Pytorch中TensorBoard及torchsummary的使用详解
2021/05/12 Python
Mysql分库分表之后主键处理的几种方法
2022/02/15 MySQL
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python