JavaScript 动态网页实例 —— 文字色彩与形状

本文主要是介绍JavaScript 动态网页实例 —— 文字色彩与形状，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

首先介绍霓虹灯文字效果的设计，介绍文字色彩的静态渐变，然后介绍两个文字大小不断变化的示例，最后，则是两段文字色彩动态变化的代码。本章实例针对性较强,稍加修改就可以应用在网页中。读者不必拘泥于实例的效果，而应更重视实现这些效果的方法，相信这些实例能对开阔思路有一定的帮助。

霓虹灯文字

本节给出一段实现霓虹灯效果文字的示例代码，页面中的文字自左至右逐个先变红再变蓝，给人霓虹灯的感觉。

要点

本节代码主要使用了Navigator对象的appName属性、String对象的charAt()方法和length属性，主要功能和用法如下。

当用户访问某个页面时，用户所用浏览器的类型等有用信息可以被检测。JavaScript的Navigator 对象提供了用于检测的性能。Navigator 的属性最常应用于浏览器版本检测。
Navigator 对象的 appName 属性返回浏览器的官方名称，适用于所有浏览器。对于Netscape 浏览器,其返回值为“Netscape”,对于正浏览器,其返回值为“Microsoft IntermetExplorer”。
String 对象是动态对象，需要创建对象实例后才能引用其对象属性和方法。可以把用单引号或双引号括起来的字符串当作字符串对象对待,直接在其后加上“”即可调用 String对象的属性和方法。
String对象中最常用的属性是length，用于表明字符串中包含的字符个数。
charAt方法:返回字符串对象中指定位置的字符。其中，指定位置的取值范围为从0开始，最后一个字符为字符长度减1。若指定位置超出字符串长度，该方法返回一个空串。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<title>霓虹灯文字</title>
<style type="txt/css">
.30pt{font-size:10pt;font-family:宋体;color:#cc0099}
</style>
</head>
<body>
<h1>霓虹灯文字显示示例</h1><hr><br>
<script language="JavaScript">
//要显示的文字
myStr="大江东去，浪淘尽，千古风流人物。";
//文字颜色
textColor1="blue";
//要转换的颜色
textColor2="red";
//字体大小
fontsize="6";
//转换速度：毫秒
speed=200;
i=0;
//区别两种不同的浏览器
if(navigator.appName=="Netscape")
{
document.write("<layer id=a visibility=show></layer><br><br><br>");
}
else
{
document.write("<div id=a></div>");
}
//函数：改变文字颜色
function changeColor()
{
//区别两种不同的浏览器
if(navigator.appName=="Netscape")
{
document.a.document.write("<center><font face=arial size=>"+fontsize+"><font color="+textColor1+">");
for(var j=0;j<myStr.length;j++)
{
//确定要以红色显示的文字
if(j==i)
{
document.a.document.write("<font face=arial color="+textColor2+">"+myStr.charAt(i)+"</font>");
}
else
{
document.a.document.write(myStr.charAt(j));
}
}
document.a.document.write("</font></font></center>");
document.a.document.close();
}
if(navigator.appName=="Microsoft Internet Explorer")
{
//不变的文字
str="<center><font face=arial size="+fontsize+"><font color="+textColor1+">";
for(var j=0;j<myStr.length;j++)
{
if(j==i)
{
str+="<font face=arial color="+textColor2+">"+myStr.charAt(i)+"</font>";
}
else
{
str+=myStr.charAt(j);
}
}
str+="</font></font></center>";
a.innerHTML=str;
}
//存储变化文字所在位置
(i==myStr.length)?i=0:i++;
}
setInterval("changeColor()",speed);
</script>
</body>
</html>

分析