用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 相关文章推荐
一个收集图片的bookmarlet(js 刷新页面中的图片)
May 27 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
Aug 16 Javascript
jquery仿搜索自动联想功能代码
May 23 Javascript
推荐8款jQuery轻量级树形Tree插件
Nov 12 Javascript
node.js中的buffer.slice方法使用说明
Dec 10 Javascript
js canvas实现简单的图像扩散效果
Jun 28 Javascript
浅谈JsonObject中的key-value数据解析排序问题
Dec 06 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
Oct 30 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
Apr 20 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
Sep 05 Javascript
微信小程序wx.request的简单封装
Nov 13 Javascript
js中Function引用类型常见有用的方法和属性详解
Dec 11 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 nl2br()格式化输出的详解
2013/06/05 PHP
PHP HTTP 认证实例详解
2016/11/03 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
云网广告中的代码,提示出错,大家找找
2006/11/21 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
2013/09/04 Javascript
提高NodeJS中SSL服务的性能
2014/07/15 NodeJs
JS实现table表格数据排序功能(可支持动态数据+分页效果)
2016/05/26 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
2016/06/12 Javascript
js轮盘抽奖实例分析
2020/04/17 Javascript
使用JSON作为函数的参数的优缺点
2016/10/27 Javascript
js中常用的Math方法总结
2017/01/12 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
2018/09/15 Javascript
this.$toast() 了解一下?
2019/04/18 Javascript
Angular实现svg和png图片下载实现
2019/05/05 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
2020/03/10 Javascript
微信小程序实现点击生成随机验证码
2020/09/09 Javascript
[02:25]DOTA2英雄基础教程 虚空假面
2014/01/02 DOTA
python读取html中指定元素生成excle文件示例
2014/04/03 Python
python多重继承实例
2014/10/11 Python
机器学习10大经典算法详解
2017/12/07 Python
python实现图书管理系统
2018/03/12 Python
神经网络相关之基础概念的讲解
2018/12/29 Python
python实现K近邻回归,采用等权重和不等权重的方法
2019/01/23 Python
Python类绑定方法及非绑定方法实例解析
2020/10/09 Python
举例详解HTML5中使用JSON格式提交表单
2015/06/16 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
2018/06/12 HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
软件测试企业面试试卷
2016/07/13 面试题
2013年员工自我评价范文
2013/12/27 职场文书
公司道歉信范文
2014/01/09 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
中华在我心中演讲稿
2014/09/13 职场文书
服务员岗位职责范本
2015/04/09 职场文书
2019毕业典礼主持词!
2019/07/05 职场文书
写作技巧:如何撰写商业计划书
2019/08/08 职场文书
如何自己动手写SQL执行引擎
2021/06/02 MySQL