用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 相关文章推荐
JavaScript中Math对象方法使用概述
Jan 02 Javascript
jQuery表格插件datatables用法总结
Sep 05 Javascript
javascript学习总结之js使用技巧
Sep 02 Javascript
JSONObject使用方法详解
Dec 17 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
Jul 01 Javascript
AngularJS Controller作用域
Jan 09 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
Jan 02 Javascript
微信小程序wepy框架笔记小结
Aug 08 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
Vue登录主页动态背景短视频制作
Sep 21 Javascript
基于Vue 撸一个指令实现拖拽功能
Oct 09 Javascript
js实现小球在页面规定的区域运动
Jun 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
PHP5在Apache下的两种模式的安装
2006/09/05 PHP
PHP压缩html网页代码(清除空格,换行符,制表符,注释标记)
2012/04/02 PHP
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
php遍历树的常用方法汇总
2015/06/18 PHP
PHP递归遍历多维数组实现无限分类的方法
2016/05/06 PHP
php实现断点续传大文件示例代码
2020/06/19 PHP
PHP连接MySQL数据库三种实现方法
2020/12/10 PHP
JavaScript Event学习第七章 事件属性
2010/02/07 Javascript
理解Javascript_12_执行模型浅析
2010/10/18 Javascript
jquery的index方法实现tab效果
2011/02/16 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
2015/03/03 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
2015/12/13 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
2016/10/05 Javascript
老生常谈原生JS执行环境与作用域
2016/11/22 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
微信小程序tabbar不显示解决办法
2017/06/08 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
2017/08/31 Javascript
微信小程序实现弹出菜单
2018/07/19 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
JS实现的雪花飘落特效示例
2019/12/03 Javascript
使用JavaScript计算前一天和后一天的思路详解
2019/12/20 Javascript
Nodejs环境实现socket通信过程解析
2020/07/03 NodeJs
[10:24]郎朗助力完美“圣”典,天籁交织奏响序曲
2016/12/18 DOTA
Python中的深拷贝和浅拷贝详解
2015/06/03 Python
浅谈Python 字符串格式化输出(format/printf)
2016/07/21 Python
Go/Python/Erlang编程语言对比分析及示例代码
2018/04/23 Python
python利用小波分析进行特征提取的实例
2019/01/09 Python
Python 内置变量和函数的查看及说明介绍
2019/12/25 Python
python中添加模块导入路径的方法
2021/02/03 Python
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
2016/08/25 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
Square Off美国/加拿大:世界上最聪明的国际象棋棋盘
2018/12/06 全球购物
珍惜资源的建议书
2014/08/26 职场文书
打架赔偿协议书范本
2014/10/26 职场文书
Android开发手册自定义Switch开关按钮控件
2022/06/10 Java/Android