<HTML>
 <HEAD>
  <TITLE> 多条公告栏 </TITLE>  <script language="Javascript">
  <!--设计一个控制多条信息的公告栏
  var i=0;
  var TextNumber=-1;//控制信息是否显示一个周期
  var TextInput=new Object();//使用Object()定义数组实例
  var HelpText="";//用于加载控制信息条目
  var Text="";//用于加载信息
  var Interval=50;//显示每个字的事件间隔
  var message=0;//显示信息条数
  var addPadding="\r\n";//定义一个变量空格、换行  //定义多条信息文字段
  TextInput[0]="今天有一个新的网站介绍给你";
  TextInput[1]="欢迎你的光临!本站为你提供大量javascript下载";
  TextInput[2]="重点介绍javascript";
  TextInput[3]="与制作网页特效密切相关的技术";
  TextInput[4]="本站同时还有其他有用的栏目";
  TextInput[5]="还有技术进展新闻及相关的资料";
  TextInput[6]="还有宽带方面的大量技术文章";
  TextInput[7]="本站网址http://dynamicdrive.com/";
  TotalTextInput=7;//为数组赋值,方便输出
  var Version=navigator.appVersion;//配置不同版本versions的单个字显示间隔
  if(Version.substring(0,1)==3)
  {
Interval=200;
addPadding="";
  }
  for(var addPause=0;addPause<=TotalTextInput; addPause++)
  {
TextInput[addPause]=addPadding+TextInput[addPause];//在每段文字前添加了空格字符
  }  //定义两个标号和逻辑变量
  var TimerId
  var TimerSet=false;  //在阅读信息按钮中调用,显示下一条信息
  function nextMessage()
  {
if(!TimerSet)//第一次调用时条件为真
{
TimerSet=true;
clearTimeout(TimerId);//停止或清除递归
if(TextNumber>=TotalTextInput)
{
alert("这是最后一条信息了");//window.alert
TimerSet=false;
}
else
{
TextNumber+=1;
message=TextNumber+1;//显示第几条信息
document.forms[0].elements[2].value=message;//在单行文本框中显示第几条信息的提示
Text=TextInput[TextNumber];//找到要显示的信息条
HelpText=Text;//将文字段赋值给HelpText
}
showText();//将文字段以打字效果显示出来
}
  }  //用rollMessage()函数显示文字
  //打字效果速度控制
  function showText()
  {
if(TimerSet)
{
Text=rollMessage();
TimerId=setTimeout("showText()",Interval);
document.forms[0].elements[0].value=Text;//使用文档元素按位置访问格式显示字符串
}
  }  //将文字段中文字一个个在定义的时间间隔内显示,并且returns(as Text)
  function rollMessage()
  {
i++;//i指向一个特定文字,第一次执行i值为1
var CheckSpace=HelpText.substring(i-1,i);
CheckSpace=""+CheckSpace;//在获取的字符串前添加一个空格符
if(CheckSpace==" ")
{i++;}//第一次执行后i值为2
if(i>=HelpText.length+1)
{
TimerSet=false;
Text=HelpText.substring(0,i);
i=0;
return(Text);
}
Text=HelpText.substring(0,i);//一个文字段中的第1到第i+1个文字串
return(Text);//将取得的字符串返回
  }
  function initTType()
  {
Text="\r\n Manual Tele-Type Display";
document.forms[0].elements[0].value=Text;//将取得的字符串显示出来
  }  //在公告栏按钮中调用,倒叙显示文字段信息
  function converseMessage()
  {
if(!TimerSet&& TextNumber!=-1)
{
TimerSet=true;
clearTimeout(TimerId);
if(TextNumber<=0)
{
alert("这已经是第1条信息了");
TimerSet=false;
}
else
{
TextNumber-=1;
message=TextNumber+1;
document.forms[0].elements[2].value=message;//在单行文本框中显示第几条信息
Text=TextInput[TextNumber];
HelpText=Text;
}
showText();//以打字效果显示信息条
}
  }
  -->
  </script>
 </HEAD> <BODY>
 <form>
 <table cellspacing="0" cellpadding="0" width="17%">
 <tr><td width="100%" colspan="3" valign="top">
 <textarea name="teletype" rows="3" cols="28" wrap="yes">
 单击阅读按钮显示文字信息!
 </textarea></td></tr>
 <tr align="center">
 <td width="40%" valign="top" bgcolor="#EEEEEE">
 <input type="button" value="公告栏" onClick="converseMessage()"></td>
 <td width="30%" bgcolor="#c8c8c8" valign="top">
 <input type="text" value="共8条" size="5"name="1"></td>
 <td width="30%" bgcolor="#eeeeee" valign="top">
 <input type="button" value="阅 读" onClick="nextMessage()"></td>
 </tr>
 </table>
 </form>
 </BODY>
</HTML>

解决方案 »

  1.   

    令人头晕的代码,先放进代码段里面吧
    <HTML>
     <HEAD>
      <TITLE> 多条公告栏 </TITLE>  <script language="Javascript">
      <!--设计一个控制多条信息的公告栏
      var i=0;
      var TextNumber=-1;//控制信息是否显示一个周期
      var TextInput=new Object();//使用Object()定义数组实例
      var HelpText="";//用于加载控制信息条目
      var Text="";//用于加载信息
      var Interval=50;//显示每个字的事件间隔
      var message=0;//显示信息条数
      var addPadding="\r\n";//定义一个变量空格、换行  //定义多条信息文字段
      TextInput[0]="今天有一个新的网站介绍给你";
      TextInput[1]="欢迎你的光临!本站为你提供大量javascript下载";
      TextInput[2]="重点介绍javascript";
      TextInput[3]="与制作网页特效密切相关的技术";
      TextInput[4]="本站同时还有其他有用的栏目";
      TextInput[5]="还有技术进展新闻及相关的资料";
      TextInput[6]="还有宽带方面的大量技术文章";
      TextInput[7]="本站网址http://dynamicdrive.com/";
      TotalTextInput=7;//为数组赋值,方便输出
      var Version=navigator.appVersion;//配置不同版本versions的单个字显示间隔
      if(Version.substring(0,1)==3)
      {
    Interval=200;
    addPadding="";
      }
      for(var addPause=0;addPause<=TotalTextInput; addPause++)
      {
    TextInput[addPause]=addPadding+TextInput[addPause];//在每段文字前添加了空格字符
      }  //定义两个标号和逻辑变量
      var TimerId
      var TimerSet=false;  //在阅读信息按钮中调用,显示下一条信息
      function nextMessage()
      {
    if(!TimerSet)//第一次调用时条件为真
    {
    TimerSet=true;
    clearTimeout(TimerId);//停止或清除递归
    if(TextNumber>=TotalTextInput)
    {
    alert("这是最后一条信息了");//window.alert
    TimerSet=false;
    }
    else
    {
    TextNumber+=1;
    message=TextNumber+1;//显示第几条信息
    document.forms[0].elements[2].value=message;//在单行文本框中显示第几条信息的提示
    Text=TextInput[TextNumber];//找到要显示的信息条
    HelpText=Text;//将文字段赋值给HelpText
    }
    showText();//将文字段以打字效果显示出来
    }
      }  //用rollMessage()函数显示文字
      //打字效果速度控制
      function showText()
      {
    if(TimerSet)
    {
    Text=rollMessage();
    TimerId=setTimeout("showText()",Interval);
    document.forms[0].elements[0].value=Text;//使用文档元素按位置访问格式显示字符串
    }
      }  //将文字段中文字一个个在定义的时间间隔内显示,并且returns(as Text)
      function rollMessage()
      {
    i++;//i指向一个特定文字,第一次执行i值为1
    var CheckSpace=HelpText.substring(i-1,i);
    CheckSpace=""+CheckSpace;//在获取的字符串前添加一个空格符
    if(CheckSpace==" ")
    {i++;}//第一次执行后i值为2
    if(i>=HelpText.length+1)
    {
    TimerSet=false;
    Text=HelpText.substring(0,i);
    i=0;
    return(Text);
    }
    Text=HelpText.substring(0,i);//一个文字段中的第1到第i+1个文字串
    return(Text);//将取得的字符串返回
      }
      function initTType()
      {
    Text="\r\n Manual Tele-Type Display";
    document.forms[0].elements[0].value=Text;//将取得的字符串显示出来
      }  //在公告栏按钮中调用,倒叙显示文字段信息
      function converseMessage()
      {
    if(!TimerSet&& TextNumber!=-1)
    {
    TimerSet=true;
    clearTimeout(TimerId);
    if(TextNumber<=0)
    {
    alert("这已经是第1条信息了");
    TimerSet=false;
    }
    else
    {
    TextNumber-=1;
    message=TextNumber+1;
    document.forms[0].elements[2].value=message;//在单行文本框中显示第几条信息
    Text=TextInput[TextNumber];
    HelpText=Text;
    }
    showText();//以打字效果显示信息条
    }
      }
      -->
      </script>
     </HEAD> <BODY>
     <form>
     <table cellspacing="0" cellpadding="0" width="17%">
     <tr><td width="100%" colspan="3" valign="top">
     <textarea name="teletype" rows="3" cols="28" wrap="yes">
     单击阅读按钮显示文字信息!
     </textarea></td></tr>
     <tr align="center">
     <td width="40%" valign="top" bgcolor="#EEEEEE">
     <input type="button" value="公告栏" onClick="converseMessage()"></td>
     <td width="30%" bgcolor="#c8c8c8" valign="top">
     <input type="text" value="共8条" size="5"name="1"></td>
     <td width="30%" bgcolor="#eeeeee" valign="top">
     <input type="button" value="阅 读" onClick="nextMessage()"></td>
     </tr>
     </table>
     </form>
     </BODY>
    </HTML>
      

  2.   

    给你重新写了一个方法,你看这个吧,应该更容易理解些,虽然使用了“闭包”,但同样没有注释,需要你自己查。提高需要靠自己多努力的,只能帮你这些了。<!doctype html>
    <html>
    <head>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
    <style type='text/css'></style>
    <script type='text/javascript'>
    var textInput = new Array();  
      textInput[0]="今天有一个新的网站介绍给你";
      textInput[1]="欢迎你的光临!本站为你提供大量javascript下载";
      textInput[2]="重点介绍javascript";
      textInput[3]="与制作网页特效密切相关的技术";
      textInput[4]="本站同时还有其他有用的栏目";
      textInput[5]="还有技术进展新闻及相关的资料";
      textInput[6]="还有宽带方面的大量技术文章";
      textInput[7]="本站网址http://dynamicdrive.com/";
      
      var next = 0; 
    function move(forward)
    {  
        if(forward) {
            next++;
            if(next > textInput.length) {
                alert("最后一条");
                next--;
                return;
            } 
        }
        else {
            next--;
            if(next <= 0) {
                alert("前面没有了");
                next++;
                return;
            }
        }
        
        var area = document.getElementById("showArea");
        area.innerHTML = "";
        var cur = next-1;
        showText(textInput[cur],area);
    }function showText(text,area) {    
        for(var i = 0 , len = text.length; i < len; i++) {
            setTimeout( function(x) {
                    setTimeout(function() { 
                        area.innerHTML += text[x];
                    }, 100*x);
                    }(i),200);
        }
    }</script>
    </head>
    <body> <textarea  id="showArea" rows="3" cols="80" wrap="yes">
     单击 “上一条” 或者 “下一条” 按钮显示文字信息!
     </textarea>
    <hr>
     <input type="button" value="上一条" id="next" onClick="move(false)"></td> <input type="button" value="下一条" id="prev" onClick="move(true)"></td>
    </body>
    </html>