用JavaScript使链接按钮不断变化 按钮是网页中常常能见到的一种东东。但是用按钮做链接你可能还没有见到过。今天教你的这种方法,不仅可以用按钮来制作链接,而且按钮中链接还能不断变化显示。效果非常好看又能节省页面空间,真是一举两得,赶快试试吧! 点击此处查看效果
一、把下面的程序代码加入到< head >< /head >区域中。
< SCRIPT LANGUAGE="JavaScript" > < !-- begin // please help yourself to this code. var startTime =null; var timerID =null; var initial =new Date(); var pos =0; var menuItem =null;
function initArray() { this.length = initArray.arguments.length for (var i = 0; i < this.length; i++) { this[i+1] = initArray.arguments[i] } }
function parsemenuItem(data,num) { for(var i=0;i< data.length;i++) { if(data.substring(i,i+1)=="|") break; } if (num==0) return(data.substring(0,i)); else return(data.substring(i+1,data.length)); }
function startTimer() { initial = new Date(); startTime=initial.getTime(); stopTimer(); menuItem = new initArray("赛迪网Windows世界|http://www.ccidnet.com/school/system/", "赛迪网冲浪指南针|http://www.ccidnet.com/school/net/", "赛迪网软件下载园|http://www.ccidnet.com/school/soft/", "赛迪网办公自动化|http://www.ccidnet.com/school/office/", "赛迪网软件e学堂|http://www.ccidnet.com/school/software/", "赛迪网多媒体之家|http://www.ccidnet.com/school/multimedia/", "赛迪网培训与考试|http://www.ccidnet.com/school/exam/", "赛迪网电脑大词典|http://www.ccidnet.com/school/dict/" ); showTimer(); }
function stopTimer() { timerID=null; menuItem=null; //clearTimeout(timerID); }
function showTimer() { pos= (pos == menuItem.length) ? 1 : pos + 1; document.forms[0].elements[0]. value=parsemenuItem(menuItem[pos],0);
timerID=window.setTimeout('showTimer()',4000); }
function goToUrl() { //parent.welcome.location=parsemenuItem(menuItem[pos],1); this.location=parsemenuItem(menuItem[pos],1); return (false); } // end -- > < /SCRIPT >
注:上面的链接和说明可以自己修改,上面('showTimer()',4000)中的4000是用来设置链接之间变化速度,数字越小速度越快。
二、把下面的代码加入到< body >区域中。
< FORM > < INPUT TYPE="button" VALUE=" zhouqing " NAME="goTo" onClick="window.goToUrl()" > < /FORM >
三、最后把< body >中的内容改为如下代码。
< body bgcolor="#ffffff" onLoad="window.startTimer()" > |