首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

javascript刚入门,帮小弟我解析下没有备注的地方

2013-04-20 
javascript刚入门,帮我解析下没有备注的地方HTML HEADTITLE 多条公告栏 /TITLEscript language

javascript刚入门,帮我解析下没有备注的地方
<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>
[解决办法]
给你重新写了一个方法,你看这个吧,应该更容易理解些,虽然使用了“闭包”,但同样没有注释,需要你自己查。提高需要靠自己多努力的,只能帮你这些了。

<!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>

热点排行