黑色海岸线论坛 - Powered by Discuz! Board

姓名:
E-mail:
主页:
留言:	----- 检测浏览器的名称及版本 ----- <script> <!-- window.document.write(navigator.appName) document.write(' '); window.document.write(parseInt(navigator.appVersion)) // --> </script> ----- 离开页面时显示信息框 ----- <body onUnload= alert("再见，欢迎您再次光临！")> ----- 状态栏显示当前日期、星期 ----- <BODY onLoad="run(); timerONE=window.setTimeout"></BODY> <SCRIPT LANGUAGE="JavaScript"> <!-- Hide timeID = null; timeRunning = false; function stop () { if(timeRunning) clearTimeout(timeID); timeRunning = false; } function time () { tick = new Date(); hours = tick.getHours(); minutes = tick.getMinutes(); seconds = tick.getSeconds(); day = tick.getDay(); month = tick.getMonth(); date = tick.getDate(); year = tick.getYear(); current = "" + ((hours >12) ? hours -12 :hours) current += ((minutes < 10) ? ":0" : ":") + minutes current += ((seconds < 10) ? ":0" : ":") + seconds current += (hours >= 12) ? " P.M." : " A.M." if(day==0){var weekday = " 星期日"} if(day==1){var weekday = " 星期一"} if(day==2){var weekday = " 星期二"} if(day==3){var weekday = " 星期三"} if(day==4){var weekday = " 星期四"} if(day==5){var weekday = " 星期五"} if(day==6){var weekday = " 星期六"} current +=(weekday) window.status=current; timeID = setTimeout("time()",1000); timeRunning = true; } function run(){ stop(); time(); } //--> </SCRIPT> ----- 自动滚屏特效 ----- <body onload="scroller()" > <script> <!-- locate = 0; function scroller() {if (locate !=400 )//400为页面的长度 {locate++;scroll(0,locate); clearTimeout(timer); var timer = setTimeout("scroller()",3);timer;}//3是滚动的速度 } --> </script> ----- 去掉超链接的下划线 ----- <style TYPE="text/css"> <!-- A:link{text-decoration:none} A:visited{text-decoration:none} A:hover {color: #ff00ff;text-decoration:underline} --> </style> ----- 彩色滚动条 ----- <style type="text/css"> body { scrollbar-face-color: #b5daff; scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #000000; scrollbar-arrow-color: #0000ff; scrollbar-base-color: #6699ff; scrollbar-dark-shadow-color: #6699ff; } </style> 让你玩透网页弹出窗口经常上网的朋友可能会到过这样一些网站，一进入首页立刻会弹出一个窗口，或者按一个连接或按钮弹出，通常在这个窗口里会显示一些注意事项、版权信息、警告、欢迎光顾之类的话或者作者想要特别提示的信息。其实制作这样的页面效果非常的容易，只要往该页面的HTML里加入几段Javascript代码即可实现。下面俺就带您剖析它的奥秘。【1、最基本的弹出窗口代码】其实代码非常简单：因为着是一段javascripts代码，所以它们应该放在标签和之间。是对一些版本低的浏览器起作用，在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。 window.open (page.html) 用于控制弹出新的窗口page.html，如果page.html不与主窗口在同一路径下，前面应写明路径，绝对路径(http://)和相对路径(../)均可。用单引号和双引号都可以，只是不要混用。这一段代码可以加入HTML的任意位置，和之间可以，间也可以，越前越早执行，尤其是页面代码长，又想使页面早点弹出就尽量往前放。【2、经过设置后的弹出窗口】下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。我们来定制这个弹出的窗口的外观，尺寸大小，弹出的位置以适应该页面的具体情况。参数解释： 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为允许； js脚本结束【3、用函数控制弹出窗口】下面是一个完整的代码。 ...任意的页面内容... 这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。怎么调用呢？方法一：浏览器读页面时弹出窗口；方法二：浏览器离开页面时弹出窗口；方法三：用一个连接调用：打开一个窗口注意：使用的“#”是虚连接。方法四：用一个按钮调用：【4、同时弹出2个窗口】对源代码稍微改动一下：为避免弹出的2个窗口覆盖，用top和left控制一下弹出的位置不要相互覆盖即可。最后用上面说过的四种方法调用即可。注意：2个窗口的name(newwindows和newwindow2)不要相同，或者干脆全部为空。OK？【5、主窗口打开文件1.htm，同时弹出小窗口page.html】如下代码加入主窗口区：加入区： open即可。【6、弹出的窗口之定时关闭控制】下面我们再对弹出的窗口进行一些控制，效果就更好了。如果我们再将一小段代码加入弹出的页面(注意是加入到page.html的HTML中，可不是主页面中，否则...)，让它10秒后自动关闭是不是更酷了？首先，将如下代码加入page.html文件的区： function closeit() {setTimeout("self.close()",10000) file://毫秒} 然后，再用这一句话代替page.html中原有的这一句就可以了。(这一句话千万不要忘记写啊！这一句的作用是调用关闭窗口的代码，10秒钟后就自行关闭该窗口。) 【7、在弹出窗口中加上一个关闭按钮】呵呵，现在更加完美了！【8、内包含的弹出窗口-一个页面两个窗口】上面的例子都包含两个窗口，一个是主窗口，另一个是弹出的小窗口。通过下面的例子，你可以在一个页面内完成上面的效果。 function openwin() {OpenWindow=window.open("", "newwin", "height=250, width=250,toolbar=no,scrollbars="+scroll+",menubar=no"); file://写成一行 OpenWindow.document.write("例子") OpenWindow.document.write("") OpenWindow.document.write("Hello!") OpenWindow.document.write("New window opened!") OpenWindow.document.write("") OpenWindow.document.write("") OpenWindow.document.close()} 打开一个窗口看看 OpenWindow.document.write()里面的代码不就是标准的HTML吗？只要按照格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用OpenWindow.document.close()结束啊。【9、终极应用--弹出的窗口之Cookie控制】回想一下，上面的弹出窗口虽然酷，但是有一点小毛病(沉浸在喜悦之中，一定没有发现吧？)比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页)，那么每次刷新这个页面，窗口都会弹出一次，是不是非常烦人？:-(有解决的办法吗？Yes! ;-) Follow me. 我们使用cookie来控制一下就可以了。首先，将如下代码加入主页面HTML的区： function openwin() {window.open("page.html","","width=200,height=200")} function get_cookie(Name) {var search = Name + "=" var returnvalue = ""; if (documents.cookie.length > 0) { offset = documents.cookie.indexOf(search) if (offset != -1) { offset += search.length end = documents.cookie.indexOf(";", offset); if (end == -1) end = documents.cookie.length; returnvalue=unescape(documents.cookie.substring(offset,end)) } } return returnvalue; } function loadpopup(){ if (get_cookie(popped)==){ openwin() documents.cookie="popped=yes" } } 然后，用（注意不是openwin而是loadpop啊！）替换主页面中原有的这一句即可。你可以试着刷新一下这个页面或重新进入该页面，窗口再也不会弹出了。真正的Pop-Only-Once！写到这里弹出窗口的制作和应用技巧基本上算是完成了，俺也累坏了，一口气说了这么多，希望对正在制作网页的朋友有所帮助俺就非常欣慰了。需要注意的是，JS脚本中的的大小写最好前后保持一致 ----- 飞动旋转的时钟 ----- dCol='000099';//date colour. fCol='668099';//face colour. sCol='FF0000';//seconds colour. mCol='000000';//minutes colour. hCol='000000';//hours colour. ClockHeight=40; ClockWidth=40; ClockFromMouseY=0; ClockFromMouseX=100; //Alter nothing below! Alignments will be lost! d=new Array("SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY"); m=new Array("JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER"); date=new Date(); day=date.getDate(); year=date.getYear(); if (year "; props2=""; Split=360/n; Dsplit=360/D.length; HandHeight=ClockHeight/4.5 HandWidth=ClockWidth/4.5 HandY=-7; HandX=-2.5; scrll=0; step=0.06; currStep=0; y=new Array();x=new Array();Y=new Array();X=new Array(); for (i=0; i '+props2+D<i>+''); for (i=0; i '+props+Face<i>+''); for (i=0; i '+S<i>+''); for (i=0; i '+M<i>+''); for (i=0; i '+H<i>+''); } if (ie){ document.write(''); for (i=0; i '+props2+D<i>+''); document.write(''); document.write(''); for (i=0; i '+props+Face<i>+''); document.write(''); document.write(''); for (i=0; i '+H<i>+''); document.write(''); document.write(''); for (i=0; i '+M<i>+''); document.write('') document.write(''); for (i=0; i '+S<i>+''); document.write('') } (ns)?window.captureEvents(Event.MOUSEMOVE):0; function Mouse(evnt){ ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY; xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX; } (ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse; function ClockAndAssign(){ time = new Date (); secs = time.getSeconds(); sec = -1.57 + Math.PI * secs/30; mins = time.getMinutes(); min = -1.57 + Math.PI * mins/30; hr = time.getHours(); hrs = -1.575 + Math.PI * hr/6+Math.PIparseInt(time.getMinutes())/360; if (ie){ Od.style.top=window.document.body.scrollTop; Of.style.top=window.document.body.scrollTop; Oh.style.top=window.document.body.scrollTop; Om.style.top=window.document.body.scrollTop; Os.style.top=window.document.body.scrollTop; } for (i=0; i ----- 不同的时间显示不同问候语 ----- ") day = new Date( ) hr = day.getHours( ) if (( hr >= 0 ) && (hr = 4 ) && (hr = 7 ) && (hr = 12) && (hr = 13) && (hr = 17) && (hr = 18) && (hr = 19) && (hr ") //---> ----- 日期倒计时(如节日) ----- var urodz= new Date("December 25,2000"); var s="圣诞节"; //以圣诞节为例，可以改为其他 var now = new Date(); var ile = urodz.getTime() - now.getTime(); var dni = Math.floor(ile / (1000 60 * 60 * 24)); if (dni > 1) document.write("今天离"+s+"还有"+dni +"天") else if (dni == 1) document.write("只有2天啦！") else if (dni == 0) document.write("只有1天啦！") else document.write("好象已经过了哦！"); ----- 梦幻式下拉菜单 ----- <STYLE type=TEXT/CSS> A { TEXT-DECORATION: none } A:hover { COLOR: #ff9900; TEXT-DECORATION: underline } TD { FONT-SIZE: 9pt; LINE-HEIGHT: 13pt } TH { FONT-SIZE: 9pt; LINE-HEIGHT: 13pt } BODY { FONT-SIZE: 9pt; LINE-HEIGHT: 13pt } #mnu { FILTER: revealTrans(Duration=1.5,Transition=12) visibility:hide } </STYLE> <SCRIPT> function set_mnu() { if (mnu.style.visibility=="hidden") { //产生效果和把图层显示 mnu.filters.revealTrans.apply(); mnu.style.visibility="visible"; mnu.filters.revealTrans.play(); } else{ //隐藏图层和停止效果播放 mnu.filters.revealTrans.stop(); mnu.style.visibility="hidden" ; } } </SCRIPT> </head> 　 <table border="1" width="13%" bordercolorlight="#000000" bordercolordark="#FFFFFF" bordercolor="#EFEFEF" cellspacing="0"> <tr> <td width="100%"> <p align="center"><A href="javascript:set_mnu(mnu);">显示菜单</A> </td> </tr> </table> <DIV id=mnu style="HEIGHT: 10px; LEFT: 1px; POSITION: relative; TOP: 1px; VISIBILITY: hidden; WIDTH: 93px; Z-INDEX: 1"> <TABLE border=0 cellPadding=2 cellSpacing=4 width="100%"> <TBODY> <TR > <TD align="center" style="border: 1 solid #000000">测试一</TD></TR> <TR > <TD align="center" style="border: 1 solid #000000"><a href="#">测试一</a></TD></TR> <TR > <TD align="center" style="border: 1 solid #000000"><a href="#">测试一</a></TD></TR> <TR > <TD height=13 align="center" style="border: 1 solid #000000"><A href="javascript:window.location='view-source:'+window.location.href" onclick="window.location='view-source:'+window.location.href">查看源文件</A></TD></TR> </TBODY> </TABLE> </DIV> ----- 推门式菜单 ----- <STYLE type=text/css> #slidemenubar2 {BACKGROUND-COLOR:#408080; FONT: 9pt/20pt "宋体"; LEFT: -110pt; POSITION: absolute; TOP: 100pt; WIDTH:80pt} BODY {FONT-SIZE: 9pt; MARGIN: 0pt} #slidemenubar { BACKGROUND-COLOR: #f3f3f3;FONT: 9pt/20pt "宋体"; LEFT: -110pt; POSITION: absolute; TOP: 100pt; WIDTH: 80pt; layer-background-color: lightyellow} </STYLE> <SCRIPT language=JavaScript> if (document.all) document.write('<div id="slidemenubar2" style="left:-100" onMouseover="pull()" onMouseout="draw()">') </SCRIPT> <LAYER id=slidemenubar onmouseout=draw() onmouseover=pull()> <SCRIPT language=JavaScript> var sitems=new Array() var sitemlinks=new Array() sitems[0]="天风网-自助建站" sitemlinks[0]="http://www.tf168.com/perweb" sitems[1]="天风网-音乐视听" sitemlinks[1]="http://www.tf168.com/music" for (i=0;i<=sitems.length-1;i++) document.write('<a href='+sitemlinks<i>+'><font color=#8000FF>'+sitems<i>+'</a><br>') </SCRIPT> </LAYER> <SCRIPT language=JavaScript> function regenerate(){ window.location.reload() } function regenerate2(){ if (document.layers) setTimeout("window.onresize=regenerate",400) } window.onload=regenerate2 if (document.all){ document.write('</div>') themenu=document.all.slidemenubar2.style rightboundary=0 leftboundary=-100 } else{ themenu=document.layers.slidemenubar rightboundary=100 leftboundary=10 } function pull(){ if (window.drawit) clearInterval(drawit) pullit=setInterval("pullengine()",50) } function draw(){ clearInterval(pullit) drawit=setInterval("drawengine()",50) } function pullengine(){ if (document.all&&themenu.pixelLeft<rightboundary) themenu.pixelLeft+=5 else if(document.layers&&themenu.left<rightboundary) themenu.left+=5 else if (window.pullit) clearInterval(pullit) } function drawengine(){ if (document.all&&themenu.pixelLeft>leftboundary) themenu.pixelLeft-=5 else if(document.layers&&themenu.left>leftboundary) themenu.left-=5 else if (window.drawit) clearInterval(drawit) } </SCRIPT><hr noshade size="2" width="100%" color="#808080"> <b>作者: </b>咆哮的蜗牛 <b>时间: </b>2005-4-4 13:34 <b>标题: </b>网上搜索下来的代码,(什么还不够多?饶了我吧)(1)<br /><br /> 不错不错````````<hr noshade size="2" width="100%" color="#808080"> <b>作者: </b>飞鸟设计 <b>时间: </b>2005-4-7 16:26 <b>标题: </b>网上搜索下来的代码,(什么还不够多?饶了我吧)(1)<br /><br /> 很很!!!!好好,偶喜欢!!!<hr noshade size="2" width="100%" color="#808080"> <b>作者: </b>皮蛋瘦肉 <b>时间: </b>2005-4-9 17:14 <b>标题: </b>网上搜索下来的代码,(什么还不够多?饶了我吧)(1)<br /><br /> 不错的东西<br /> 谢谢了了楼主<hr noshade size="2" width="100%" color="#808080"> <b>作者: </b>syxxzhao <b>时间: </b>2005-4-9 17:46 <b>标题: </b>网上搜索下来的代码,(什么还不够多?饶了我吧)(1)<br /><br /> 我喜欢收藏起来！<br /> 当然要回贴道一声辛苦！<br /><br /><br /><br /><hr noshade size="2" width="100%" color="BORDERCOLOR"> <table cellspacing="0" cellpadding="0" border="0" width="95%" align="center" style="font-size: 0.83em; font-family: Verdana, Helvetica, Arial, sans-serif"> <tr><td>欢迎光临黑色海岸线论坛 (http://bbs.thysea.com/)</td> <td align="right"> Powered by Discuz! 7.2</td></tr></table> </body> </html>