返回
计算机世界1999年第13期

巧用JavaScript四例

云南希地集团股份有限公司 段 炼

  1 读取客户端屏幕设置信息

  众所周知,主页的浏览效果与客户端使用的浏览器以及屏幕区域设置有很大关系。正因为如此,许多页面都标明了“建议使用××浏览器,×××屏幕设置浏览本页"。了解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 >

  2 自动“更新" 网页背景音乐

  更新及时的主页才能保持对访问者的吸引力。如果你在网页中加入了背景音乐,但又不想让访问者反复听同一首音乐的话,用JavaScript 编一个动态主页随机播放背景音乐是一种办法。不过在这里我们采用另一种办法,用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.mid

string midsrc=i +“.mid";

document.writeln

("< bgsound src='+midsrc +’loop='-1' >");

i= ++i;

setCookie("vtime",i,exptime);

< /script >

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

  在主页中建立反馈页面,其益处是显而易见的。不过,如果是个人网页不能使用CGI 的话,就只能建立以邮件方式传送的表单了。然而,我们都有这样的经验,一般的CGI 反馈表单,在提交之后,总会由CGI 程序控制传输一个新的写着“你的信息已经收到……" 的确认页面。其实,对邮件表单,我们也可以用JavaScript 来模拟这样的响应页面。

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

< form method="post"action=

"mailto:someone@company.com"ENYTYPE="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 >

  4 控制滚动条

  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 +“");

scrollscreen();

// --->

< /script >