前往顾页
以后地位: 主页 > 收集编程 > Jsp实例教程 >

常见网页js精华代码集

时候:2011-11-03 19:21来源:知行网www.zhixing123.cn 编辑:麦田守望者

【1、浅显的弹出窗口】

其实代码非常简朴:

<SCRIPT LANGUAGE=javascript>

<!--

window.open ('page.html')

-->

</SCRIPT>

  因为这是一段javascripts代码,所以它们应当放在<SCRIPT LANGUAGE=javascript>标签和</script>之间。<!-- 和 -->是对一些版本低的浏览器起感化,在这些老浏览器中不会将标签中的代码作为文本显现出来。要养成这个好习惯啊。

 window.open ('page.html') 用于节制弹出新的窗口page.html,如果page.html不与主窗口在同一途径下,前面应写明途径,绝对途径(http://)和相对途径(../)都可。

  用单引号和双引号都可以,只是不要混用。

  这一段代码可以插手HTML的肆意地位,<head>和</head>之间可以,<body>间</body>也能够,越前越早履行,特别是页面代码长,又想使页面早点弹出就尽可能往前放。

  【2、颠末设置后的弹出窗口】

  下面再说一说弹出窗口的设置。只需再往下面的代码中加一点东西便可以了。我们来定制这个弹出的窗口的表面,尺寸年夜小,弹出的地位以适应当页面的详细环境。

<SCRIPT LANGUAGE=javascript>

<!--

window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')

//写成一行

-->

</SCRIPT>

  参数解释:

<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=重视:利用的“ 体例四:用一个按钮调用:

<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>区:

<script language=javascript>

<!--

function openwin() {

window.open(page.html,,width=200,height=200)

}

//-->

</script>

插手<body>区:

<a href=1.htm onclick=openwin()>open</a>便可。

  【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=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=<input type=button onclick=openwin() value=翻开窗口>

</body>

</html>

  看看 OpenWindow.document.write()内里的代码不就是标准的HTML吗?只需遵循格局写更多的行便可。千万重视多一个标签或少一个标签就会呈现错误。记得用OpenWindow.document.close()结束啊。

 【9、终究利用--弹出的窗口之Cookie节制】

  回想一下,下面的弹出窗口固然酷,但是有一点小弊端(沉浸在高兴当中,必然没有发明吧?)比如你将下面的脚本放在一个需求频繁颠末的页面里(比方首页),那么每次革新这个页面,窗口都会弹出一次,是不是是非常烦人?:-(

  有处理的体例吗?Yes! ;-) Follow me.

  我们利用cookie来节制一下便可以了。

  起首,将以下代码插手主页面HTML的<HEAD>区:

<script>

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

}

}

</script>

  然后,用<body onload=loadpopup()>(重视不是openwin而是loadpop啊!)替代主页面中原本的<BODY>这一句便可。你可以试着革新一下这个页面或从头进入该页面,窗口不再见弹出了。实在的Pop-Only-Once!

  写到这里弹出窗口的制作和利用技能根基上算是完成了,俺也累坏了,一口气说了这么多,希望对正在制作网页的朋友有所帮忙俺就非常欣喜了。

  需求重视的是,JS脚本中的的年夜小写最好前后保持分歧。

  1.弹启一个全屏窗口

<html>

<body onload=window.open('http://www.pconline.com.cn','example01','fullscreen');>;

<b>www.e3i5.com</b>

</body>

</html>

  2.弹启一个被F11化后的窗口

<html>

<body onload=window.open(''http://www.pconline.com.cn','example02','channelmode');>;

<b>www.e3i5.com</b>

顶一下
(0)
0%
踩一下
(0)
0%
------分开线----------------------------
标签(Tag):Javascript javascript实例教程 JavaScript源代码 javascript教程
------分开线----------------------------
颁发评论
请自发遵循互联网相关的政策法规,严禁公布色情、暴力、革命的谈吐。
评价:
神色:
考证码:点击我更换图片
猜你感兴趣