巧用 Javascript 四例

摘自html-point

一、 读取客户端屏幕设置信息

----

众所周知，主页的浏览效果与客户端使用的浏览器以及屏幕区域设置有很大关系。正因为如此，许多页面都标明了“建议使用××浏览器，×*×屏幕设置浏览本页”。了解JavaScript的人都知道，客户端浏览器信息可以用JavaScript中navigator对象来检测。其实，屏幕区域的设置在JavaScript中也可以用screen对象来检测。

---- 例如，在下面的程序中，JavaScript检测屏幕设置，据此转向不同效果的页面。

<script language="JavaScript">
< !---
if (screen.width

>=800){
parent.location.href="bigscreen.htm";
}

else
parent.location.href="smallscreen.htm";
//-- >
< /script

>

二、 自动"更新"网页背景音乐

----

更新及时的主页才能保持对访问者吸引力。如果你在网页中加入了背景音乐，但又不想让访问者反复听同一首音乐的话，用JavaScript编一个动态主页随机播放背景音乐是一种办法。不过在这里我们采用另一种办法，用cookies记录访问者游览该页的次数，根据对该网页的访问次数提供不同的背景音乐。

---- （对cookies，本文不作详细讨论，如对它不熟悉，请参考有关书刊）

<script language="JavaScript" >

<!-- // 创 建 一 个cookie

function setCookie(name,value,expires){
document.cookie=name+"=

"+escape(value)+";"+"expires="+expires+";"
}
// 访 问cookie

function getCookieVal(offset){
var

endstr=document.cookie.indexOf(";",offset);
if (endstr==-1)

endstr=document.cookie.length;
return

unescape(document.cookie.substring(offset,endstr));
}
function

getCookie(name){
var arg=name+"=";
var alength=arg.length;
var

clength=document.cookie.length;
var i=0;
while(i< clength){
var

j=i+alength;
if (document.cookie.substring(i,j)==arg)
return

getCookieVal(j);
i=document.cookie.indexOf(" ",i)+1;
if(i==0) break;

}
return null;
}

//以下内容可根据实际需要更改
var exptime=new Date();

exptime.setTime(exptime.getTime()+3600*1000*24*3);

//设置cookies在客户机上保存3天（3*24*1000*3600毫秒）。
i=getCookie("vtime");
if

((i==null)||(i >5)) i=0;
// 假设共6支背景乐曲0.mid ,……5.mi d
string

midsrc=i+".mid";
document.writeln("< bgsound src='"+midsrc+"' loop='-1'

>");
i=++i;
setCookie("vtime",i,exptime);
< /script >

三、为电子邮件反馈表单建立响应页面

---- 在主页中建立反馈页面，其益处是显而易见的。不过，如果是个人网页而不能使用CGI

的话，就只能建立以邮件方式传送的表单了。然而，我们都有这样的经验，一般的 CGI 反馈表单，在提交之后，总会由CGI程序控制传输一个新的写着" 你的信息已经收到

… …" 的确认页面。其实，对邮件表单，我们也可以 用JavaScript来模拟这样的响应页面。

---- 例如，下面一段程序，在点击" 提交"后，浏览器自动调入确认页面accepted.htm。

<form method="post" action= quot;mailto:[email protected]"

ENCTYPE="text/plain">
Your name: < input type="text"

name="username">
<input type=submit onBlur="response()" value=" 提

交">
<input type=reset value=" 重 置" >
<script

language="JavaScript >
<!--
function response(){

location.href="accepted.htm";
} //-->
</script >

</form >

四、 控制滚动条

----

JavaScript对浏览器各层次对象提供了丰富的控制手段。比如，通过window对象的方法scroll(x,y)，我们能控制窗口滚动条移动到指定的位置。

---- 例如，下面的scrollwin()程序实现垂直滚动条的自动下移。

<script language="Javascript" >
<!---
function scrollwin(){

if (y==600) scroll(0,0);
else{
y++;
self.scroll(0,y);

clearTimeout(timer);
var timer=setTimeout("scrollscreen()",100);
}}

var y=0;
document.fgColor=0xff0000;
for(i=0;i< 40;i++)

document.writeln(i+"< br >");
scrollscreen();
//--- >

</script >