javascript特效代码

点一下–首页地址添加到收藏夹

　我们都希望自己辛苦制作的主页能够成为网友们的收藏夹中的东东，于是我们不停的用各种方法吸引网友的注意力，大声的告诉他们：“如果你觉得的好，就把我的主页填加到你的收藏夹中吧！”；“按CTRL+D把本站填加进您的收藏夹”……

其实我们不用那么费力气就可以达到一个更好的效果，呵呵，现在有一段代码，你可以使你通过点击一个连接就把主页地址添入收藏夹，怎么样？请看仔细：

首先在<head>与</head>之间加入如下代码：

然后，当然是然后，随便在您需要的地方做一个连接（您就看着该就行了），

<a href=”javascript:Addme()”>将本站添入收藏夹</a>

终于成功了，赶快实验一下吧！！！

网页侦测四法

在网上看到有很多主页上有这样的提示：建议您采用IE4。0使用800×600分辨率浏本网页。其实在网页里的主体部分即和之间找个合适的位置,加上十分简单的一小段javascript语句就可以侦测到浏览者所使用的浏览器种类，分辨率，色彩度并提出建议，以使浏览者的浏览环境符合本站的最佳浏览环境，岂不更好。这里所介绍的侦测屏幕分辨率和颜色数的javascript源码可是别的地方找不到的，不可错过哟！

一:侦测浏览器种类和版本

< script language=”javascript1.2″ >
< !–
document.write(“您使用的浏览器是
“+navigator.appName+” “+navigator.appVersion);
//– >
< /script >

二：侦测浏览器种类、版本并进一步判断浏览者的浏览器是否符合您站中的最佳浏览环境，同时提出相应的建议
< script language=”javascript1.2″ >
< !–
var vn=”Microsoft Internet Explorer”;
var va=4;
if(navigator.appName!=vn||parseInt
(navigator.appVersion)< va);
document.write(“您使用的浏览器是
“+vn+” “+navigator.appVersion);
if(navigator.appName!=vn)document.write
(“，建议您改用 “+vn+” 浏览以得到最好的浏览效果。”);
else
if(parseInt(navigator.appVersion)< va)document.write
(“，版本太旧了！建议您尽快更新您的浏览器。”);
else document.write(“，符合本站最佳浏览环境。”);
//– >
< /script >

—- 说明：语句“var vn=”Microsoft Internet Explorer”;”是设定最佳浏览器名称。
—- 语句“ var va=4;” 是设定浏览器版本下限，请根据您的实际情况设定。

三：侦测屏幕分辨率，并提出最佳浏览建议

< script language=”javascript1.2″ >
< !–
var s=800;
if(screen.width!=s);
document.write(“您的屏幕分辨率是
“+screen.width+” * “+screen.height);
if(screen.width!=s)document.write
(“，并非最佳分辨率，建议您将屏幕分辨率调整为800*600浏览本页。”);
else document.write(“，符合本站最佳浏览环境。”);
//– >
< /script >

—- 说明：语句“var s=800;”设定最佳浏览屏幕分辨率的宽度，请根据您的实际情况设定。
四：侦测浏览者屏幕色彩度，并提出最佳浏览建议

< script language=”javascript1.2″ >
< !–
var c, cv=16;
if(cv!=”Netscape”)c=screen.colorDepth;
else c=screen.pixelDepth;
var cs=c;
if(c==4)cs=”4 位 16 色”;
if(c==8)cs=”8 位 256 色”;
if(c==16)cs=”16 位增强色”;
if(c >16)cs=cs+” 位真彩色”;
if(c< cv);
document.write(“您的屏幕色彩度是 “+cs);
if(c< cv)
document.write(“，太低了！本站的背景很难看，
请将色彩度调整为16位增强色浏览本页。”);
else
document.write(“，符合本站最佳浏览环境。”);
//– >
< /script >

—- 说明：语句“cv=16;”设定最佳色彩度的下限，请根据您的实际情况设定。
—- 怎么样？试试吧。

小窗口大学问-玩透弹出窗口

经常上网的朋友可能会到过这样一些网站，一进入首页立刻会弹出一个窗口，或者按一个连接或按钮弹出，通常在这个窗口里会显示一些注意事项、版权信息、警告、欢迎光顾之类的话或者作者想要特别提示的信息。其实制作这样的页面效果非常的容易，只要往该页面的HTML里加入几段Javascript代码即可实现。下面俺就带您剖析它的奥秘。

　【1、最基本的弹出窗口代码】
其实代码非常简单：

　因为这是一段javascripts代码，所以它们应该放在<SCRIPT LANGUAGE=”javascript”>标签和</script>之间。<!– 和 –>是对一些版本低的浏览器起作用，在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。
　window.open (\’page.html\’) 用于控制弹出新的窗口page.html，如果page.html不与主窗口在同一路径下，前面应写明路径，绝对路径(http://)和相对路径(../)均可。
　用单引号和双引号都可以，只是不要混用。
　这一段代码可以加入HTML的任意位置，<head>和</head>之间可以，<body>间</body>也可以，越前越早执行，尤其是页面代码长，又想使页面早点弹出就尽量往前放。

　【2、经过设置后的弹出窗口】
　下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。我们来定制这个弹出的窗口的外观，尺寸大小，弹出的位置以适应该页面的具体情况。

　参数解释：

<SCRIPT LANGUAGE=”javascript”> js脚本开始；
window.open 弹出新窗口的命令；
\’page.html\’ 弹出窗口的文件名；
\’newwindow\’ 弹出窗口的名字（不是文件名），非必须，可用空\’\’代替；
height=100 窗口高度；
width=400 窗口宽度；
top=0 窗口距离屏幕上方的象素值；
left=0 窗口距离屏幕左侧的象素值；
toolbar=no 是否显示工具栏，yes为显示；
menubar，scrollbars 表示菜单栏和滚动栏。
resizable=no 是否允许改变窗口大小，yes为允许；
location=no 是否显示地址栏，yes为允许；
status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；
</SCRIPT> js脚本结束

　【3、用函数控制弹出窗口】
　下面是一个完整的代码。
<html>
<head>
<script LANGUAGE=”JavaScript”>
<!–
function openwin() {
window.open (“page.html”, “newwindow”, “height=100, width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no”)
//写成一行
}
//–>
</script>
</head>
<body onload=”openwin()”>
…任意的页面内容…
</body>
</html>

　这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。
怎么调用呢？

　方法一：<body onload=”openwin()”> 浏览器读页面时弹出窗口；
　方法二：<body onunload=”openwin()”> 浏览器离开页面时弹出窗口；
　方法三：用一个连接调用：
<a href=”#” onclick=”openwin()”>打开一个窗口</a>
注意：使用的“#”是虚连接。
　方法四：用一个按钮调用：
<input type=”button” onclick=”openwin()” value=”打开窗口”>

　【4、同时弹出2个窗口】

　对源代码稍微改动一下：
<script LANGUAGE=”JavaScript”>
<!–
function openwin() {
window.open (“page.html”, “newwindow”, “height=100, width=100, top=0, left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no”)
//写成一行
window.open (“page2.html”, “newwindow2”, “height=100, width=100, top=100, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no”)
//写成一行
}
//–>
</script>

　为避免弹出的2个窗口覆盖，用top和left控制一下弹出的位置不要相互覆盖即可。最后用上面说过的四种方法调用即可。
注意：2个窗口的name(newwindows和newwindow2)不要相同，或者干脆全部为空。OK？

　【5、主窗口打开文件1.htm，同时弹出小窗口page.html】

　如下代码加入主窗口<head>区：

　【6、弹出的窗口之定时关闭控制】

　下面我们再对弹出的窗口进行一些控制，效果就更好了。如果我们再将一小段代码加入弹出的页面(注意是加入到page.html的HTML中，可不是主页面中，否则…)，让它10秒后自动关闭是不是更酷了？

　首先，将如下代码加入page.html文件的<head>区：
<script language=”JavaScript”>

function closeit() {

setTimeout(“self.close()”,10000) //毫秒

}

</script>
　然后，再用<body onload=”closeit()”> 这一句话代替page.html中原有的<BODY>这一句就可以了。(这一句话千万不要忘记写啊！这一句的作用是调用关闭窗口的代码，10秒钟后就自行关闭该窗口。)

　【7、在弹出窗口中加上一个关闭按钮】
<FORM>
<INPUT TYPE=\’BUTTON\’ VALUE=\’关闭\’ onClick=\’window.close()\’>
</FORM>
呵呵，现在更加完美了！

　【8、内包含的弹出窗口-一个页面两个窗口】

上面的例子都包含两个窗口，一个是主窗口，另一个是弹出的小窗口。
通过下面的例子，你可以在一个页面内完成上面的效果。

<html>
<head>
<SCRIPT LANGUAGE=”JavaScript”>
function openwin()
{
OpenWindow=window.open(“”, “newwin”, “height=250, width=250,toolbar=no,scrollbars=”+scroll+”,menubar=no”);
//写成一行
OpenWindow.document.write(“<TITLE>例子</TITLE>”)
OpenWindow.document.write(“<BODY BGCOLOR=#ffffff>”)
OpenWindow.document.write(“<h1>Hello!</h1>”)
OpenWindow.document.write(“New window opened!”)
OpenWindow.document.write(“</BODY>”)
OpenWindow.document.write(“</HTML>”)
OpenWindow.document.close()
}
</SCRIPT>
</head>
<body>
<a href=”#” onclick=”openwin()”>打开一个窗口</a>
<input type=”button” onclick=”openwin()” value=”打开窗口”>
</body>
</html>

　看看 OpenWindow.document.write()里面的代码不就是标准的HTML吗？只要按照格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用OpenWindow.document.close()结束啊。

　【9、终极应用–弹出的窗口之Cookie控制】

　回想一下，上面的弹出窗口虽然酷，但是有一点小毛病(沉浸在喜悦之中，一定没有发现吧？)比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页)，那么每次刷新这个页面，窗口都会弹出一次，是不是非常烦人？:-(
　有解决的办法吗？Yes! 😉 Follow me.
　我们使用cookie来控制一下就可以了。
　首先，将如下代码加入主页面HTML的<HEAD>区：

function loadpopup(){
if (get_cookie(\’popped\’)==\’\’){
openwin()
document.cookie=”popped=yes”
}
}

</script>

　然后，用<body onload=”loadpopup()”>（注意不是openwin而是loadpop啊！）替换主页面中原有的<BODY>这一句即可。你可以试着刷新一下这个页面或重新进入该页面，窗口再也不会弹出了。真正的Pop-Only-Once！

　写到这里弹出窗口的制作和应用技巧基本上算是完成了，俺也累坏了，一口气说了这么多，希望对正在制作网页的朋友有所帮助俺就非常欣慰了。
　需要注意的是，JS脚本中的的大小写最好前后保持一致。

介绍两个有趣的计数器的设计

　　尽管现在的版主们已经不太注重计数器的宣传效果了，但计数器还是当今网站不可缺少的部分，它不仅在一定程度上反映了网站的“活力”，而且还可以通过生动有趣的设计来加强网页的“艺术”性，使计数器成为网页上的一个装饰“亮点”。下面介绍两种设计趣味计数器的方法，希望能对版主们有所帮助。

　　一、基本素材

　　趣味计数器是将计数器的设计与趣味性的显示效果结合在一起，十种不同风格的计数器随机出现在网页上，为相对静止和严肃的网页增加一些动态的效果和趣味。第一次访问时，计数器显示的可能是红色的静态数字，第二次访问时，计数器可能变成了不断翻转的动画形式，第三次访问时，计数器可能又变成了由虚到实的虚幻变化形式。为了实现这种效果，首先需要准备一些基本素材，即十种显示类型的数字图像文件。可以用图形编辑工具（如Photoshop、Animator等）根据自己的想象制作，也可以直接从网上图片库下载，然后将这些数字图像以00.gif……09.gif……90.gif……99.gif的形式存放在一个可读取的目录中，在下面的例子中这些图像文件存放在“http://localhost/images”中。这里gif文件命名的原则是：第1位数字代表显示类型，第2位数字代表数字值，如00.gif代表0型数字0的gif文件，09.gif代表0型数字9的gif文件。

　　二、利用JavaScript制作趣味计数器(——设计方法之一)

　　1.设计思想：

　　该方法的关键是Cookie技术和动态图像特性的综合运用。使用Cookie，可以在用户端的硬盘上记录用户的数据，下次访问此站点时，即可读取用户端硬盘的Cookie，直接得知来访者的身份和访问次数等有关信息。JavaScript中通过document.cookie属性访问Cookie，这个属性包括名字、失效日期、有效域名、有效URL路径等。用等号分开的名字和其值是Cookie的实际数据，本例中用来存储该访问者访问该页面的次数。通过把Web页中的图像映射到一个images数组，一定条件下修改该数组项的特性，可以实现动态图像显示。本例中，首先预载入一组图像，每次调用该Web页时，随机产生新的一组图像，通过覆盖原图像实现动态的趣味性效果。

　　2．源程序count.html：

　　< html >

　　< head >

　　< meta http-equiv=”Content-Type”

　　content=”text/html; charset=gb2312″>

　　< title >趣味计数器< /title >

　　< /head >

　　< body >

　　< p >< script language=”JavaScript”>

　　var expdays=60;

　　var exp=new Date();

　　exp.setTime(exp.getTime()

　　(expdays*24*60*60*1000));

　　function count(info){

　　//若是该访客的第一次访问，

　　将计数器值赋1，否则加1累积

　　var wwhcount=getcookie(’wwhcount’);

　　if (wwhcount==null){

　　wwhcount=1;

　　}

　　else{wwhcount++;}

　　setcookie(’wwhcount’,wwhcount,exp);

　　return countdisp(wwhcount)

　　}

　　function countdisp(countvar){

　　//实现随机显示，不足6位以0补全，

　　可以自己调整显示位数

　　var countvar1=”000000″+countvar;

　　var howFar1=countvar1.length;

　　countvar1=countvar1.substring(howFar1, howFar1-1)

　　var index=””+Math.floor(Math.random()*10);

　　if (index==”10″){

　　index=”0″};

　　for (var icount=0;icount< 6;icount++){

　　var g=countvar1.substring(icount,icount+1);

　　document.images[icount].src=”http:

　　//localhost/images/”+index+g+”.gif”;

　　}

　　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){

　　//截取Cookie中的name信息段

　　var arg=name+”=”;

　　var alen=arg.length;

　　var clen=document.cookie.length;

　　var i=0;

　　while (i< clen){

　　var j=i+alen;

　　if (document.cookie.substring(i,j)==arg)

　　return getCookieVal(j);

　　i=document.cookie.indexOf(“”,i)+1;

　　if (i==0) break;}

　　return null;

　　}

　　function setcookie(name,value){

　　//存储该访客计数器的数值

　　var argv=setcookie.arguments;

　　var argc=setcookie.arguments.length;

　　var expires=(argc >2)?argv[2]:null;

　　var path=(argc >3)?argv[3]:null;

　　var domain=(argc >4)?argv[4]:null;

　　var secure=(argc>5)?argv[5]:false;

　　document.cookie=name+”=”+escape(value)

　　+((expires==null)?””:(“;expires=”+expires.toGMTString()))

　　+((path==null)?””:(“;path=”+path))+((domain==null)?”

　　”:(“;domain=”+domain))+((secure==true)?”;secure”:””);

　　}

　　function deletecookie(name){

　　//使该信息行失效，

　　删除该用户关于访问次数的信息

　　var exp=new Date();

　　exp.setTime(exp.getTime()-1);

　　var cval=getcookie(name);

　　document.cookie=name+”=”+cval+”

　　;expires=”+exp.toGMTString();

　　}

　　< /script >< /p >

　　< !–预载入图像数组–>

　　您是第< img src=”http://localhost/images/00.gif”height=20 width=20

　　< img src=”http://localhost/images/00.gif”

　　height=20 width=20 >

　　< img src=”http://localhost/images/00.gif”

　　height=20 width=20 >

　　< img src=”http://localhost/images/00.gif”

　　height=20 width=20 >

　　< I mg src=”http://localhost/images/00.gif”

　　height=20 width=20 >

　　< img src=”http://localhost/images/00.gif”

　　height=20 width=20 >次光临！

　　< script language=”JavaScript”>

　　//调用count()函数，

　　实现计数器的动态图像显示

　　count();

　　< /script >

　　< /body >

　　< /html >

　　3．注意事项：

　　由于使用了JavaScript语言，因此该方法具有与应用平台的无关性，可以适用于Unix、Windows等多种平台。另外，此计数器不同于一般意义上的访客计数器，专门用于记录某一访客对某一网站的访问次数。

30、页面全屏显示

====1、将以下代码加入HTML的<body></body>之间：

<form>
<div align="center">
<input type="BUTTON" name="FullScreen" value="全屏显示"
 onClick="window.open(document.location, \'big\', \'fullscreen=yes\')">
</div>
</form>

32、检测后跳转相应页

====1、将以下代码加入HTML的<head></head>之间：

<SCRIPT LANGUAGE="JavaScript">
<!-- Start Code
var ver = navigator.appVersion;
if (ver.indexOf("MSIE") != -1)
{
window.location.href="IE的页面.htm"
}else
window.location.href="NS的页面.htm"
// End Code -->
</SCRIPT>

34、页面停留时间A

====1、将以下代码加入HTML的<head></head>之间：

<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
var ap_name = navigator.appName;
var ap_vinfo = navigator.appVersion;
var ap_ver = parseFloat(ap_vinfo.substring(0,ap_vinfo.indexOf(\'(\')));
var time_start = new Date();
var clock_start = time_start.getTime();
var dl_ok=false;
function init ()
{
if(ap_name=="Netscape" && ap_ver>=3.0)
dl_ok=true; 
return true;
}
function get_time_spent ()
{ 
var time_now = new Date();
return((time_now.getTime() - clock_start)/1000); 
}
function show_secs () // show the time user spent on the side
{ 
var i_total_secs = Math.round(get_time_spent()); 
var i_secs_spent = i_total_secs % 60;
var i_mins_spent = Math.round((i_total_secs-30)/60); 
var s_secs_spent = "" + ((i_secs_spent>9) ? i_secs_spent : "0" + i_secs_spent);
var s_mins_spent ="" + ((i_mins_spent>9) ? i_mins_spent : "0" + i_mins_spent);
document.fm0.time_spent.value = s_mins_spent + ":" + s_secs_spent;
window.setTimeout(\'show_secs()\',1000); 
}
// -->
</SCRIPT>

====2、将以下代码加入HTML的<body></body>之间：

<BODY onLoad="init(); window.setTimeout(\'show_secs()\',1);">
<form name="fm0" onSubmit="0">
<font size="-1"><I><FONT COLOR="#888888">您在本网页的停留时间:</FONT></I></font><br>
<INPUT type="text" name="time_spent" size=7 onFocus="this.blur()">
</form>

35、页面停留时间B

====1、将以下代码加入HEML的<body></body>之间：

<script LANGUAGE="Javascript">
<!-- Begin
pageOpen = new Date();
function bye() {
pageClose = new Date();
minutes = (pageClose.getMinutes() - pageOpen.getMinutes());
seconds = (pageClose.getSeconds() - pageOpen.getSeconds());
time = (seconds + (minutes * 60));
if (time == 1) {
time = (time + " second");
}
else {
time = (time + " seconds");
}
alert(\'您在本页停留了\' + time + \'.谢谢！!\');
} 
// End -->
</script>
<body onUnload="bye()">

36、自动调用不同音乐

====1、将以下代码加入HTML的<body></body>之间：

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var MSIE=navigator.userAgent.indexOf("MSIE");
var NETS=navigator.userAgent.indexOf("Netscape");
var OPER=navigator.userAgent.indexOf("Opera");
if((MSIE>-1) || (OPER>-1)) {
document.write("<BGSOUND SRC=sound.mid LOOP=INFINITE>");
} else {
document.write("<EMBED SRC=sound2.mid AUTOSTART=TRUE ");
document.write("HIDDEN=true VOLUME=100 LOOP=TRUE>");
}
// End -->
</SCRIPT>

网页之定时器的灵活运用

浏览别人的站点时，有时会看到别人的站点有一个飞雪连天的背景，或者页面可以在一定时间之后自动跳转，这是怎么实现的呢？

其实，只要掌握一点javascript的定时器的技术，这一切就可简单搞定。

页面上简单地跳转可以使用html头部的meta标志插入到head，就可以实现页面的跳转。

而在javascritp中，有两个关于定时器的专用函数，它们是：

1.倒计定时器：timename=setTimeout(“function();”,delaytime);

2.循环定时器：timename=setInterval(“function();”,delaytime);

function()是定时器触发时要执行的是事件的函数，可以是一个函数，也可以是几个函数，或者javascript的语句也可以，单要用;隔开；delaytime则是间隔的时间，以毫秒为单位。

倒计时定时器就是在指定时间后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，其区别在于：前者只是作用一次，而后者则不停地作用。

倒计时定时器一般用于页面上只需要触发一次的的情况，比如点击某按钮后页面在一定时间后跳转到相应的站点，也可以用于判断一个浏览者是不是你的站点上的“老客”，如果不是，你就可以在5秒或者10秒后跳转到相应的站点，然后告诉他以后再来可以在某个地方按某一个按钮就可以快速进入。

循环定时器一般用于站点上需要从复执行的效果，比如一个javascript的滚动条或者状态栏，也可以用于将页面的背景用飞雪的图片来表示。这些事件需要隔一段时间运行一次。

有时候我们也想去掉一些加上的定时器，此时可以用clearTimeout(timename) 来关闭倒计时定时器，而用clearInterval(timename)来关闭循环定时器。

D10:在IE中使用JavaScript

在浏览器中显示信息

——————————————————————————–

JavaScript 提供了两种方式来在浏览器中直接显示数据。可以使用 write( ) 和 writeln( )，这两个函数是document 对象的方法。也可以在浏览器中以表格的方式显示信息，以及用警告、提示和确认消息框来显示信息。

使用 document.write( ) 和 document.writeln( )
显示信息最常用的方式是 document 对象的 write( ) 方法。该方法用一个字符串作为其参数，并在浏览器中显示。该字符串可以是普通文本或 HTML。

字符串可以用单引号或双引号引起来。这样可以引用那些包含引号或撇号的内容。

document.write(“Pi is approximately equal to ” + Math.PI); document.write( );

——————————————————————————–

提示下面的简单函数可以避免在浏览器中显示信息时不得不键入 “document.write”。该函数不能告知要显示的信息是否未定义，而是发布给命令 “w();”，该命令将显示一个空行。
function w(m) { // 编写函数。 m = “” + m + “”; // 确保变量 m 是一个字符串。 if (“undefined” != m) { // 判别是否为空或其它未定义的项。 document.write(m); } document.write(“<br>”); } w(\'<IMG SRC=”horse.gif”>\’); w(); w(“This is an engraving of a horse.”); w();

——————————————————————————–

writeln( ) 方法与 write( ) 方法几乎一样，差别仅在于是前者将在所提供的任何字符串后添加一个换行符。在 HTML 中，这通常只会在后面产生一个空格；不过如果使用了 <PRE> 和 <XMP> 标识，这个换行符会被解释，且在浏览器中显示。

在调用 write( ) 方法时，如果该文档不处于在调用 write( ) 方法时的打开和分析的过程中，该方法将打开并清除该文档，所以它可能是有危险的。该示例显示了一个每隔一分钟就显示时间的脚本，但是在第一次显示后由于它从过程中将自己清除，因此会导致失败。

<HTML> <HEAD> <SCRIPT LANGUAGE=”JavaScript”> function singOut() { var theMoment = new Date(); var theHour = theMoment.getHours(); var theMinute = theMoment.getMinutes(); var theDisplacement = (theMoment.getTimezoneOffset() / 60); theHour -= theDisplacement; if (theHour > 23) { theHour -= 24 } document.write(theHour + ” hours, ” + theMinute + ” minutes, Coordinated Universal Time.”); window.setTimeout(“singOut();”, 60000); } </SCRIPT> </HEAD> <BODY> <SCRIPT> singOut(); </SCRIPT> </BODY> </HTML>

如果使用 window 对象的 alert() 方法而不是 document.write()，则该脚本可以运行。

window.alert(theHour + ” hours, ” + theMinute + ” minutes, Coordinated Universal Time.”); window.setTimeout(“singOut();”, 60000); }

清除当前文档
document 对象的 clear() 方法将清空当前文档。该方法也将清除您的脚本（随文档的其他部分一起），因此要特别注意该方法的使用方式及在什么时候使用该方法。

document.clear();

使用消息框

使用警告、提示和确认
可以使用警告、确认和提示消息框来获得用户的输入。这些消息框是 window 对象的接口方法。由于 window 对象位于对象层次的顶层，因此实际应用中不必使用这些消息框的全名（例如 “window.alert()”），不过采用全名是一个好注意，这样有助于您记住这些消息框属于哪个对象。

警告消息框
alert 方法有一个参数，即希望对用户显示的文本字符串。该字符串不是 HTML 格式。该消息框提供了一个“确定”按钮让用户关闭该消息框，并且该消息框是模式对话框，也就是说，用户必须先关闭该消息框然后才能继续进行操作。

window.alert(“欢迎！请按“确定”继续。”);

确认消息框
使用确认消息框可向用户问一个“是-或-否”问题，并且用户可以选择单击“确定”按钮或者单击“取消”按钮。confirm 方法的返回值为 true 或 false。该消息框也是模式对话框：用户必须在响应该对话框（单击一个按钮）将其关闭后，才能进行下一步操作。

var truthBeTold = window.confirm(“单击“确定”继续。单击“取消”停止。”); if (truthBeTold) { window.alert(“欢迎访问我们的　Web 页！”); } else window.alert(“再见啦！”);

提示消息框
提示消息框提供了一个文本字段，用户可以在此字段输入一个答案来响应您的提示。该消息框有一个“确定”按钮和一个“取消”按钮。如果您提供了一个辅助字符串参数，则提示消息框将在文本字段显示该辅助字符串作为默认响应。否则，默认文本为 “<undefined>”。

与alert( ) 和 confirm( ) 方法类似，prompt 方法也将显示一个模式消息框。用户在继续操作之前必须先关闭该消息框

var theResponse = window.prompt(“欢迎？”,”请在此输入您的姓名。”);

37、将站点加入频道

====1、加入channel的方法：使用如下连接指向你的频道文件*.cdf。

<a href="javascript:window.external.addChannel(\'jschannel.cdf\')">ABC</a>

38、将站点加入收藏

====1、将以下代码加入HEML的<body><body>之间

<script language="JavaScript">
function bookmarkit(){window.external.addFavorite(\'http://yuxuemei.yeah.net\',\'网络世界\')}
if (document.all)document.write(\'<a href="#" onClick="bookmarkit()"><strong>将本站加入收藏夹
</strong></a>\')
</script>

39、自动刷新页面

====1、将以下代码加入HEML的<body></body>之间：

<meta http-equiv="refresh" content="20;
url=http://想要刷新的页面.htm">

40、禁止查看源代码

====1、将以下代码加入到HEML的<body></body>之间

<SCRIPT language=javascript>
function click() {if (event.button==2) {alert(\'不许你偷看！\');}}document.onmousedown=click
</SCRIPT>

41、自动弹出窗口

　　自动弹出式窗口(调用一个窗体时自动弹出一个新的窗体)
　　1、调整窗口大小：通过width=200,height=170控制。还可以控制是否有滚动栏等。
　　2、popup.location.href = \’用于说明窗口内容.htm\’；这一行在做什么：就是设置窗口中出现的内容的文件名

====1、将如下代码加入HTML的<head></head>之间：

D11:利用Javascript实现测试浏览器类型再调用相应的主页

由于IE和Netscape的某些不兼容，使得主页制作出来后在两者中有较大差别，有的甚至不能使用。为便于管理，最佳的方法就是先测试浏览器类型，再调用相应的主页。

　　它的做法就是在此页上设置如：

　　＜html＞
　　＜head＞
　　＜title＞检测浏览器＜/title＞
　　＜SCRIPT LANGUAGE=”JavaScript”＞
　　function TestBrowser(){
　　ie = ((navigator.appName == “Microsoft Internet Explorer”) &&(parseInt(navigator.appVersion) ＞= 3 ))
　　ns = ((navigator.appName == “Netscape”) && (parseInt(navigator.appVersion) ＞= 3 ))

　　if (ns) {
　　setTimeout(\’location.href=”indexns.html”\’,5);
　　} else {
　　setTimeout(\’location.href=”indexie.html”\’,5);
　　}
　　}
　　＜/script＞
　　＜/head＞
　　＜body onLoad=”TestBrowser()”＞
　　测试您的浏览器，五秒自动进入!
　　＜/body＞
　　＜html＞

　　这样过五秒钟后若检测到用户使用浏览器为Netscape则调用indexns.html，否则调用indexie.html。

D12:利用Java Script实现自动加上最后修改时间

　我们在 HTML 文件档完成了以后，常会加上一行文件最后修改的日期。现在你可不用担心每次都要去改或是忘了改了，你可以很简单的写一个如下的描述语法程式。就可以自动的为你每次产生最后修改的日期了。

　　＜html＞
　　＜body＞
　　This is a simple HTML- page.
　　＜br＞
　　最后更新：
　　＜script language=”JavaScript”＞
　　＜!– hide script from old browsers
　　document.write(document.lastModified)
　　// end hiding contents –＞
　　＜/script＞
　　Last Modified.
　　＜/body＞
　　＜/html＞

43、自动滚屏

====1、将以下代码加入HEMLl的<body></body>之间：

D14:如何在页面内加入日期

　我们要告诉你一个使用日期和时间的例子，是从你个人客户端机器获取日期和时间。
做法如下：
<script language=”LiveScript”>
<!– Hiding
　today = new Date()
　document.write(“现在时间是　 “,today.getHours(),”:”,
　today.getMinutes())
　document.write(“<br>今天日期为　 “, today.getMonth()+1,
　”/”,today.getDate(),”/”,today.getYear());
　// end hiding contents –>
</script>

　　在本例中，我们必需首先建立一个日期变数，这可以由 today= new Date()来完成。如果没有特别指定时间与日期的话，浏览器将会采用本地客户端机器的时间。若将它放入变数 today 中，这儿要注意的是，我们并没有宣告 today 这个变数的型态。
　　除以上功能外，在建立日期物件时你也可以事先设定日期如下：
　　　docStarted= new Date(96,0,13)
　　首先是年，接着是月（但记得减 1）,再接着是日。同样的方法也可以加上时间的设定。如下　
　　　docStarted = new Date(96,0,13,10,50,0)
　　前三个是日期的年、月、日，接着是时、分、秒。最后，我们必须提醒你 JavaScript 并没有实际的日期型态，但是它却能毫不费力地显示出日期和时间，原因是它是从 1 / 1 / 1970 0　0h 开始以 ms(milli seconds) 来计算目前的时间的，这听起来似乎有些复杂。但你倒不用担心，它有标准的共用函数可以计算，你只要知道如何用就可以了。

　另一个方法是：
　要问现今个人主页最流行设计是什么，我想应该是在首页的开头写明当前的日期吧！其方法很简单，只要将以下的程序代码加入即可实现：

　　< SCRIPT LANGUAGE=”JAVASCRIPT”>

　　< !－－

　　var today=new Date;

　　var week=new Array(7);

　　week[0]=”天”;

　　week[1]=”一”;

　　week[2]=”二”;

　　week[3]=”三”;

　　week[4]=”四”;

　　week[5]=”五”;

　　week[6]=”六”;

　　document.write(“今天”＋today.getYear()＋”年”＋(today.getMonth()＋1)＋”月”＋today.getDate()＋”日;星期”＋week[today.getDay()]);

　　//－－>

　　< /SCRIPT>

　　要提醒大家的是：

　　1、要注意月份的表示，getMonth()得到的是0－11；0表示一月，1表示二月依此类推，所以我们要显示月份要先加1。

　　2、另外，Java对两千年问题也已作了考虑，当小于2000年时Java显示两位数字如1998年显示98，当大于2000年时，显示四位数字。避免了出现两千年问题。

D15:如何在网页上添加前进和后退

　我们来看一个可以让你浏览不同文件的语法，我们这儿所要谈的是 back() 和 forward()这两个函数，如果你本身的文件中有一个连结是回到你本身文件的上一个连结文件的话，那和Netscope 浏览器中所提供的back 按钮功能是不一样的。例如，在我的文件中，正常的连结连到某些我们认为会是这个文件来源的地方, 称　这个连结叫 back，而 Netscape 浏览器中的 back按钮，则是回到你历史记录中的上一个连结，所以不同JavaScript，也能提供类似 Netscape 中back 按钮的功能，试试这个连结，你可以体会一下回来的感觉，这个语法如下所示：

　<html>
　<body>
　<FORM NAME=”buttonbar”>
　<INPUT TYPE=”button” VALUE=”Back” onClick=”history.
　back()”>
　<INPUT TYPE=”button” VALUE=”JS- Home” onClick=”location=
　\’script.htm\'”>
　<INPUT TYPE=”button” VALUE=”Next” onCLick=”history.
　forward()”>
　</FORM>
　</body>
　</html>
　以上你也可以直接写成 history.go(-1) 与 history.go(1)

D16:如何使用浏览器的状态栏

以下是原始语法
<HTML>
<HEAD>
　　 <TITLE>浏览器的状态栏</TITLE>
</HEAD>
<BODY BGCOLOR=”#FFFFFF”>
<SCRIPT language=”JavaScript”>
<!– Hide
function statbar(txt) {
window.status = txt;
}
// –>
</SCRIPT>
<CENTER></CENTER>
<CENTER><B><FONT COLOR=”#0000FF”></FONT></B></CENTER>
<P><FORM>
<P><FONT COLOR=”#000000″>　　<INPUT type=”button”
　　　 name=”look” value=”显示!”
　　　 onclick=”statbar(\’嗨　　这是状态列讯息!\’);”>　<INPUT
　　　 type=”button” name=”erase” value=”清除!”
　　　 onclick=”statbar(\’\’);”></FONT>
<BR></FORM>
<CENTER><FONT COLOR=”#000000″>　</FONT></CENTER>
</BODY>
</HTML>

　　在这个例子中我们建了二个按钮，此二个按个均会去呼叫 statbar(txt) 。函数中的 txt 表示此函数将经由函数呼叫时传一个变数值进来 (我们叫 txt但它可代表任意不同的值)你可以见到在产生按钮的 <form> 标签中，呼叫到函数statbar(txt)在此我们就不再写成 txt 。
　　直接把要显示在状态列上的文字写上去，于是我们可以见到这样的效果，变数 txt 经由 \’Value\’ 中得它的值，然后传入所呼叫的函数中。所以当你按＂显示＂的按钮时，statbar(txt) 函数被呼叫，然后 txt 将读入字串＂嗨　　这是状态列讯息＂　并且传入函数中，这种经由变数传递值的方式，可以使函数相当具有可变性。
　　接着来看第二个按钮＂清除＂　它也呼叫同样的函数，我们并不需要因为传递参数的不同而言两个不同的函数。所以现在我们可以来看看statbar(txt) 这个函数做些什么了,其实它相当简单。你只要将 txt 所要传的文字内容指定给 window.status 这个变数就可以了。即是 window.status =txt，而在清除状态列的时候，只是将空字串写入即可。不过要注意的是必须使用单引号及双引号来区别，这样才容易区分。

　如何制作状态列跑马灯效果　

以下是我们所制作的跑马灯效果的源程序

　<html>
　<head>
　<script language=”JavaScript”>
　<!– Hide
　var scrtxt=”这儿的讯息可以改为你要告诉别人的话　 “+”
　或是注意事项 …”;
　var lentxt=scrtxt.length;
　var width=100;
　var pos=1-width;
　function scroll() {
　pos++;
　var scroller=””;
　if (pos==lentxt) {
　pos=1-width;
　}
　if (pos<0) {
　for (var i=1; i<=Math.abs(pos); i++) {
　scroller=scroller+” “;}
　scroller=scroller+scrtxt.substring(0,width-i+1);
　}
　else {
　scroller=scroller+scrtxt.substring(pos,width+pos);
　}
　window.status = scroller;
　setTimeout(“scroll()”,150);
　}
　//–>
　</script>
　<body onLoad=”scroll();return true;”>
　Here goes your cool page!
　</body>
　</html>
　　此一程式中我们使用了和上面同样的函数（或部分）setTimeout(…)通知，计时器在时间到时去呼叫 scroll()函数，使得跑马灯中的文字往前进一格。在函数的一开始，有一些较罗嗦的计算部分，但这并不难使我们了解，这些计算主要是用来取得跑马灯中的文字应该由那一个位置开始显示的用途。一开始当然是必需加一些空白在字的左边，让文字部分能尽可能靠右，然后再一字字的将空白减少，结果自然就造成字往前移动的效果了。

D17:javascript错误代码及相应解释大全

JScript 运行时错误

JScript 运行时错误是指当 JScript 脚本试图执行一个系统不能运行的动作时导致的错误。当正在运行脚本、计算变量表达式、或者正在动态分配内存时出现 JScript 运行时错误时。

错误号描述

5029 数组长度必须为一有限正整数

5030 必须赋给数组长度一个有限正数

5028 需要 Array 或 arguments 对象

5010 需要 Boolean

5003 不能给函数返回值赋值

5000 不能给 ’this’ 赋值

5006 需要 Date 对象

5015 需要 Enumerator 对象

5022 异常抛出，但无法抓住

5020 正则表达式中缺少“)”

5019 正则表达式中缺少“]”

5023 函数没有合法的 Prototype 对象

5002 需要 Function 对象

5008 非法赋值

5021 字符集范围无效

5014 需要 JScript 对象

5001 需要 Number 类型

5007 需要 Object 类型

5012 需要对象的成员

5016 需要正则表达式对象

5005 需要 String

5017 正则表达式语法错误

5026 小数部分的位数越界

5027 精度越界

5025 待解码的 URI 编码非法

5024 待解码的 URI 包含有非法字符

5009 未定义标识符

5018 未预期的限定符

5013 需要 VBArray

JScript 语法错误

JScript 语法错误是指当 JScript 语句违反了 JScript 脚本语言的一条或多条语法规则时导致的错误。JScript 语法错误发生在程序编译阶段，在开始运行该程序之前。

错误号描述

1019 在循环外不能有“break”

1020 在循环外不能有“continue”

1030 条件编译已关闭

1027 一条 “switch” 语句中只能有一个 “default”

1005 需要“(”

1006 需要“)”

1012 需要“/”

1003 需要“:”

1004 需要“;”

1032 需要“@”

1029 需要“@end”

1007 需要“]”

1008 需要“{”

1009 需要“}”

1011 需要“=”

1033 需要“catch”

1031 需要常数

1023 需要十六进制数

1010 需要标识符

1028 需要标识符、字符串或者数字

1024 需要“while”

1014 非法字符

1026 未找到标签

1025 标签定义重复

1018 函数外有 ’return’ 语句

1002 语法错误

1035 “Throw”的后面必须跟有一个表达式，且在同一源代码行上

1016 注释未结束

1015 字符串常数未结束

D18:JavaScript[对象.属性]集锦

SCRIPT 标记

用于包含JavaScript代码.

语法

属性

LANGUAGE 定义脚本语言

SRC 定义一个URL用以指定以.JS结尾的文件

windows对象

每个HTML文档的顶层对象.

属性

frames[] 子桢数组.每个子桢数组按源文档中定义的顺序存放.

feames.length 子桢个数.

self 当前窗口.

parent 父窗口(当前窗口是中一个子窗口).

top 顶层窗口(是所有可见窗口的父窗口).

status 浏览器状态窗口上的消息.

defaultStatus 当status无效时,出现在浏览器状态窗口上的缺省消息.

name 内部名,为由window.open()方法打开的窗口定义的名字.

方法

alert(“message”) 显示含有给定消息的”JavaScript Alert”对话框.

confirm(“message”) 显示含有给定消息的”Confirm”对话框(有一个OK按钮和一个Cancel按钮).如果用户单击OK返回true,否则返回false.

prompt(“message”) 显示一个”prompt”对话框,要求用户根据显示消息给予相应输入.

open(“URL”,”name”) 打开一个新窗口,给予一个指定的名字.

close() 关闭当前窗口.

frame对象

它是整个浏览器窗口的子窗口,除了status,defaultStatus,name属性外,它拥有window对象的全部属性.

location对象

含有当前URL的信息.

属性

href 整个URL字符串.

protocol 含有URL第一部分的字符串,如http:

host 包含有URL中主机名:端口号部分的字符串.如//www.cenpok.net/server/

hostname 包含URL中主机名的字符串.如http://www.cenpok.net

port 包含URL中可能存在的端口号字符串.

pathname URL中”/”以后的部分.如~list/index.htm

hash “#”号(CGI参数)之后的字符串.

search “?”号(CGI参数)之后的字符串.

document对象

含有当前文档信息的对象.

属性

title 当前文档标题,如果未定义,则包含”Untitled”.

location 文档的全URL.

lastModified 含有文档最后修改日期.

referrer 调用者URL,即用户是从哪个URL链接到当前页面的.

bgColor 背景色(#xxxxxx)

fgColor 前景文本颜色.

linkColor 超链接颜色.

vlinkColor 访问过的超链颜色.

alinkColor 激活链颜色(鼠标按住未放时).

forms[] 文档中form对象的数组,按定义次序存储.

forms.length 文档中的form对象数目.

links[] 与文档中所有HREF链对应的数组对象,按次序定义存储.

links.length 文档中HREF链的数目.

anchors[] 锚(…)数组,按次序定义存储.

anchors.length 文档中锚的数目.

方法

write(“string”) 将字符串突出给当前窗口.(字符串可以含有HTML标记)

writeln(“string”) 与write()类似,在结尾追加回车符,只在预定格式文本中(

...

或…)生效.

clear() 清当前窗口.

close() 关闭当前窗口.

form对象

属性

name

中的NAME属性的字符串值.

method 中METHOD属性的类值,”0″=”GET” ,”1″=”POST” .

action 中ACTION属性的字符串值.

target 表格数据提交的目标,与标记中相应属性一致.

elements[index] elements属性包含form中的各个元素.

length 表格中的元素个数.

方法

submit() 提交表格.

事件处理器onSubmit() 用户单击一个定义好的按钮提交form时运行的代码.

text和textarea对象

属性

name NAME属性的字符串值.

value 域内容的字符串值.

defaultValue 域内容的初始字符串值.

方法

focus() 设置对象输入焦点.

blur() 从对象上移走输入焦点.

select() 选定对象的输入区域.

事件处理器

onFocus 当输入焦点进入时执行.

onBlur 当域失去焦点时执行.

onSelect 当域中有部分文本被选定时执行.

onChange 当域失去焦点且域值相对于onFocus执行有所改变时执行.

42、页面转换特效

====1、将以下代码加入HEML的<head></head>之间：

44、背景时钟

====1、以下是这个效果的全部代码。[最好从一个空页面开始]

<html>
<head>
<TITLE>背景时钟</TITLE>
<script language=javaScript>
<!–//
function clockon() {
thistime= new Date()
var hours=thistime.getHours()
var minutes=thistime.getMinutes()
var seconds=thistime.getSeconds()
if (eval(hours) <10) {hours=”0″+hours}
if (eval(minutes) < 10) {minutes=”0″+minutes}
if (seconds < 10) {seconds=”0″+seconds}
thistime = hours+”:”+minutes+”:”+seconds
if(document.all) {
bgclocknoshade.innerHTML=thistime
bgclockshade.innerHTML=thistime
}
if(document.layers) {
document.bgclockshade.document.write(\'<div id=”bgclockshade” style=”position:absolute;visibility:visible;font-family:Verdana;color:FFAAAAA;font-size:120px;top:10px;left:152px”>\’+thistime+\'</div>\’)
document.bgclocknoshade.document.write(\'<div id=”bgclocknoshade” style=”position:absolute;visibility:visible;font-family:Verdana;color:DDDDDD;font-size:120px;top:10px;left:150px”>\’+thistime+\'</div>\’)
document.close()
}
var timer=setTimeout(“clockon()”,200)
}
//–>
</script>
<link rel=”stylesheet” href=”../style.css”></head>
<body onLoad=”clockon()”>
<div id=”bgclockshade” style=”position:absolute;visibility:visible;font-family:Arial;color:FF8888;font-size:120px;top:102px;left:152px”></div>
<div id=”bgclocknoshade” style=”position:absolute;visibility:visible;font-family:Arial;color:DDDDDD;font-size:120px;top:100px;left:150px”></div>
<div id=”mainbody” style=”position:absolute; visibility:visible”>
</div>
</body>
</html>

　　说明：时钟显示的位置需要你修正TOP,LEFT参数来确定。TOP表示层距离显示器顶部的象素值，LEFT表示距离左侧的象素。

D21:神奇的页面滚动控制(一)

　　当页面内容很长时，我们一般使用窗口的滚动条来实现上下移动，但这往往要使用到多次的鼠标点击动作。在我的机器上，当浏览长页面时，我会在页面的空白处同时按下我的2键鼠标的左右键，这时，就会出现一个上下滚动指示图标,它是怎么生成的呢？？

　　但是，是否能在HTML页面上制作这样一个指示器呢？答案当然是：完全可以！请跟我来。

　　 实现思路

　　 1、首先，准备好2个图形文件，一个代表向上，另一个代表向下。

　　 2、然后，进行页面布局，我们可以将这个指示器图标放在你想要的任意位置，这里我们假设它位于当前窗口的右下部。

　　 3、针对不同的浏览器，设置好相应的对象变量。这里，我们只考虑当前2种主流浏览器：IE和Netscape。

　　 4、对2个指示器图标，分别设置onmouseover与onmouseout事件处理，生成当前操作状态。然后据此执行定时滚动函数，实现页面的滚动效果。

　　 代码详解

< HTML >< HEAD >
< META http-equiv=Content-Type content="text/html; charset=gb2312" >
< STYLE type=text/css >
< !--
/*设置一个样式
#item { LEFT: 0px; VISIBILITY: hidden; POSITION: absolute }
-- >
< /STYLE >

< SCRIPT language=JavaScript >
< !-- 

//设置变量
//设置变量isNS，判别浏览器类型。对于NetScape浏览器，document.layers返回true值
var isNS=(document.layers);
//设置引用对象时的变量名称
//对于IE浏览器，可见控制的引用值为document.all.object.style.visibility=visible
//对于Ns浏览器，可见控制的引用值为document.object.visibility=show
var _all=(isNS)? \'\' : \'all.\' ;
var _style=(isNS)? \'\' : \'.style\' ;
var _visible=(isNS)? \'show\' : \'visible\';

//设置其他变量：w_x与w_y：坐标值，okscroll：滚动与否，godown：是否向下
var w_x, w_y, item, okscroll=false, godown;

function init(){
//初始化运行函数

//将引用的对象赋值给item变量，这样，在随后的对象赋值操作中，可以简化代码的编写，并保持兼容性
//注意：这是一个非常好的编程习惯
item=eval(\'document.\'+_all+\'item\'+_style);
//取得当前窗口的尺寸大小等参数，并移动指示器到屏幕的右下角
getwindowsize();

//使指示器可见
item.visibility=_visible;

//启动滚动判断定时函数，监测操作动作
scrollpage();
}

function getwindowsize() {
//取得当前窗口大小参数，并根据这些数值移动指示器到屏幕右下角
//注意：当用鼠标改变窗口的大小时，要根据当前最新的窗口长宽参数设置指示器的位置。
否则，就可能看不到停留在
//原来位置的指示器了。

//对于IE，document.body.clientWidth表示当前窗口的宽度，document.body.
clientHeight表示高度，单位是
//象素px。如果是Ns浏览器，对应为window.innerWidth和window.innerHeight。
w_x=(isNS)? window.innerWidth-5 : document.body.clientWidth;
w_y=(isNS)? window.innerHeight : document.body.clientHeight;

//接着，设置代表指示器区域的层的宽度与高度。
(isNS)? item.clip.width=42: item.width=42;
(isNS)? item.clip.height=20 : item.height=20;

//根据上面设置的参数，移动指示器到相应位置
moveitem();
}

function moveitem() {
//移动指示器

//对于NS浏览器
if (isNS) {
   item.moveTo((pageXOffset+w_x-70),(w_y+pageYOffset-50))
   }else{
        //如果是IE，直接给层的2个属性赋值：pixelLeft代表X坐标，pixelTop代表Y坐标
        //注意：当屏幕发生滚动时，document.body.scrollLeft与document.body.scrollTop分别代表
        //滚动的横向距离与纵向距离。而w_x与w_y分别表示了指示器在当前窗口的相对坐标位置，
        //所以，要对2者进行相加操作，从而得到指示器的绝对坐标位置。
        item.pixelLeft=document.body.scrollLeft+w_x-70;
        item.pixelTop=w_y+document.body.scrollTop-50;
   }
}

function resizeNS() {
//对于Ns浏览器，当窗口大小变化时，执行定时操作

//setTimeout函数设置了定时执行的操作，这里表示：每400毫秒执行document.location.reload()操作
setTimeout(\'document.location.reload()\',400);
}

请看—-神奇的页面滚动控制(二)

D22:神奇的页面滚动控制(二)

function scrollpage() {
//页面滚动控制函数

  status = \'\';
  //okscroll与godown都是滚动状态标志，其值由指示器层的onmouseover与onmouseout2个事件控制。
  //window.scrollBy(x,y)控制页面滚动，x、y分别表示横向与纵向滚动的距离，单位是象素px。
  //当设置y值更大时，每次滚动的距离也将更大。
  if (okscroll) {
    if (godown) {
      (isNS)? window.scrollBy(0,4) : window.scrollBy(0,4) ;
    } else {
     (isNS)? window.scrollBy(0,-4) : window.scrollBy(0,-4) ;
    }
  }

  //页面滚动后，指示器已不再停留在我们期待的位置。所以，要再次执行移动函数移动它到屏幕的右下角。
  //这样，看起来好像它总是在那里 ;-)
  moveitem();

  //设置滚动函数定时执行。这里的时间，表示了监测用户操作状态的周期，越小表示越精确，但程序也将
  //更“忙”。设置得过于长，就会产生慢动作的延迟效果，好像计算机很迟钝，当我们将鼠标点到向下指示器
  //时，屏幕并没有马上做出反应，而是等了一段时间，才向下滚动 ;-( 
  //根据你的需要，并进行测试，设置这个数值。
  setTimeout(\'scrollpage()\', 158);
}

//页面加载后，启动相关脚本函数
//设置页面加载后，首先启动init函数
window.onload=init;

//设置当窗口大小发生变换时启动的函数
(isNS) ? window.onresize=resizeNS : window.onresize=getwindowsize ;

//  End -- >
< /SCRIPT >

< BODY >



< DIV id=item >< A onmouseover="okscroll=true; godown=true;" 
onmouseout=okscroll=false href="javascript:void(0)" >< IMG 
src="down.gif" border=0 >< /A >< A 
onmouseover="okscroll=true; godown=false;" onmouseout=okscroll=false 
href="javascript:void(0)" >< IMG src="up.gif" border=0 >< /A > < /DIV >
< P >


< CENTER >◆◆◆◆◆ Begin From Here ◆◆◆◆◆
< P >用JavaScript制作页面滚动效果
< P >用JavaScript制作页面滚动效果
< P >用JavaScript制作页面滚动效果
< P >用JavaScript制作页面滚动效果
< P >用JavaScript制作页面滚动效果
< P >用JavaScript制作页面滚动效果
< P >用JavaScript制作页面滚动效果
< P >用JavaScript制作页面滚动效果
< P >用JavaScript制作页面滚动效果
< P >用JavaScript制作页面滚动效果
< P >用JavaScript制作页面滚动效果
< P >用JavaScript制作页面滚动效果
< P >用JavaScript制作页面滚动效果
< P >用JavaScript制作页面滚动效果
< P >用JavaScript制作页面滚动效果
< P >用JavaScript制作页面滚动效果
< P >用JavaScript制作页面滚动效果
< P >用JavaScript制作页面滚动效果
< P >用JavaScript制作页面滚动效果
< P >用JavaScript制作页面滚动效果
< P >用JavaScript制作页面滚动效果
< P >用JavaScript制作页面滚动效果
< P >用JavaScript制作页面滚动效果
< P >用JavaScript制作页面滚动效果
< P >用JavaScript制作页面滚动效果
< P >用JavaScript制作页面滚动效果
< P >用JavaScript制作页面滚动效果
< P >用JavaScript制作页面滚动效果
< P >◆◆◆◆◆ End Here ◆◆◆◆◆
< P >< /CENTER >
< P >< /P >< /BODY >< /HTML >

　　 演示效果

　　 OK！看了上面的代码详细解读，你是否领会了其中的技巧？软件真是无所不能，是吗？

　　想要看看到底是怎样的神奇效果吗？不要犹豫，请点击>>>这里！

本文链接：https://www.cnblogs.com/wayne-ivan/archive/2007/06/04/770373.html

javascript特效代码

javascript特效代码的更多相关文章

随机推荐

热门专题

目录导航