本实例演示如何在网页上以模仿打字机输出的效果显示文本。
向网页上添加一个TEXTAREA控件，并且设置它的id为tickfield，设计完成的网页如图1-4所示。
图1-4 设计完成的网页
在</HEAD>标记前添加一个自定义函数viewtext，将通过调用该函数来实现打字机输出效果：
function viewtext()
{
tickfield.value = text.substring(0, pos) + "_";
if(pos++ == len)
{
pos = 0;
setTimeout("viewtext()", 1000);
}
else
{
setTimeout("viewtext()", 200);
}
}
如果调用viewtext函数，那么就会逐个显示text变量中存储的字符，如果text变量中存储的字符全部都显示完成，那么清空tickfield控件中的内容，重新开始逐个显示text变量中存储的字符。
修改<BODY>标记为：
<BODY bgcolor="#fef4d9" OnLoad="viewtext()">
这样，当网页显示时，调用viewtext函数，实现打字机输出效果。
<HTML>
<HEAD>
<META name="GENERATOR" content=“Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT language="javascript">
<!--
var text="鸿雁不堪愁里听"
var pos = 0;
var len = text.length;
function viewtext()
{
tickfield.value = text.substring(0, pos) + "_";
if(pos++ == len)
{
pos = 0;
setTimeout("viewtext()", 1000);
}
else
{
setTimeout("viewtext()", 200);
}
}
</script>
</HEAD>
<BODY bgcolor="#fef4d9" OnLoad="viewtext()">
<TEXTAREA id=tickfield
style="color: rgb(255,255,255);
background-color: rgb(0,0,0)" >
</TEXTAREA>
</BODY>
</HTML>
保存文件，在浏览器中浏览网页文件，如图1-5所示，文字将逐个“打”出来。
图1-5 打字机输出效果
E- mail:
本站ICP备案号：
