用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 实现复制到粘贴板的功能代码
May 13 Javascript
jQuery Validation Plugin验证插件手动验证
Jan 26 Javascript
JavaScript页面实时显示当前时间实例代码
Oct 23 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
Dec 08 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
Apr 01 Javascript
Vue.js实现微信过渡动画左右切换效果
Jun 13 Javascript
angularjs http与后台交互的实现示例
Dec 21 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
Mar 16 Javascript
Vue 自定义指令功能完整实例
Sep 17 Javascript
JavaScript find()方法及返回数据实例
Apr 30 Javascript
使用JavaScript实现贪吃蛇游戏
Sep 29 Javascript
原生JS实现分页
Apr 19 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 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
解析php中var_dump,var_export,print_r三个函数的区别
2013/06/21 PHP
使用PHP导出Redis数据到另一个Redis中的代码
2014/03/12 PHP
php生成静态页面的简单示例
2014/04/17 PHP
php数组查找函数in_array()、array_search()、array_key_exists()使用实例
2014/04/29 PHP
php检索或者复制远程文件的方法
2015/03/13 PHP
PHP生成各种常见验证码和Ajax验证过程
2016/01/10 PHP
使用php实现网站验证码功能【推荐】
2017/02/09 PHP
javascript分页代码(当前页码居中)
2012/09/20 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
node.js中的fs.realpathSync方法使用说明
2014/12/16 Javascript
NodeJS制作爬虫全过程
2014/12/22 NodeJs
JS简单获取及显示当前时间的方法
2016/08/03 Javascript
详解百度百科目录导航树小插件
2017/01/08 Javascript
jQuery源码分析之init的详细介绍
2017/02/13 Javascript
详解基于webpack2.x的vue2.x的多页面站点
2017/08/21 Javascript
angular的输入和输出的使用方法
2018/09/22 Javascript
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020/07/17 Javascript
[03:44]2014DOTA2国际邀请赛 71专访:DK战队赛前讨论视频遭泄露
2014/07/13 DOTA
[40:10]2015国际邀请赛全明星表演赛
2015/08/07 DOTA
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
python基础教程之循环介绍
2014/08/29 Python
python中lambda()的用法
2017/11/16 Python
Python基于多线程操作数据库相关问题分析
2018/07/11 Python
python将字符串转变成dict格式的实现
2019/11/18 Python
Python爬虫如何应对Cloudflare邮箱加密
2020/06/24 Python
Python爬虫爬取新闻资讯案例详解
2020/07/14 Python
Python 如何定义匿名或内联函数
2020/08/01 Python
python中pop()函数的语法与实例
2020/12/01 Python
一份创业计划书范文
2014/02/08 职场文书
互联网创业计划书写作技巧攻略
2014/03/23 职场文书
公司新年寄语
2014/04/04 职场文书
600字作文之感受大自然
2019/11/27 职场文书
python blinker 信号库
2022/05/04 Python