用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定时滑出可最小化的底部提示层特效代码
Oct 02 Javascript
javascript生成随机大小写字母的方法
Feb 20 Javascript
JS动态修改图片的URL(src)的方法
Apr 01 Javascript
JavaScript中apply方法的应用技巧小结
Sep 29 Javascript
移动端基础事件总结与应用
Jan 12 Javascript
js模拟微博发布消息
Feb 23 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
Sep 10 Javascript
如何选择适合你的JavaScript框架
Nov 20 Javascript
3种vue路由传参的基本模式
Feb 22 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
Feb 18 Javascript
详解JavaScript作用域、作用域链和闭包的用法
Sep 03 Javascript
js实现简单商品筛选功能
Feb 02 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
自动跳转中英文页面
2006/10/09 PHP
一个ubbcode的函数,速度很快.
2006/10/09 PHP
简单PHP上传图片、删除图片实现代码
2010/05/12 PHP
PHP中基于ts与nts版本- vc6和vc9编译版本的区别详解
2013/04/26 PHP
destoon实现调用热门关键字的方法
2014/07/15 PHP
PHP重定向与伪静态区别
2017/02/19 PHP
Thinkphp5.0自动生成模块及目录的方法详解
2017/04/17 PHP
firefox下input type=&quot;file&quot;的size是多大
2011/10/24 Javascript
解决js正则匹配换行问题实现代码
2012/12/10 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
2014/04/16 Javascript
推荐8款jQuery轻量级树形Tree插件
2014/11/12 Javascript
node.js中的fs.fchmodSync方法使用说明
2014/12/16 Javascript
jquery制作漂亮的弹出层提示消息特效
2014/12/23 Javascript
js仿微博实现统计字符和本地存储功能
2015/12/22 Javascript
JavaScript中eval函数的问题
2016/01/31 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
Angular2中如何使用ngx-translate进行国际化
2017/05/21 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
2017/07/17 Javascript
使用jQuery实现简单的tab框实例
2017/08/22 jQuery
mpvue开发音频类小程序踩坑和建议详解
2019/03/12 Javascript
jQuery事件blur()方法的使用实例讲解
2019/03/30 jQuery
vue keep-alive的简单总结
2021/01/25 Vue.js
TensorFlow实现卷积神经网络CNN
2018/03/09 Python
python list转矩阵的实例讲解
2018/08/04 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
Python如何将字符串转换为日期
2020/07/31 Python
Kingsoft金山公司C/C++笔试题
2016/05/10 面试题
物流仓储计划书
2014/01/10 职场文书
留学自荐信写作方法
2014/01/27 职场文书
捐助倡议书范文
2014/04/15 职场文书
运动会宣传口号
2014/06/09 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书
golang import自定义包方式
2021/04/29 Golang
Python基础之赋值,浅拷贝,深拷贝的区别
2021/04/30 Python
Vue接口封装的完整步骤记录
2021/05/14 Vue.js