javascript特效代码
点一下--首页地址添加到收藏夹 |
我们都希望自己辛苦制作的主页能够成为网友们的收藏夹中的东东,于是我们不停的用各种方法吸引网友的注意力,大声的告诉他们:“如果你觉得的好,就把我的主页填加到你的收藏夹中吧!”;“按CTRL+D把本站填加进您的收藏夹”…… |
网页侦测四法 |
在网上看到有很多主页上有这样的提示:建议您采用IE4。0使用800×600分辨率浏本网页。其实在网页里的主体部分即和之间找个合适的位置,加上十分简单的一小段javascript语句就可以侦测到浏览者所使用的浏览器种类,分辨率,色彩度并提出建议,以使浏览者的浏览环境符合本站的最佳浏览环境,岂不更好。这里所介绍的侦测屏幕分辨率和颜色数的javascript源码可是别的地方找不到的,不可错过哟! |
小窗口大学问-玩透弹出窗口 |
经常上网的朋友可能会到过这样一些网站,一进入首页立刻会弹出一个窗口,或者按一个连接或按钮弹出,通常在这个窗口里会显示一些注意事项、版权信息、警告、欢迎光顾之类的话或者作者想要特别提示的信息。其实制作这样的页面效果非常的容易,只要往该页面的HTML里加入几段Javascript代码即可实现。下面俺就带您剖析它的奥秘。 |
介绍两个有趣的计数器的设计 |
尽管现在的版主们已经不太注重计数器的宣传效果了,但计数器还是当今网站不可缺少的部分,它不仅在一定程度上反映了网站的“活力”,而且还可以通过生动有趣的设计来加强网页的“艺术”性,使计数器成为网页上的一个装饰“亮点”。下面介绍两种设计趣味计数器的方法,希望能对版主们有所帮助。 一、基本素材 趣味计数器是将计数器的设计与趣味性的显示效果结合在一起,十种不同风格的计数器随机出现在网页上,为相对静止和严肃的网页增加一些动态的效果和趣味。第一次访问时,计数器显示的可能是红色的静态数字,第二次访问时,计数器可能变成了不断翻转的动画形式,第三次访问时,计数器可能又变成了由虚到实的虚幻变化形式。为了实现这种效果,首先需要准备一些基本素材,即十种显示类型的数字图像文件。可以用图形编辑工具(如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="全屏显示" |
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 对象的方法。也可以在浏览器中以表格的方式显示信息,以及用 警告、提示和确认 消息框来显示信息。 使用消息框 使用警告、提示和确认 |
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>将本站加入收藏夹 |
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、将如下代码加入HTML的<head></head>之间: <script language="JavaScript"> |
D11:利用Javascript实现测试浏览器类型再调用相应的主页 |
由于IE和Netscape的某些不兼容,使得主页制作出来后在两者中有较大差别,有的甚至不能使用。为便于管理,最佳的方法就是先测试浏览器类型,再调用相应的主页。 |
D12:利用Java Script实现自动加上最后修改时间 |
我们在 HTML 文件档完成了以后,常会加上一行文件最后修改的日期。现在你可不用担心每次都要去改或是忘了改了,你可以很简单的写一个如下的描述语法程式。就可以自动的为你每次产生最后修改的日期了。 |
43、自动滚屏 |
====1、将以下代码加入HEMLl的<body></body>之间: <script language="JavaScript"> |
D14:如何在页面内加入日期 |
我们要告诉你一个使用日期和时间的例子,是从你个人客户端机器获取日期和时间。 另一个方法是: < 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 按钮的功能,试试这个连结,你可以体会一下回来的感觉,这个语法如下所示: |
D16:如何使用浏览器的状态栏 |
以下是原始语法 |
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>之间: <head> |
44、背景时钟 |
====1、以下是这个效果的全部代码。[最好从一个空页面开始] <html> 说明:时钟显示的位置需要你修正TOP,LEFT参数来确定。TOP表示层距离显示器顶部的象素值,LEFT表示距离左侧的象素。 |
D21:神奇的页面滚动控制(一) |
|
D22:神奇的页面滚动控制(二) |
|