用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 单击li防止重复加载的实现代码
Dec 24 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
Jan 11 Javascript
js动态创建表格,删除行列的小例子
Jul 20 Javascript
JavaScript运行时库属性一览表
Mar 14 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
Oct 20 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
Jan 16 Javascript
vue 组件中添加样式不生效的解决方法
Jul 06 Javascript
详解webpack模块加载器兼打包工具
Sep 11 Javascript
在vue中使用vue-echarts-v3的实例代码
Sep 13 Javascript
vue发送websocket请求和http post请求的实例代码
Jul 11 Javascript
详解ES6 Promise的生命周期和创建
Aug 18 Javascript
vue实现拖拽进度条
Mar 01 Vue.js
理解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修改NetBeans默认字体的大小
2013/07/02 PHP
PHP实现无限级分类(不使用递归)
2015/10/22 PHP
功能强大的PHP发邮件类
2016/08/29 PHP
prototype 中文参数乱码解决方案
2009/11/09 Javascript
jquery tab插件制作实现代码
2010/06/22 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
Ajax执行顺序流程及回调问题分析
2012/12/10 Javascript
javascript通过className来获取元素的简单示例代码
2014/01/10 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
2014/09/04 Javascript
node.js中的fs.mkdirSync方法使用说明
2014/12/17 Javascript
js判断登录与否并确定跳转页面的方法
2015/01/30 Javascript
jquery图片滚动放大代码分享(1)
2015/08/25 Javascript
JavaScript转换与解析JSON方法实例详解
2015/11/24 Javascript
百度地图给map添加右键菜单(判断是否为marker)
2016/03/04 Javascript
浅谈vue父子组件怎么传值
2018/07/21 Javascript
微信小程序wepy框架笔记小结
2018/08/08 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
vue实现简单瀑布流布局
2020/05/28 Javascript
详解Python的Django框架中inclusion_tag的使用
2015/07/21 Python
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
完美解决在oj中Python的循环输入问题
2018/06/25 Python
python机器学习库xgboost的使用
2020/01/20 Python
如何让PyQt5中QWebEngineView与JavaScript交互
2020/10/21 Python
欧缇丽英国官方网站:Caudalie英国
2016/08/17 全球购物
韩国女装NO.1网店:STYLENANDA
2016/09/16 全球购物
SmartBuyGlasses英国:购买太阳镜和眼镜
2018/01/29 全球购物
Agoda中文官网:安可达(低价预订全球酒店)
2021/01/18 全球购物
《石榴》教学反思
2014/03/02 职场文书
廉洁家庭事迹材料
2014/05/15 职场文书
个人授权委托书
2014/09/15 职场文书
车辆年审委托书范本
2014/09/18 职场文书
关于颐和园的导游词
2015/01/30 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书
MySQL令人咋舌的隐式转换
2021/04/05 MySQL
Java版 单机五子棋
2022/05/04 Java/Android
Win11自动黑屏怎么办 Win11自动黑屏设置教程
2022/07/15 数码科技