用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 相关文章推荐
学习ExtJS TextField常用方法
Oct 07 Javascript
JavaScript之HTMLCollection接口代码
Apr 27 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
Dec 21 Javascript
JS代码同步文本框内容的实例方法
Jul 12 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
Sep 03 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
May 14 Javascript
jQuery实现Email邮箱地址自动补全功能代码
Nov 03 Javascript
Vue.js每天必学之方法与事件处理器
Sep 06 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
Oct 30 Javascript
详解JavaScript树结构
Jan 09 Javascript
JavaScript 事件对内存和性能的影响
Jan 22 Javascript
js Array.slice的8种不同用法示例
Jul 10 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
星际争霸秘籍
2020/03/04 星际争霸
提高PHP编程效率 引入缓存机制提升性能
2010/02/15 PHP
php实现的表单验证类完整示例
2019/08/13 PHP
JavaScript关于select的相关操作说明
2010/01/13 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
2011/03/16 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
2014/06/06 Javascript
jquery delay()介绍及使用指南
2014/09/02 Javascript
大型JavaScript应用程序架构设计模式
2016/06/29 Javascript
基于jQuery实现表格的查看修改删除
2016/08/01 Javascript
原生JS实现首页进度加载动画
2016/09/14 Javascript
ES6中Symbol类型用法实例详解
2017/04/06 Javascript
nodejs mysql 实现分页的方法
2017/06/06 NodeJs
微信小程序url与token设置详解
2017/09/26 Javascript
React Native模块之Permissions权限申请的实例相机
2017/09/28 Javascript
前端axios下载excel文件(二进制)的处理方法
2018/07/31 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
2019/09/28 Javascript
JavaScrip如果基于url实现图片下载
2020/07/03 Javascript
vue实现单一筛选、删除筛选条件
2020/10/26 Javascript
零基础写python爬虫之抓取糗事百科代码分享
2014/11/06 Python
TensorFlow在MAC环境下的安装及环境搭建
2017/11/14 Python
Python图像处理之颜色的定义与使用分析
2019/01/03 Python
Python 通过截图匹配原图中的位置(opencv)实例
2019/08/27 Python
python tkinter图形界面代码统计工具
2019/09/18 Python
Python 装饰器@,对函数进行功能扩展操作示例【开闭原则】
2019/10/17 Python
用python画一只可爱的皮卡丘实例
2019/11/21 Python
Python调用系统命令os.system()和os.popen()的实现
2020/12/31 Python
香港莎莎官网Sasa.com:亚洲著名国际化妆品商城
2019/11/10 全球购物
销售总监工作职责
2013/11/21 职场文书
教育项目合作协议书格式
2014/10/17 职场文书
求职导师推荐信范文
2015/03/27 职场文书
土建技术员岗位职责
2015/04/11 职场文书
2015年乡镇科普工作总结
2015/05/13 职场文书
2016婚礼主持词开场白
2015/11/24 职场文书
心得体会该怎么写呢?
2019/06/27 职场文书
教你如何用cmd快速登录服务器
2022/06/10 Servers
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript