用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的面向对象(一)
Nov 09 Javascript
关于IE7 IE8弹出窗口顶上
Dec 22 Javascript
document节点对象的获取方式示例介绍
Dec 24 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
Mar 28 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
Jun 16 Javascript
jquery中$each()方法的使用指南
Apr 30 Javascript
jquery判断输入密码两次是否相等
Apr 22 Javascript
原生js封装的一些jquery方法(详解)
Sep 20 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
Dec 08 Javascript
详解js的事件代理(委托)
Dec 22 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 Javascript
JavaScrip如果基于url实现图片下载
Jul 03 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更新记录的代码
2008/06/07 PHP
php GD绘制24小时柱状图
2008/06/28 PHP
ionCube 一款类似zend的PHP加密/解密工具
2010/07/25 PHP
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装(win+linux)
2012/05/05 PHP
Yii2框架数据库简单的增删改查语法小结
2016/08/31 PHP
网上抓的一个特效
2007/05/11 Javascript
帮助避免错误的Javascript陷阱清单
2009/05/31 Javascript
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
最佳的addEvent事件绑定是怎样诞生的
2011/10/24 Javascript
JS 实现获取打开一个界面中输入的值
2013/03/19 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
2015/10/10 Javascript
第一次接触JS require.js模块化工具
2016/04/17 Javascript
Bootstrap表单简单实现代码
2017/03/06 Javascript
JS实现网页抢购功能(触发,终止脚本)
2017/11/27 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
2018/05/14 Javascript
Mint UI组件库CheckList使用及踩坑总结
2018/12/20 Javascript
vue实现分页组件
2020/06/16 Javascript
Node.js实现一个HTTP服务器的方法示例
2019/05/13 Javascript
浅入深出Vue之组件使用
2019/07/11 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
详解Python正则表达式re模块
2019/03/19 Python
详解爬虫被封的问题
2019/04/23 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
python利用os模块编写文件复制功能——copy()函数用法
2020/07/13 Python
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
2014/05/07 HTML / CSS
微信浏览器取消缓存的方法
2015/03/28 HTML / CSS
美国美食礼品篮网站:Gourmet Gift Baskets
2019/12/15 全球购物
平面设计师的工作职责
2013/11/21 职场文书
汽车技术服务与营销专业推荐信
2013/11/29 职场文书
乔迁宴答谢词
2014/01/21 职场文书
合伙经营协议书
2014/04/18 职场文书
百日安全生产活动总结
2014/07/05 职场文书
财务务虚会发言材料
2014/10/20 职场文书
SQL CASE 表达式的具体使用
2022/03/21 SQL Server
victoriaMetrics库布隆过滤器初始化及使用详解
2022/04/05 Golang
WIN10使用IIS部署ftp服务器详细教程
2022/08/05 Servers