用javascript实现自动输出网页文本

用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实现自动输出网页文本的全部内容，希望大家喜欢。

赞 (0)

相关推荐

  • JavaScript动态修改网页元素内容的方法

    本文实例讲述了JavaScript动态修改网页元素内容的方法.分享给大家供大家参考.具体分析如下: 下面的JS代码当用户点击提交按钮后,通过元素的textContent或者innerHTML动态指定元素的内容 <script type="text/javascript"> function showCard() { var message = document.getElementById("CCN").value; var element = docu

  • 利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域

    原理就是循环获取网页上的控件,然后设置disabled 属性为true. 代码如下: 复制代码 代码如下: <script type="text/javascript">    var nodeList = document.getElementsByTagName("input");    for (var i = 0; i < nodeList.length; i++) {        nodeList[i].disabled = true;

  • JavaScript实现点击按钮切换网页背景色的方法

    JavaScript实现点击按钮切换网页背景色的方法

    本文实例讲述了JavaScript实现点击按钮切换网页背景色的方法.分享给大家供大家参考,具体如下: 这里演示JavaScript用按钮随意变换背景颜色,每点击一下按钮,就可以随机改变一种网页背景颜色.颜色值事先是保存在JS的数组里,你在代码里会发现他们,若不想要某个颜色,就替换掉即可. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-btn-click-rand-bgcolor-codes/ 具体代码如下: <!DOCTYPE HTML

  • JavaScript实现自动生成网页元素功能（按钮、文本等）

    JavaScript实现自动生成网页元素功能（按钮、文本等）

    创建元素的方法: 1.利用createTextNode()创建一个文本对象 2.利用createElement()创建一个标签对象 3.直接利用容器标签中的一个属性:innerHTML-----本质上改该标签容器中的"html代码",不是我们认为的对象树的操作 详解代码: <body> <input type="button" value="创建并添加节点1" onclick="addNode1()"/>

  • javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法

    本文实例讲述了javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法.分享给大家供大家参考.具体分析如下: 这里点击按钮后,弹出一个可关闭的层窗口,随之网页背景变灰,在QQ网站上经常会看到QQ登录的效果,就和这个很类似,代码段基于JavaScript,根据你的情况使用,有时候是用CSS完成的这种功能. <html> <head> <meta http-equiv="Content-Type" content="text/htm

  • javascript实现div浮动在网页最顶上并带关闭按钮效果实例

    复制代码 代码如下: <html> <head> <title>javascript实现div浮动在网页最顶上并带关闭按钮效果实例</title> <style type="text/css"> <!-- body { margin: 0px;padding: 0px;text-align: center;} TD {FONT-SIZE: 12px; COLOR: #333;} #toubiao {BORDER-BOTT

  • 19款Javascript富文本网页编辑器

    19款Javascript富文本网页编辑器

    1. AIE (演示地址) AIE是一个开源的ajax图片编辑器,基于ExtJS与PHP ImageMagick开发,易于与博客/相册等其它应用相集成.提供调整图片大小,裁剪图片,旋转/翻转图片,应用滤镜,添加文本,添加水印等功能. 2. MarkitUp (演示地址) MarkitUp是一个轻量级,可定制,灵活的WYSIWYG Editor. 3. SmartMarkUP SmartMarkUP是一个轻量级,强大的JavaScript library,它能够将Textarea控件转换成富文本编

  • Javascript实现带关闭按钮的网页漂浮广告代码

    复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>带关闭按钮的网页漂浮广告代码</title> </head> <body> <div id="img" style="position: absol

  • 用javascript实现自动输出网页文本

    用javascript实现自动输出网页文本,用了setTimeout(),递归和String.substring();两个函数实现此功能,下面把实现代码分享给大家. 做出的效果就像是有一个打字员在打字. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content=&q

  • javascript实现自动输出文本（打字特效）

    主要利用了setTimeout(),递归和String.substring(); 做出的效果就像是有一个打字员在打字. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name=&quo

  • JavaScript实现自动跳转文本功能

    贴一段自动跳转文本的代码实现: 实现代码: <html> <head> <title>文本跳转</title> <style type=text/css> body{ MARGIN-TOP: 10px; FONT-SIZE: 10pt; MARGIN-LEFT: 10px; MARGIN-RIGHT: 0px; FONT-FAMILY: "微软雅黑" } </style> <meta http-equiv=C

  • JavaScript实现带自动提示的文本框效果代码

    示例一:直接编写AJAX 实现. 客户端: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Ajax实现自动提示的文本框</title> <st

  • asp(JavaScript)自动判断网页编码并转换的代码

    完整的示例代码如下: 复制代码 代码如下: <%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>JavaScript自动判断网页编码并转换</titl

  • JavaScript实现点击自动选择TextArea文本的方法

    本文实例讲述了JavaScript实现点击自动选择TextArea文本的方法.分享给大家供大家参考.具体实现方法如下: <textarea rows="10" cols="50" onclick="this.focus();this.select()" readonly="readonly"> example text </textarea> 希望本文所述对大家的javascript程序设计有所帮助.

  • Javascript脚本实现静态网页加密实例代码

    Javascript脚本实现静态网页加密,阅读Javascript脚本实现静态网页加密,前两天看见有人问静态网页加密问题,就写了这个代码思路:加密时:先把用户的密钥A用md5加密为B,然后用B异或源文件S0得到目标文件S1,把S1存入js变量中.解密时:询问密钥,然后操作同加密 前两天看见有人问静态网页加密问题,就写了这个代码 思路: 加密时:先把用户的密钥A用md5加密为B,然后用B异或源文件S0得到目标文件S1,把S1存入js变量中. 解密时:询问密钥,然后操作同加密. 因为用了md5,个人

  • JavaScript实现自动消除按钮功能的方法

    JavaScript实现自动消除按钮功能的方法

    本文实例讲述了JavaScript实现自动消除按钮功能的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript自动消除前项显示的内容,在网页特定方位显示内容,第一个按钮可用,但第二个在第一个点击之后就不能用了,如果想让第二个按钮起作用,你需要对其进行功能消除,如本示例代码就实现这样一种功能. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

  • javascript实现自动填写表单实例简析

    javascript实现自动填写表单实例简析

    本文实例讲述了javascript实现自动填写表单的方法.分享给大家供大家参考,具体如下: 在平时开发过程中,或者在访问某些站点,经常要频繁地填写一大堆表单时,我们可以利用javascript,写一段脚本,预先把要填的信息准备好,然后模拟点击按钮的动作,自动提交表单,轻松且高效. 步骤 1. 找到页面中对应的form,把form中所需的html控件列出来,如 <form name="customersForm" id="myform" method="

随机推荐