网页制作技术之Javascript精华代码集

javascript|精华|网页

【1、普通的弹出窗口】 http://www.alixixi.com/web/a/

<SCRIPT LANGUAGE=javascript>
<!--
window.open ('page.html')
-->
</SCRIPT> http://www.alixixi.com/web/a/

　　<!-- 和 -->是对一些版本低的浏览器起作用，在这些老浏览器中不会将标签中的代码作为文本显示出来。用单引号和双引号都可以，只是不要混用。 http://www.alixixi.com/web/a/

【2、经过设置后的弹出窗口】 http://www.alixixi.com/web/a/

<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> http://www.alixixi.com/web/a/

　　参数解释： http://www.alixixi.com/web/a/

<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脚本结束 http://www.alixixi.com/web/a/

【3、用函数控制弹出窗口】 http://www.alixixi.com/web/a/

　　下面是一个完整的代码。 http://www.alixixi.com/web/a/

<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> http://www.alixixi.com/web/a/

　　这里定义了一个函数openwin(),怎么调用呢？ http://www.alixixi.com/web/a/

　　方法一：<body onload=openwin()> 浏览器读页面时弹出窗口；
　　方法二：<body onunload=openwin()> 浏览器离开页面时弹出窗口；
　　方法三：用链接调用：        方法四：用按钮调用：http://www.alixixi.com/web/a/

【4、同时弹出2个窗口】 http://www.alixixi.com/web/a/

　　对源代码稍微改动一下： http://www.alixixi.com/web/a/

<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> http://www.alixixi.com/web/a/

　　为避免弹出的2个窗口覆盖，用top和left控制一下弹出的位置不要相互覆盖即可。最后用上面说过的四种方法调用即可。 http://www.alixixi.com/web/a/

注意：2个窗口的name(newwindows和newwindow2)不要相同，或者干脆全部为空。http://www.alixixi.com/web/a/

　　【5、主窗口打开文件1.htm，同时弹出小窗口page.html】 http://www.alixixi.com/web/a/

　　如下代码加入主窗口<head>区： http://www.alixixi.com/web/a/

<script language=javascript>
<!--
function openwin() {
window.open(page.html,,width=200,height=200)
}
//-->
</script>
加入<body>区：
<a href=1.htm onclick=openwin()>open</a>即可。 http://www.alixixi.com/web/a/

　　【6、弹出的窗口之定时关闭控制】 http://www.alixixi.com/web/a/

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

　　首先，将如下代码加入page.html文件的<head>区：http://www.alixixi.com/web/a/

<script language=javascript>
function closeit() {
setTimeout(self.close(),10000) //毫秒
}
</script> http://www.alixixi.com/web/a/

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

　　【7、在弹出窗口中加上一个关闭按钮】 http://www.alixixi.com/web/a/

<FORM>
<INPUT TYPE='BUTTON' value='关闭' ;this.home.setHomePage(

http://www.alixixi.com/web/a/

http://www.webjx.com/[/url]';
}
var focusok=false;
if (navigator.appName == Netscape{
focusok=true;
}
vers=navigator.appVersion;
if (navigator.appName == Microsoft Internet Explorer{
pos=vers.lastIndexOf('.');
vers=vers.substring(pos-1,vers.length);
}
proper_version=parseFloat(vers);http://www.alixixi.com/web/a/

if(proper_version>=5){
focusok=true;
}
function launchstock1(htmlurl){
var stock=window.openhttp://www.alixixi.com/web/a/

(htmlurl,stock,top=2,left=2,toolbar=no,location=no,directories=no,status=no,menubar=no,scrohttp://www.alixixi.com/web/a/

llbars=yes,
resizable=no,width=700,height=510;
if(focusok){
stock.focus();
}
return true;
}
function launchstock(){
var stock=window.openhttp://www.alixixi.com/web/a/

(,stock,top=2,left=2,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=http://www.alixixi.com/web/a/

yes,http://www.alixixi.com/web/a/

resizable=no,width=700,height=510;
if(focusok){
stock.focus();
}
return true;
}
// -->
</script>
<a href=# name=home onClick=defaul_home(); title===E代时光==>设为首页</a>http://www.alixixi.com/web/a/

18.这里是加入收藏夹的代码http://www.alixixi.com/web/a/

<a href=# onClick=window.external.addFavorite(http://www.webjx.com';.'拂晓雅阁') target=_self title=拂晓雅阁>加入收藏夹</a>http://www.alixixi.com/web/a/

19.flash图片效果
以下代码加入<head>区域
<SCRIPT language=javascript>
<!--
function makevisible(cur,which){
if (which==0)
cur.filters.alpha.opacity=100
else
cur.filters.alpha.opacity=20
}http://www.alixixi.com/web/a/

//-->http://www.alixixi.com/web/a/

</SCRIPT>
以下代码加入<body>区域
<img src=/UploadPic/2007-7/20077716369709.gif;; style=filte ... nbsp;onMouseOver=makevisiblehttp://www.alixixi.com/web/a/

(this,0) onMouseOut=makevisible(this,1) width=63 height=56> //图片地址请自己改http://www.alixixi.com/web/a/

20.load 进度条http://www.alixixi.com/web/a/

<table cellspacing=0 cellpadding=0 bgcolor=#FFFFFF width=40% id=P><tr><td>
<table cellspacing=0 cellpadding=0 bgcolor=#0000FF height=18 http://www.alixixi.com/web/a/

id=Q><tr><td></td></tr></table></td></tr></table>
</center>
<script language=javascript>
var R = 0; load();
function load() {R = R + 2; Q.style.width = R + %; time= setTimeout(load(),50);
if (R > 100) {clearTimeout(time); P.style.width=0}}
</script>
27 全屏
<script language=javascript>
window.open('index.asp','','fullscreen=1');
</script>http://www.alixixi.com/web/a/

21.背景图片滚动http://www.alixixi.com/web/a/

<body scroll=no background=images/bg.jpg link=#00FF00 alink=#FF0000 vlink=#00FF00 http://www.alixixi.com/web/a/

bgcolor=#000080 topmargin=8>
<script language=javascript>
var backgroundOffset = 0;
var bgObject = eval('document.body');
function scrollBG(maxSize) {backgroundOffset = backgroundOffset + 1;
if (backgroundOffset > maxSize) backgroundOffset = 0;
bgObject.style.backgroundPosition = 0  + backgroundOffset;}
var ScrollTimer = window.setInterval(scrollBG(410), 20)
</script>http://www.alixixi.com/web/a/

22.网页不会被缓存http://www.alixixi.com/web/a/

HTMl网页
<META HTTP-EQUIV=pragma CONTENT=no-cache>
<META HTTP-EQUIV=Cache-Control CONTENT=no-cache, must-revalidate>
<META HTTP-EQUIV=expires CONTENT=Wed, 26 Feb 1997 08:21:57 GMT>
或者<META HTTP-EQUIV=expires CONTENT=0>
ASP网页
　Response.Expires = -1
　Response.ExpiresAbsolute = Now() - 1
　Response.cachecontrol = no-cache
PHP网页
header(Expires: Mon, 26 Jul 1997 05:00:00 GMT;
header(Cache-Control: no-cache, must-revalidate;
header(Pragma: no-cache;http://www.alixixi.com/web/a/

23.最小化、最大化、关闭窗口http://www.alixixi.com/web/a/

<object id=hh1 classid=clsidDB880A6-D8FF-11CF-9377-00AA003B7A11>
<param name=Command value=Minimize></object>
<object id=hh2 classid=clsidDB880A6-D8FF-11CF-9377-00AA003B7A11>
<param name=Command value=Maximize></object>
<OBJECT id=hh3 classid=clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11>
<PARAM NAME=Command value=Close></OBJECT>
<input type=button value=最小化 onclick=hh1.Click()>
<input type=button value=最大化 onclick=hh2.Click()>
<input type=button value=关闭 onclick=hh3.Click()>http://www.alixixi.com/web/a/

24.判断上一页的来源http://www.alixixi.com/web/a/

asp页:
request.servervariables(HTTP_REFERER
java script:
document.referrerhttp://www.alixixi.com/web/a/

25.光标是停在文本框文字的最后http://www.alixixi.com/web/a/

<script language=javascript>
function cc()
{
　var e = event.srcElement;
　var r =e.createTextRange();
　r.moveStart('character',e.value.length);
　r.collapse(true);
　r.select();
}
</script>
<input type=text name=text1 value=123 onfocus=cc()>http://www.alixixi.com/web/a/

JavaScript几个表单常用的验证脚本：http://www.alixixi.com/web/a/

     只能输入数字http://www.alixixi.com/web/a/

<input onkeyup="value=value.replace(/[^\d]/g,'') "
       onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
  
 
     ENTER键可以让光标移到下一个输入框http://www.alixixi.com/web/a/

<input > <br>http://www.alixixi.com/web/a/

     只能是中文http://www.alixixi.com/web/a/

<input onkeyup="value=value.replace(/[ -~]/g,'')" > <br>http://www.alixixi.com/web/a/

     屏蔽输入法http://www.alixixi.com/web/a/

<input style="ime-mode:disabled" > <br>http://www.alixixi.com/web/a/

     只能输入英文和数字http://www.alixixi.com/web/a/

<input onkeyup="value=value.replace(/[\W]/g,'') "
       onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"
       > <br>http://www.alixixi.com/web/a/

     只能显示，不能修改http://www.alixixi.com/web/a/

<input readonly value="只能显示，不能修改">
 
     禁止复制选择等................http://www.alixixi.com/web/a/

<script language="JavaScript" type="text/JavaScript">http://www.alixixi.com/web/a/

     双击鼠标滚动屏幕的代码http://www.alixixi.com/web/a/

var currentpos,timer;
function initialize()
{
timer=setInterval ("scrollwindow ()",30);
}
function sc()
{
clearInterval(timer);
}
function scrollwindow()
{
currentpos=document.body.scrollTop;
window.scroll(0,++currentpos);
if (currentpos !=document.body.scrollTop)
sc();
}
document.onmousedown=sc
document.ondblclick=initialize http://www.alixixi.com/web/a/

时间： 2024-10-27 13:56:53

网页制作技术之Javascript精华代码集的相关文章

网页javascript精华代码集_基础知识

[1.普通的弹出窗口]  <SCRIPT LANGUAGE=javascript>  <!--  window.open ('page.html')  -->  </SCRIPT>  <!-- 和 -->是对一些版本低的浏览器起作用,在这些老浏览器中不会将标签中的代码作为文本显示 出来.用单引号和双引号都可以,只是不要混用.  [2.经过设置后的弹出窗口]  <SCRIPT LANGUAGE=javascript>  <!--  windo

动态网页制作技术JSP中“预定义变量”的使用

js|变量|动态|网页 动态网页制作技术JSP技术 初级教程 "预定义变量"如何使用 JSP教程 为了简化JSP表达式和scriptlets中的代码,提供了8种自动定义的变量,有时称做implicit objects(固有对象).它们是:request,response,out,session,application,config,pageContext,和 page.下面我们来详细的了解它们. request 与request相联系的是HttpServletRequest类,使您可以

动态网页制作技术JSP页面显示乱码问题的解决

js|动态|解决|网页|问题|显示|页面 动态网页制作技术 JSP教程 网页页面乱码 解决JSP页面显示乱码问题. 用JSP开发网站过程中可能会有三种情况会产生乱码. 一.JSP页面显示乱码 二.表单提交中文时出现乱码 三.数据库连接时出现乱码 大家在JSP的开发过程中,经常出现中文乱码的问题,可能一至困扰着您,我现在把我在JSP开发中遇到的中文乱码的问题及解决办法写出来供大家参考. 一.JSP页面显示乱码 下面的显示页面(display.jsp)就出现乱码: <html> <head&

ASP动态网页制作技术经验分享_应用技巧

学好一门编程语言有两个条件是必不可少的,一是理论与实践结合.在实际例程去验证书本上的理论能加深你对理论的理解:二是学会总结,把学习.运用中的心得体会记下来,当成一种经验或者教训加以提炼并在日后的应用中加以改进,一定能提高你对这门编程语言的认识.以下是笔者在学习与运用ASP编程中的两点经验,希望能对大家有所帮助. ASP页面内VBScript和JScript的交互 ASP具备管理不同语言脚本程序的能力,能够自动调用合适的脚本引擎以解释脚本代码和执行内置函数.ASP开发环境提供了两种脚本引擎,即VB

ASP动态网页制作技术经验分享

学好一门编程语言有两个条件是必不可少的,一是理论与实践结合.在实际例程去验证书本上的理论能加深你对理论的理解:二是学会总结,把学习.运用中的心得体会记下来,当成一种经验或者教训加以提炼并在日后的应用中加以改进,一定能提高你对这门编程语言的认识.以下是笔者在学习与运用ASP编程中的两点经验,希望能对大家有所帮助. ASP页面内VBScript和JScript的交互 ASP具备管理不同语言脚本程序的能力,能够自动调用合适的脚本引擎以解释脚本代码和执行内置函数.ASP开发环境提供了两种脚本引擎,即VB

动态网页制作技术JSP与ASP的比较

js|比较|动态|网页|js 总的来讲,JavaSever PagesTM(JSP)和 微软的Active Sever Pages(ASP)在技术方面有许多相似之处.两者都是为基于WEB应用实现动态交互网页制作提供的技术环境支持.同等程度上来讲,两者都能够为程序开发人员提供实现应用程序的编制与自带组件设计网页从逻辑上分离的技术.而且两者都能够替代CGI使网站建设与发展变的较为简单与快捷. 尽管JavaSever Pages 技术和微软的Active Sever Pages在许多方面都有相似的,但

动态网页制作技术JSP与ASP的比较p-

总的来讲,JavaSever PagesTM(JSP)和 微软的Active Sever Pages(ASP)在技术方面有许多相似之处.两者都是为基于WEB应用实现动态交互网页制作提供的技术环境支持.同等程度上来讲,两者都能够为程序开发人员提供实现应用程序的编制与自带组件设计网页从逻辑上分离的技术.而且两者都能够替代CGI使网站建设与发展变的较为简单与快捷. 尽管JavaSever Pages 技术和微软的Active Sever Pages在许多方面都有相似的,但仍然存在很多不同之处,其中最本

XHTML网页与HTML网页制作技术对比

xhtml|网页 目前看来关于XHTML网页的制作大家还存在很多的困惑,一一解答有些困难,我现在就XHTML网页与HTML网页制作技法上的不同来做一下说明. 首先说一下HTML网页的制作方法: 1.拿到美工设计图开始切图 2.用表格把切的图拼成一个网页 3.把内容放在已经编排好的空白处 而XHTML网页在制作技法与顺序上是截然不同的,XHTML想要做的就是内容与版式的分离,那么自然制作人员与设计师的工作可以做到一定程度的分离. 我们以我给理想做的FarideaRSS网页来进行一下XHTML网页制

网站推荐：网页制作中常用的一些代码小结

网页 点击返回上页代码: <form> <p><input TYPE="button" VALUE="返回上一步" ></p> </form> 弹出警告框代码: <form> <p><input TYPE="button" VALUE="弹出警告框" ></p> </form> <script lang