网页编程的学习笔记

网页编程的学习笔记

一、JavaScript

二、ASP

 

一、JavaScript

0-1基本Html语言

(1)超链接指定目标网页的Name

<A href="a1.htm" target="xzy">连结</A>

一般情况下超链接打开的目标网页是在本网页之内打开的,但是利用上面的代码可以在新窗口中打开目标网页,再重新打开时仍然在已经开启的目标网页中显示.

(2)框架中指定子网页的Name

上面的网页框架中,点击下面的产生随机数时,上面的数字会随着刷新

框架代码

<HTML>

<HEAD>

<title>Frames</title>

</HEAD>

    <FRAMESET ROWS="50%,50%"> 

    <FRAME SRC="a1.html" name="xzy1"> 

    <FRAME SRC="a2.html" name="xzy2"> 

  </FRAMESET> 

</HTML>

上部的网页代码

<html>

<head>

</head>

<body>

<script>

document.writeln(Math.random());

</script>

</body>

</html>

下部网页代码

<html>

<head>

</head>

<body>

<A href="a1.html" target="xzy1">产生新随机数</A>

</body>

</html>

JS提交表单数据语法

Document.formName.submit();

(3)在网页总嵌套其它网页(Ifame)

<IFRAME src="太原办公厅.htm"  name="zhidu"  frameBorder=0 scrolling="yes" width=420  height=355 ></IFRAME>

去掉frameBorder=0,则IFRAME带上边框

scrolling="no"则没有了调整位置的滚动条

把Iframe中添到层中可以随着层改变位置

点击按钮更改Iframe的网页内容

<input type="button" value="按钮" name="B3" οnclick="

pdfshow.document.location='url';

">

<iframe id=pdfshow scrolling="yes" align="center" 

 frameBorder=1  width="100%"  height="100%" 

>

</iframe>

第二个例子程序

<input type="button" value="a" name="B3" οnclick="pdfshow.document.location='aa.htm';alert(location.href)"><br>

<input type="button" value="b" name="B4" οnclick="pdfshow.document.location='bb.htm';">

<br>

 <IFRAME id=pdfshow align=left                    

      src="" frameBorder=1 width=300 scrolling=yes 

      height=200>

</IFRAME>

注意修改目标地址的时候,不能随便写,如写程sohu和csdn则会报错,”权限拒绝”,要在自己目录下的(好象同一个网站下的也应该行吧)

(4)YesNo提示框

function pushbutton() 

{

v=confirm("完全删除后将无法恢复,请您确认是否继续?");

if(v)

alert('yes clicked');

else

alert('no clicked');

}

设置文本输入框的读写属性

window.document.getElementById('nodeName').readOnly = false;

window.document.getElementById('nodeTops').readOnly = false;

选取文本框中的文本函数

window.document.getElementById('nodeName').select();

(5)在超链接中执行函数

<a href=”javascript:void(0)”> :本例功能是不执行任何操作

:<a href=”javascript:alert('cctv');”> :显示提示框

(6)下拉选择框的几个属性

下拉选择框的名字是D1

<1>获得D1中有几个元素:alert(D1.options.length);

<2>追加一个新元素,cctv

function AddNew()

{

var Mycat=document.createElement("OPTION");

Mycat.text=Mycat.value="cctv";

document.forms[0].D1.add(Mycat);

document.forms[0].D1.selectedIndex=document.forms[0].D1.length-1;

document.refresh;

}

(7)网页打开时加载另外一个内容

<meta http-equiv="refresh" content="0;url=http://www.sohu.com">

(8)避免重复open窗体

if (this.name!='fullscreen'){ 

setTimeout("window.opener=null;window.close();",500);

window.open(location.href,'fullscreen','fullscreen,scrollbars'); 

}

(9)加入CSS

<link rel="stylesheet" type="text/css" href="../style/style.css">

(10)加入js文件

<script src="xtree.js"></script>

000各种事件

(1)onLoad

<body onLoad="scroll()">

在网页刷新,启动时调用指定的函数.

(2)onunload

<body onload="scroll()" onunload="alert('关闭')">

(3)onClick

οnclick=pushbutton("你好") //单击调用函数Click

(4)onblur也就是LostFocus

οnblur=Message(this.value) //丢失焦点LostFocus

(5)OnMouseOver:当鼠标移进区域时执行,MouseIn

οnmοuseοver="window.status='Just another stupid link...'; return true" //鼠标移过MouseMove

JavaScript代码可以直接写在Html的<>内,如:

<A onmouseover="var a;a=30;alert(''+a+'');document.writeln('abc');" href="00Readme.htm" >连结</A>

这将显示一个超链接,连接的目标是00Readme.htm,当鼠标移动到该超链接上时,则执行JavaScript代码.

(6)onMouseOut鼠标移出

<input type="button" value="按钮" name="B3" onMouseOut="alert('c');">

(7)onMouseMove 鼠标在区域内移动

<body onmousemove="move();">

(8)onSelect:反白选择其上的文字或元素时

<body onSelect="window.status=Math.random();">

反白选择网页上一个元素或文字时执行本事件,每多反白一个则执行一遍.

对象得到焦点:

dateForm.select()

(9)onChange

text框内容发生变化时激发

000_1常用的元素状态设置

说明,本节使用的代码都是设置按钮或图片等元素的外观或动作的

<input style="CURSOR: hand" type="button" value="按钮" name="B3"  ID="Button1">

可以把移动到按钮上的鼠标形状为手指形状

多个状态设置时用;分开

(1)设置鼠标的外观

style="CURSOR: hand"

(2)设置为不可见

style="display:none;CURSOR: hand"

可见是style="display:inline;CURSOR: hand"

关于js检测浏览器关闭事件(-)

<script type='text/javascript'>

function promptOnClose(e){

 //e = e ? e : windowevent;

 var promptString = '你要关闭浏览器吗?';

 //event.returnValue = promptString;

 return promptString;

}

if (window != top){

 top.location.href = "http://www.baidu.com";

}else{

 if (window.Event) {

      window.onbeforeunload = function(event) {

          return promptOnClose(event);

      }

 } else {

      window.onbeforeunload = function() {

          return promptOnClose(event);

  }

 }

}

</script>

关于浏览器检测浏览器关闭事件(二)

001常用JavaScript代码

三目运算(?:)

<script>

a=5

alert(a>3?"111":"111no") //显示:111

alert(a<3?"222":"222no") //显示:222no

</script>

(0)把函数写在其它文件中(类似C中的include,或inline)

<SCRIPT src="module/images.js"></SCRIPT>

把函数卸载module目录下的images.js(也可以是其它扩展名)文件中,便可以在本文件中使用,相当于把那段代码写在这个地方一样.

如images.js的内容可以这么写

function X()

{

   alert("a");

}

把这些函数写上就可以了,

(1)在状态条上书写字符串

window.status="显示在状态条上";

(2)Alert

alert("cctv";或alert('cctv');

(3)输出文字

document.writeln("abc");

document.writeln()在网页初始加载时,输出的文字会产生在源代码中,但是加载网页后再执行某些函数内执行的document.writeln();则会将整个网页的代码全部替换为输出的文字,所以document.writeln最好只在加载时执行一遍,它也可以创建元素,在网页中使用过程中最好不要执行document.writeln,

<html>

<head>

</head>

<body bgcolor="pink">

<script>document.writeln("abc");</script>

<input onclick="document.writeln('abc');" type="button" value="按钮" name="B3" style="CURSOR: hand" ID="Button1">

</body>

</html>

第一次会显示abc并且有按钮,当点击按钮时,源代码就只剩下了abc其它文字全没有了

(4)数学运算

var i;

i=Math.random();

Math的都是数学方面的运算,包括sin,cos等等

(5)打开一个网页

Ø 在新窗口中打开

<html>

<head>

<script>

function MyOpen(url)

{

msg=open(url,"xzy");

}

</script>

</head>

<body>

<input type="button" name="Button2" value="按钮" onclick="MyOpen('00Readme.htm')" ID="Button1">

</body>

</html>

Ø 在当前网页打开

<script>

location="http://www.sohu.com";

</script>

只要网页一执行这个代码,就会把网页引导到指定的目标上,若像这样写在body之间,只要一打开网页就去了sohu上,不会显示本网页的内容

也可以把location=””放在onclick中或其它事件中,则可以导引网页到sohu上.

(5_01)可以互相打开的地址函数

网页a1.htm 和 a2.htm,在a2上编制了一个通用的过程,只要按照一定的规则打开a2,则a2可以再返回到a1上

a1.htm                                         a2.htm

(6)使用数组

Ø 基本操作

<script>

var a=new Array("cctv","sxtv","tytv");

var a=new Array(3);

var a=new Array();

a[0]="cctv";

a[1]="sxtv";

a[2]="tytv";

a[3]="xzy";

for(i=0;i<a.length;i++)

document.writeln(a[i]);

</script>

Ø join:利用数组的join方法,连接所有的数组内容

数组的join(string val)可以将数组元素连接起来,并且用中间插入val,

当在网页上交互显示下拉框内容的时候可以将内容加载到数组内,再利用innerHTML将内容显示在出来

<script>

var a=new Array("cctv","sxtv","tytv");

var a=new Array(3);

var a=new Array();

a[0]="cctv";

a[1]="sxtv";

a[2]="tytv";

a[3]="xzy";

document.writeln(a.join('<br>'));

</script>

显示:

cctv
sxtv
tytv
xzy 

Ø 数组排序

var arr=new Array(1000)

arr[0]="xbc1";

arr[1]="bcx2";

arr[2]="cctv3";

arr[5]="xctv4";

arr.sort();

for(i=0;i<arr.length;i++)

{

if(arr[i]!=null)

document.writeln(arr[i]);

}

(7)网页的后退和前进

history.back()

history.forward()

history.go(1)  go(-1)  go(-2)

(8)类型转换

Ø 字符串转为整数

var a1;

a1=parseInt(”88”);

(9)设置焦点

document.first.text1.focus();

(10)设置背景色

document.bgColor=255;

(11)日期函数

var D=new Date(); 返回的是当前日期

var D=new Date(1995,10,11); 

D.setHours(15);

给日期类型赋值

(12)使用网页地址的一些信息

<script>

var s;

//这里测试用的地址是 http://192.168.1.169:81/test.asp 

s=location.hostname;//192.168.1.169

s=location.host;//192.168.1.169:81

s=location.href;//http://192.168.1.169:81/test.asp 若带参数,则连参数也可以读出,它会把地址栏内的数据完整的读出来

s=location.pathname;///test.asp 

s=location.port;//81

s=location.protocol;//http:

document.writeln(s);

if(window.location.search) alert(window.location.search);//如果打开时设置了参数,如E:\01_XZY\02_Java\01_练习\test8.htm?name=xzy&age=32,则会显示?name=xzy&age=32

</script>

(13)打开新链接

window.location="http://192.168.1.169:81/postinfo.html";

window就是打开的IE浏览器,windows有很多属性,可以通过.看出

(14)关闭IE浏览器

window.close();可以直接将页面关闭了,但是在直接打开的网页上有确认关闭的提示,如果是通过超连接到新窗口打开的网页,则关闭时没有提示。

<a target="_blank" href="a.htm">ggg</a>则在a.htm中有window.close的话可以直接关闭。

无提示框的(好像不能用)

<html>

<head>

<object id=closes type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11" VIEWASTEXT>  

<param name="Command" value="Close">

</object>  

</head>

<body bgcolor="pink">

<input onclick="closes.Click();" type="button"  value="关闭" name="B3" style="CURSOR: hand" ID="Button1">

</body>

</html>

可以直接关闭,没有任何提示

(15)链接的颜色控制

Ø <1>设置1

用下面的设置可以把超链接的下划线去掉,当鼠标移动上去的时候是红颜色.

在<head></head>之间填写

<STYLE>

A:link {FONT-SIZE: 9pt; COLOR: blue; FONT-FAMILY: '宋体'; TEXT-DECORATION: none}

A:visited {FONT-SIZE: 9pt; COLOR: blue; FONT-FAMILY: '宋体'; TEXT-DECORATION: none}

A:active {FONT-SIZE: 9pt; FONT-FAMILY: '宋体'; TEXT-DECORATION: none}

A:hover {FONT-SIZE: 9pt; COLOR: red; FONT-FAMILY: '宋体'; TEXT-DECORATION: none}

TD {FONT-SIZE: 9pt; COLOR: black; LINE-HEIGHT: 14pt; FONT-FAMILY: '宋体'; TEXT-DECORATION: none}

P {FONT-SIZE: 9pt; LINE-HEIGHT: 14pt; FONT-FAMILY: '宋体'}

BODY {FONT-SIZE: 9pt; LINE-HEIGHT: 14pt; FONT-FAMILY: '宋体'}

</STYLE>

Ø <2>或设置2

<Html>

<head>

<script>

document.linkColor="#FFFF00";//未使用的连接的颜色

document.alinkColor=65280;//点击连接时连接的颜色

document.vlinkColor=0;//一经点击过的连接的颜色

document.fgColor="#FF00FF";//默认文字的颜色

document.bgColor="#505050";//网页的背景色

</script>

</head>

<body>

我是邢志云

<a href="http://www.sohu.com" target=_blank >cctv</a>

<a href="http://ddd" target=_blank >cctv</a>

</body>

</html>

(16)数据输入提示窗口

<HTML>

<Head>

<script languaga="JavaScript">

<Html>

<head>

</head>

<body>

<script>

var test=window.prompt("请输入数据:","你好");

document.write(test+":JavaScript输入输出的例子");

</script>

</body>

</script>

</Head>

</HTML>

<Html>

<head>

<script>

document.linkColor="#FFFF00";//未使用的连接的颜色

document.alinkColor=65280;//点击连接时连接的颜色

document.vlinkColor=0;//一经点击过的连接的颜色

document.fgColor="#FF00FF";//默认文字的颜色

document.bgColor="#505050";//网页的背景色

</script>

</head>

<body>

我是邢志云

<a href="http://www.sohu.com" target=_blank >cctv</a>

<a href="http://ddd" target=_blank >cctv</a>

</body>

</html>

(17)控制文字的显示:

<a style="display:inline;color:#ff0000">aaa</a>

display:none时不显示文字

完整的代码

<html>

<head>

<title>New Page 1</title>

<script>

function Make()

{

if(document.all.text1.style.display=="none")

document.all.text1.style.display="inline";

else

document.all.text1.style.display="none"

}

</script>

</head>

<body>

<a name=text1 style="display:inline;color=#FF0000;font=32">真有趣!</a>

<br>

<input οnclick="Make();" type="button" value="按钮" name="B3" style="CURSOR: hand" ID="Button1">

</body>

</html>

(18) 只能输入数字的文本框

<body>

<script>

function JHshNumberText()

{

if ( !(((window.event.keyCode >= 48) && (window.event.keyCode <= 57)) 

|| (window.event.keyCode == 13) || (window.event.keyCode == 46) 

|| (window.event.keyCode == 45)))

{

window.event.keyCode = 0 ;

}

</s cript>

<form name=frm>

<input type=text name=test value="" onKeypress="JHshNumberText()">

<input type=button name=submit value=submit>

</form>

</body>

switch

switch(j)
{
case 0:
wtab.rows[iRow].cells(j).innerHTML = xuhao+" "; wtab.rows[iRow].cells(j).align="right";
break;
case 1:
wtab.rows[iRow].cells(j).innerHTML = " "+mc; wtab.rows[iRow].cells(j).align="left";
break;
case 2:
wtab.rows[iRow].cells(j).innerHTML =" "+ shifou; wtab.rows[iRow].cells(j).align="left";
break;
case 3:
wtab.rows[iRow].cells(j).innerHTML = czuo; wtab.rows[iRow].cells(j).align="center";
wtab.rows[iRow].cells(j).attachEvent ('onmouseover',SetColor_1);
wtab.rows[iRow].cells(j).attachEvent ('onmouseout', SetColor_2);
break;
}

19、客户端数据校验的通用解决之道----妙用自定义属性


我们知道,HTML的文本框元素可以使用type,name,value,size,maxlength,style,id等固有属性,但你可曾想到,我们还可以自定义一些属性呢。笔者是在一个极其偶然的机会里发现这个小秘密的,并且没有想到的是,这个小秘密竟然可以帮我们很大的忙----实现客户端数据的通用校验,自此客户端校验工作容易做了,不用再为每个FORM表单劳神又费力地写Javascript校验代码了。 

请看下面的测试网页univerify_test.html: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>基于自定义属性的客户端统一检测方法</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

</head>

<script language="javascript" src="univerify.js"></script>

<body>

<br>

<br>

<center>基于自定义属性的客户端统一检测方法</center>

<form name="form1" method="post" action="" 

οnsubmit="return verifyAll(form1);">

<center>

<TABLE align="center" border="1" borderColor="#aaeeff"

 cellPadding="1" cellSpacing="0" width="580">

<tr>

<td><img id=img_NAME src="img/space.gif"></td>

<td>姓名:</td>

<td><input type="text" name="NAME" chname="姓名" 

size="10" maxlength="10" maxsize="10" nullable="no"

datatype="text" onBlur="verifyInput(this);">

<font color="red">*</font></td>

</tr>

<td><img id=img_AGE src="img/space.gif"></td>

<td>年龄:</td>

<td><input type="text" name="AGE" chname="年龄" 

size="3" maxlength="3" maxsize="3" nullable="no" 

datatype="number" onBlur="verifyInput(this);">

<font color="red">*</font></td>

<tr>

<td><img id=img_ADDRESS src="img/space.gif"></td>

<td>住址:</td>

<td><input type="text" name="ADDRESS" chname="住址" 

size="40" maxlength="100" maxsize="100" nullable="yes" 

datatype="text" onBlur="verifyInput(this);"></td>

</tr>

<tr height=48px>

<td colspan=3 align=center><input type="submit" 

name="Button" value="检测全部输入并提交" ></td>

</tr>

</table>

</center>

</form>

</html>



上述网页的表单form1中有三个文本框,姓名(NAME)、年龄(AGE)和住址(ADDRESS)。笔者为这三个文本框中自行定义了四个新属性,分别是

1chname:表示该数据的中文名称,用于校验出错时显示用。 

2maxsize:表示允许输入的最大长度,这个长度是以节字计算的。 

3nullable:表示输入值是否允许为空。为yes时允许为空。 

4datatype:表示输入值的数据类型。这个数据类型用户可以根据需要自行定义,需要注意的是,对于每一个新的数据类型,均需要在下面将要讲述的Javascript文件univerify.js中添加相应的校验函数,从而实现统一校验。 

三个文本框都对失去焦点事件进行捕获:onBlur="verifyInput(this);"。在失去焦点时用verifyInput校验一下此文本框的值是否合法。 

form1表单对onsubmit事件进行了捕获:οnsubmit="return verifyAll(this);"。在用户提交表单时,用verifyAll对此表单的元素的值统一进行检测,验证其合法性,保证存入数据库时不出现异常。 

上述网页引用的Javascript函数库univerify.js内容如下: 

/******************************************************/

/* 文件名:univerify.js                               */

/* 功  能:基于自定义属性的统一检测用Javascript函数库 */

/* 作  者:纵横软件制作中心雨亦奇(zhsoft88@sohu.com)  */

/******************************************************/

/* 取得字符串的字节长度 */

function strlen(str)

{var i;

var len;

len = 0;

for (i=0;i<str.length;i++)

{

if (str.charCodeAt(i)>255) len+=2; else len++;

}

return len;

}

/* 检测字符串是否为空 */

function isnull(str)

{

var i;

 for (i=0;i<str.length;i++)

{

  if (str.charAt(i)!=' ') return false;

}

 return true;

}

/* 检测字符串是否全为数字 */

function isnumber(str)

{

var number_chars = "1234567890";

var i;

for (i=0;i<str.length;i++)

{

if (number_chars.indexOf(str.charAt(i))==-1) return false;

}

return true;

}

/* 检测指定文本框输入是否合法 */

function verifyInput(input)

{

var image;

var i;

var error = false;

/* 长度校验 */

if (strlen(input.value)>parseInt(input.maxsize))

{

alert(input.chname+"超出最大长度"+input.maxsize);

error = true;

}

else

/* 非空校验 */

if (input.nullable=="no"&&isnull(input.value))

{

alert(input.chname+"不能为空");

error = true;

}

else

{

/* 数据类型校验 */

switch(input.datatype)

{

case "number": if (isnumber(input.value)==false)

{

alert(input.chname+"值应该全为数字");

error = true;

}

break;

/* 在这里可以添加多个自定义数据类型的校验判断 */

/*  case datatype1: ... ; break;        */

/*  case datatype2: ... ; break;        */

/*  ....................................*/

default : break;

}

}

/* 根据有无错误设置或取消警示标志 */

if (error)

{

image = document.getElementById("img_"+input.name);

image.src="img/warning.gif";

return false;

}

else

{

image = document.getElementById("img_"+input.name);

image.src="img/space.gif";

return true;

}

}

/* 检测指定FORM表单所有应被检测的元素

(那些具有自定义属性的元素)是否合法,此函数用于表单的onsubmit事件 */

function verifyAll(myform)

{

var i;

for (i=0;i<myform.elements.length;i++)

{

 /* 非自定义属性的元素不予理睬 */

if (myform.elements[i].chname+""=="undefined") continue;

/* 校验当前元素 */

if (verifyInput(myform.elements[i])==false)

{

myform.elements[i].focus();

return false;

}

}

return true;

}



univerify.js中,verifyAll用来校验指定表单的数据,它是逐个提取表单中的元素的,不用特别指定表单元素的名字,所以具有通用性。verifyInput是用来实际执行数据校验的函数,如果有新的数据类型datatype需要检测,用户可在此函数中添加,可扩充性好。 

下面是浏览univerify_test.html网页的画面: 



使用基于自定义属性的客户端统一检测方法,需要做的工作很简单: 

1、在网页文件中嵌入统一检测用Javascript函数库:<script language="javascript" src="univerify.js"></script> 

2、对所用表单添加onsubmit事件处理程序:οnsubmit="return verifyAll(this);"。其中的this指定为当前表单对象,勿需提供表单具体名字,极具通用性。 

3、对每个需要检测的文本框添加chname,maxsize,nullabledatatype四个自定义属性。如果想在文本框失去焦点时对数据进行一下校验,请添加事件处理程序:onBlur="verifyInput(this);"。 

怎么样?使用基于自定义属性的客户端统一检测方法后,不用再为每个表单写类似的检测代码了吧,统一检测足够了。 

小结:自定义属性是非常有用的属性,基于自定义属性的客户端数据统一检测方法,在B/S开发中极其有用,使用方便,可扩充性强。相信读者经过实践,自能体会到个中妙处。

0015获取地址内输入的参数

在调用网页的时候地址写入:http://localhost:8080/jsp1.jsp?st=d&xzy=cctv,则点击按钮会显示cctv.

<script>

// 从url 字符串中提取变量的值

function GetQueryValue(sorStr,panStr)

{

var vStr="";

if (sorStr==null || sorStr=="" || panStr==null || panStr=="") return vStr;

sorStr = sorStr.toLowerCase();

panStr += "=";

var itmp=sorStr.indexOf(panStr);

if (itmp<0){return vStr;}

sorStr = sorStr.substr(itmp + panStr.length);

itmp=sorStr.indexOf("&");

if (itmp<0)

{

return sorStr;

}

else

    {

sorStr=sorStr.substr(0,itmp);

return sorStr;

}

}

function getcookieval(offset)

{

var endstr = document.cookie.indexOf(';',offset);

if (endstr == -1) endstr = document.cookie.length;

return unescape (document.cookie.substring(offset,endstr));

}

//从cookcie 中获得

function getcookie(name)

{

var arg = name + '=';

var alen = arg.length;

var clen = document.cookie.length;

var j = 0;

while (j< clen)

{

var k = j + alen;

if(document.cookie.substring(j,k) == arg) return getcookieval(k);

j = document.cookie.indexOf('',j)+1;

if (j ==0 ) break;

}

return null;

}

</script>

<html>

<head>

<title>

jsp2

</title>

</head>

<body bgcolor="#ffffff">

<input name="" type="button" value="显示" onClick="alert(GetQueryValue(document.location.search,'xzy'))">

<h1>

你好中央电视台a

</h1>

</body>

</html>

002简单的文字输出

在html中直接输入下面的代码,就可以把文字输出来

  <script language="LiveScript">

    document.write("<font color='red'>JavaPrint</font>")

  </script>

还可以循环,显示10行红色的文字

<html>

<head>

</head>

<body>

<script>

for(a=0;a<10;a++)

document.write("<font color='red'>JavaPrint</font><br>")

</script>

</body>

</html>

这可以生成动态的Html代码,用这种方法可以动态地创建Html元素,如层的动态创建用的就是这种方法。

003第一个函数

先显示一个提示框,再显示10行文字

<html>

<head>

<script>

function pushbutton(str) 

{

alert(str);

}

</script>

</head>

<body>

<script>

pushbutton("我们都是大好人");

for(a=0;a<10;a++)

document.write("<font color='red'>JavaPrint</font><br>")

</script>

</body>

</html>

003_01日期判断函数

if(isNaN(Date.parse(document.forms[0].startdatetime.value)))

{

document.forms[0].startdatetime.value=Date.parse(document.forms[0].startdatetime.value);

alert("请正确输入会议开始时间.");

return;

}

004点击网页上的按钮后执行指定的函数

<html>

<head>

<script>

function pushbutton(str) 

{

alert(str);

}

</script>

</head>

<body>

<p><input type="button" value="按钮" name="B3" onclick=pushbutton("你好")></p>

</body>

</html>

005丢失焦点时引发事件,显示本文本框的文字

<html>

<head>

<script>

function Message(str) 

{

alert(str);

}

</script>

</head>

<body>

<p><input type="text" onblur=Message(this.value)  name="T1" size="20" ID="Text1"></p>

</body>

</html>

this.value是引发事件的实体的值,在按钮中也可以这么用.

直接写成 <p><input type="text" οnblur=alert(this.value)  name="T1" size="20" ID="Text1"></p>

也可以,即在html语言内也可以直接写JavaScript代码。

006自动获取最后更新日期

用以下的代码可以自动获取本网页的最后更新日期.

<html>

<head>

</head>

<body>

<script>

document.writeln(document.lastModified);

</script>

</body>

</html>

007日期的显示

<html>

<head>

</head>

<body>

<script>

var today=new Date();

var s=new String();

//  02/20/2003 16:07:16

s=document.lastModified;

//最后更新日期:02/20/2003 16:17:22<BR>

document.writeln("最后更新日期:"+s+"<br>");

//最后更新日期:20030220

document.writeln("最后更新日期:"+s.substring(6,10)+""+s.substring(0,2)+""+s.substring(3,5)+"");

document.writeln("<br>");

s="今天是:"+today.getYear()+""+(today.getMonth()+1)+""+today.getDate()+"";

//今天是:2003220 

document.writeln(s);

</script>

</body>

</html>

008鼠标移过超链接时执行的操作

<A onmouseover="window.status='Just another stupid link...'; return true" 

href="00Readme.htm" >连结</A>

009产生随机数

<script>

var i;

var today=new Date();

i=Math.random();// Math.abs(Math.sin(today.getTime()));

document.write("This is a random number:"+i);

</script>

010打开新窗体

<html>

<head>

<script>

function NewWindow()

{

   //msg=open("","DisplayWindow","toolbar=no,directories=no,menubar=no");

   msg=open("","xzy");

   msg.document.write("<HEAD><TITLE>哈罗!</TITLE></HEAD>");

   msg.document.write("<CENTER><H1>酷毙了!</H1><h2>这是<B>JavaScript</B>所开的视窗!</h2></CENTER>");

}

</script>

</head>

<body>

<input type="button" value="按钮" name="B3" onclick=NewWindow() ID="Button1">

</body>

</html>

window.open("./GoodType.jsp?backid="+nn,null,"height=405,width=620,status=no,scrollbars=yes,toolbar=no,menubar=no,location=no")

利用open可以打开一个新窗体

语法: oNewDoc = open(sUrl [, sName] [, sFeatures] [, bReplace])

sUrl

显示在新窗体地址栏内,如果为空则显示为about:blank

若填写 x.htm 则显示 G:\Xzy\JavaScript\Test\x.htm

若这个sUrl是一个存在的文件则显示这个网页

sName

新打开网页的名字,若有名字,则打开以后再重新打开时会在原先打开的网页上再次打开,不会开辟新窗体.

若为空,则每次都新开一个窗体

sFeatures

窗体外观控制:

channelmode=no/yes yes时显示一个全屏的窗体

directories=yes/no no时,显示的窗体没有工具条,不能调整大小,只能关闭

fullscreen=no/yes yes时,显示一个真正的全屏界面,没有任何操作按钮,只能用alt+f4来关闭窗体,

height=400,width=400,left=200,top=50 :位置大小调整

menubar=yes/no 是否显示菜单条

resizable=no/yes 是否可以调整窗体的大小

scrollbars=yes/no 是否显示滚动条

status=no/yes 是否显示状态条

titlebar=yes/no 是否显示标题栏

以下是MSDN的帮助

Syntax

oNewDoc = document.open(sUrl [, sName] [, sFeatures] [, bReplace])

Parameters

sUrl

Required. When opening a new document, sUrl is a String that specifies a Multipurpose Internet Mail Extensions (MIME) type for the document. When opening a new window, sUrl is a String that specifies the URL to render in the new window. If a sUrl is not specified, a new window with about:blank is displayed. 

text/html

Default. Currently the only MIME type supported for this method.

sName

Optional. When opening up a new document, specifying the String replace for sName designates that the new document is to replace the current document in the history list. If the value replace is not specified when opening up a document, a new entry will simply be added to the history list. When opening a window, this is a String that specifies the name of the window. The value of this parameter may be specified as the value of the TARGET attribute for a form or a element. This value will then will define this new window as the place to load a document. 

replace

This value is only used for opening up a new document and specifies that the new document is to replace the current entry in the history list. 

_blank

When opening a window, the sUrl is loaded into a new, unnamed window.

_parent

When opening a new window, the sUrl is loaded into the current frame's parent. If the frame has no parent, this value acts as the value _self. 

_search

Available in Internet Explorer 5 and later. When opening a window, the sUrl is opened in the browser's search pane. 

_self

When opening a window, the current document is replaced with the specified sUrl .

_top

sUrl replaces any framesets that may be loaded. If there are no framesets defined, this value acts as the value _self.

_media  

Available in Internet Explorer 6 and later. The sUrl is loaded in the Media Bar. 

sFeatures

Optional. This String is only used when opening a new window and specifies the settings of the window's display features. This parameter is a list of items separated by commas. Each item consists of an option and a value, separated by an equals sign (for example, "fullscreen=yes, toolbar=yes"). The following features are supported. 

channelmode = { yes | no | 1 | 0 }

Specifies whether to display the window in theater mode and show the channel band. The default is no.

directories = { yes | no | 1 | 0 }

Specifies whether to add directory buttons. The default is yes.

fullscreen = { yes | no | 1 | 0 }

Specifies whether to display the browser in full-screen mode. The default is no. Use full-screen mode carefully. Because this mode hides the browser's title bar and menus, you should always provide a button or other visual clue to help the user close the window. ALT+F4 closes the new window.

height = number

Specifies the height of the window, in pixels. The minimum value is 100.

left = number

Specifies the left position, in pixels. This value is relative to the upper-left corner of the screen.

location = { yes | no | 1 | 0 }

Specifies whether to display the input field for entering URLs directly into the browser. The default is yes.

menubar = { yes | no | 1 | 0 }

Specifies whether to display the menu bar. The default is yes.

resizable = { yes | no | 1 | 0 }

Specifies whether to display resize handles at the corners of the window. The default is yes.

scrollbars = { yes | no | 1 | 0 }

Specifies whether to display horizontal and vertical scroll bars. The default is yes.

status = { yes | no | 1 | 0 }

Specifies whether to add a status bar at the bottom of the window. The default is yes.

titlebar = { yes | no | 1 | 0 }

Specifies whether to display a title bar for the window. This parameter is ignored unless the calling application is an HTML Application or a trusted dialog box. The default is yes.

toolbar = { yes | no | 1 | 0 }

Specifies whether to display the browser toolbar, making buttons such as Back, Forward, and Stop available. The default is yes.

top = number

Specifies the top position, in pixels. This value is relative to the upper-left corner of the screen.

width = number

Sets the width of the window, in pixels. The minimum value is 100.

bReplace

Optional. When the sUrl is loaded into the same window, this Boolean parameter specifies whether the sUrl creates a new entry or replaces the current entry in the window's history list. 

true

sUrl replaces the current document in the history list

false

sUrl creates a new entry in the history list. 

Return Value

Returns a reference to the new document or window object. Use this reference to access properties and methods of the new document or window.

Window.open(“”,””,”scrollbars=yes,status=yes,toolbar=no,menu=no,resizable=1”)

010.1打开一个模式窗体

<script>

    var arr = showModalDialog("index.jsp", "", "dialogWidth:18.5em; dialogHeight:11.5em; status:0");

    alert('cctv');

</script>

showModalDialog是一个模式对话框,显示后下面的窗体便不能操作了,除非将模式窗体关闭,相当于vb中的from1.show 1

showModelessDialog下面的窗体还可以操作,但下面的窗体无法覆盖上面的窗体,上面的总是在上面,相当于vb中的 form1.show ,me

status:0表示没有底边的状态条

help: no表示没有窗体右上角的问号按钮

  dialogWidth: 对话框宽度。

   dialogLeft: 距离桌面左的距离。

   dialogTop: 离桌面上的距离。

   center: {yes | no | 1 | 0 }:窗口是否居中,默认yes,但仍可以指定高度和宽度。

   help: {yes | no | 1 | 0 }:是否显示帮助按钮,默认yes。

   resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认no。

   status: {yes | no | 1 | 0 } [IE5+]:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。

  scroll:{ yes | no | 1 | 0 | on | off }:指明对话框是否显示滚动条。默认为yes。

  还有几个属性是用在HTA中的,在一般的网页中一般不使用。

  dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no。

  edge:{ sunken | raised }:指明对话框的边框样式。默认为raised。

  unadorned:{ yes | no | 1 | 0 | on | off }:默认为no。

先打开一个新网页index.jsp,关闭后显示msgbox的内容。

帮助说明,里面有更多的东西,还可以传递参数

Javascript有许多内建的方法来产生对话框,如:window.alert(), window.confirm(),window.prompt().等。 然而IE提供更多的方法支持对话框。如: 

  showModalDialog() (IE 4+ 支持)
  showModelessDialog() (IE 5+ 支持)


 window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框,由于是对话框,因此它并没有一般用window.open()打开的窗口的所有属性。
 window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。

 当我们用showModelessDialog()打开窗口时,不必用window.close()去关闭它,当以非模态方式[IE5]打开时, 打开对话框的窗口仍可以进行其他的操作,即对话框不总是最上面的焦点,当打开它的窗口URL改变时,它自动关闭。而模态[IE4]方式的对话框始终有焦点(焦点不可移走,直到它关闭)。模态对话框和打开它的窗口相联系,因此我们打开另外的窗口时,他们的链接关系依然保存,并且隐藏在活动窗口的下面。

使用方法如下:
 vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])
 vReturnValue = window.showModelessDialog(sURL [, vArguments] [, sFeatures])
参数说明:
 sURL
 必选参数,类型:字符串。用来指定对话框要显示的文档的URL
 vArguments
 可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
 sFeatures
 可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。
  dialogHeight 对话框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。
 dialogWidth: 对话框宽度。
 dialogLeft: 距离桌面左的距离。
 dialogTop: 离桌面上的距离。
 center: {yes | no | 1 | 0 }:窗口是否居中,默认yes,但仍可以指定高度和宽度。
 help: {yes | no | 1 | 0 }:是否显示帮助按钮,默认yes
 resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认no
 status: {yes | no | 1 | 0 } IE5+]:是否显示状态栏。默认为yes[ Modeless]no[Modal]
  scroll:{ yes | no | 1 | 0 | on | off }:指明对话框是否显示滚动条。默认为yes

  还有几个属性是用在HTA中的,在一般的网页中一般不使用。
  dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no
  edge:{ sunken | raised }:指明对话框的边框样式。默认为raised
  unadorned:{ yes | no | 1 | 0 | on | off }:默认为no

 传入参数:
 要想对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字符串类型,最大为4096个字符。也可以传递对象,例如

 

 

 test1.htm
 ====================
 <script>
  var mxh1 = new Array("mxh","net_lover","孟子E")
  var mxh2 = window.open("about:blank","window_mxh")
  // 向对话框传递数组
  window.showModalDialog("test2.htm",mxh1)
  // 向对话框传递window对象
  window.showModalDialog("test3.htm",mxh2)
 </script>

 test2.htm
 ====================
 <script>
  var a = window.dialogArguments
  alert("您传递的参数为:" + a)
 </script>

 test3.htm
 ====================
 <script>
  var a = window.dialogArguments
  alert("您传递的参数为window对象,名称:" + a.name)
 </script>

 可以通过window.returnValue向打开对话框的窗口返回信息,当然也可以是对象。例如:

 test4.htm
 ===================
 <script>
  var a = window.showModalDialog("test5.htm")
  for(i=0;i<a.length;i++) alert(a[i])
 </script>

 test5.htm
 ===================
 <script>
 function sendTo()
 {
  var a=new Array("a","b")
  window.returnValue = a
  window.close()
 }
 </script>
 <body>

网页间数据的传递

可以向用showModalDialogshowModelessDialog打开的窗体传递参数,参数可以是字符串,也可以是对象,如数组或窗体对象

例子:test1.htm打开test2.htm,并向test2.htm传递一个数组对象作为参数

test1.htm

<script>

  var xzy = new Array(3);

  xzy[0]="孙悟空";

  xzy[1]="猪八戒";

  xzy[2]="唐僧";

  // 向对话框传递数组

  window.showModelessDialog("test2.htm",xzy)

 </script>

test2.htm

<script>

  var a = window.dialogArguments//读出传递过来的参数

  alert("您传递的参数为:" + a.join("[和]"));

</script>

下面是传递document对象的例子

test1.htm

<script>

  function t()

  {

   alert('被调用了');

  }

 </script>

 <input type="text"  name="T1" size="20" ID="Text1">

 <INPUT οnclick="window.showModelessDialog('test2.htm',document);" type=button value="打开另外一个网页" name=button1 size=5>

test2.htm

<script>

  var lastwindow = window.dialogArguments

 </script>

 <INPUT οnclick="lastwindow.all.T1.value=Math.random();" type=button value="设置上一个网页的值" name=button1 size=5>

下面是个传递窗体对象的代码

<script>

  var mxh2 = window.open("about:blank","window_mxh")

  // 向对话框传递window对象

  window.showModalDialog("test3.htm",mxh2)

 </script>

011在框架中的子网页调用其它子网页内的函数

上面网页中使用了框架,点击下边超链接时上边的网页显示一个随机数,点击按钮时,调用上边网页内的一个函数,onclick="parent.xzy1.Print('这是由按钮产生的文字')",,上边网页将传入的参数显示出来.

框架

<HTML>

<HEAD>

<title>Frames</title>

</HEAD>

    <FRAMESET ROWS="50%,50%"> 

    <FRAME SRC="a1.html" name="xzy1"> 

    <FRAME SRC="a2.html" name="xzy2"> 

  </FRAMESET> 

</HTML>

上部网页

<html>

<head>

<script>

function Print(Str)

{

alert(Str);

}

</script>

</head>

<body>

<script>

document.writeln(Math.random());

</script>

</body>

</html>

下部网页

<html>

<head>

</head>

<body>

<A href="a1.html" target="xzy1">产生新随机数</A>

<input type="button" value="按钮" name="B3" onclick="parent.xzy1.Print('这是由按钮产生的文字')">

</body>

</html>

当超链接使用<A href="a1.html" TARGET="_top">产生新随机数</A>

时,目标网页可以充满整个frame.

012与原启动窗口互动:

window.opener.document.form1.text1.value=””;

013使用定时器

JavaScript中的定时器是利用一个函数,setTimeout(调用函数,延时),下面的程序会在显示网页的状态栏中不停地显示一个随机数

<html>

<head>

<script>

function scroll()

{

window.status=Math.random();

setTimeout("scroll()",300);//300ms

}

</script>

</head>

<body onLoad="scroll()">

</body>

</html>

013读取和设置网页上元素的值

例子1,用名称访问

这里以一个网页的加法器来示范,如何读取和设置,Text框的文字.

<html>

<head>

<script>

function Make()

{

var a1;

var a2

var a3;

a1=parseInt(document.first.text1.value);//first就是Form的名称

a2=parseInt(document.first.text2.value);

a3=a1+a2;

document.first.text3.value=a3;

}

</script>

</head>

<body>

<FORM name=first>

<INPUT name=text1 value="0" size=5>+

<INPUT name=text2 value="0" size=5>

<INPUT onclick="Make()" type=button value="输入测试" name=button1 size=5> 

<INPUT name=text3 size=5>

</FORM>

</body>

</html>

(2)例子2,用数组访问

本例的功能:2个text框的内容保持一致,当一个改变时,另外一个也相应的改变.

窗体和上面的元素都是可以通过数组来访问的.

<Html>

<head>

</head>

<body>

<form Name="Form1" >

<!--Form2的第一个元素的值和本元素的值相同  -->

1:<input type=text onChange="document.Form2.elements[0].value=this.value;" ID="Text1" NAME="Text1">

</form>

<!--网页上第一个窗体的第一个元素的值和本元素的值相同-->

<form NAME="Form2">

2:<input type=text onChange="document.forms[0].elements[0].value=this.value;" ID="Text2" NAME="Text2">

</form>

</body>

</html>

(3)实现邮箱中全选的功能(遍历窗体对象)

本例实现的功能,当点中全选按钮时,所有的信件全被选中,并显示删除图片,且图片的鼠标是手(hand)形状的

初始    点击全选时

完整的代码

<html>

<head>

<script>

function t()

{

var i;

for(i=0;i<document.forms[0].elements.length;i++)

{

if(document.forms[0].elements[i].name.substring(0,1)=="C")

document.forms[0].elements[i].checked=document.forms[0].All.checked;

}

/*

也可以这么写,效果是一样的,只不过将所有的元素都放置在了数组elems,代码可以短些

var elems=window.document.forms[0].elements;

for (var i=0;i<elems.length;i++)

{

if(elems[i].name.substring(0,1)=="C")

{

elems[i].checked=document.forms[0].All.checked;

}

}

*/

if(document.forms[0].All.checked)

document.forms[0].PicButton.style.display="inline"//显示图片

else

document.forms[0].PicButton.style.display="none"//隐藏图片

}

</script>

</head>

<body bgcolor="pink">

<form name="f1">

<p><input type="checkbox" name="C1" value="ON">信件1</p>

<P><input type="checkbox" name="C2" value="ON">信件2</P>

<P><input type="checkbox" name="C3" value="ON">信件3</P>

<p><input type="checkbox" name="C4" value="ON">信件4</p>

<p><input type="checkbox" name="All" value="ON" onclick="t()">全选</p>

<p>

<IMG 

src="人事档案.files/rb_erase_up.gif" border=0 

name="PicButton" width="60" height="18"

style="DISPLAY: none; CURSOR: hand" onclick=DelCode(); 

>

</p>

</form>

</body>

</html>

014移动层

完整代码

层的声明:

下面是一个简单的层,上面显示着2行文字

<div id="Layer1" style="position:absolute; left:217px; top:63px; width:60px; height:72px; background-color: #FFFF99;z-index:1"> 

  <p>abc</p>

  <p>cctv</p>

</div>

移动层的代码

<script>

function move(x)

{

if(x>100)x=0;

x=x+1;

Layer1.style.posTop=x;

Layer1.style.posLeft=x;

window.status=x;//Math.random();

setTimeout("move("+x+")",100);

}

</script>

015层随鼠标移动

在网页上移动鼠标时,鼠标移动到那里,层便跟随到那里。

<html>

<head>

<SCRIPT language="javascript">

<!--

var x,y; //声明存放当前鼠标位置坐标的变量

function move() 

//移动图层的函数

//获取当前鼠标位置的X坐标

x=document.body.scrollLeft+event.clientX;

//获取当前鼠标位置的Y坐标 

y=document.body.scrollTop+event.clientY; 

//设置图层位置的X坐标

div1.style.posLeft=x+20

// 设置图层位置的Y坐标

div1.style.posTop=y; 

window.status="x:"+x+"  y:"+y;

-->

</SCRIPT>

</head>

<body onmousemove="move();">

<div id="div1" style="position:absolute; left:250px; top:118px; background-color: #FFFF99;width:60px; height:37px; z-index:"50">

这是测试的层

</div>

</body>

</html>

016使用宏替换eval

设图层上有一个层,名字叫Layer1,可以用下面的代码利用字符串型的层名字来指向实际的层.

var l;

var s;

s="Layer1";

l=eval(s);

l.style.posTop=200;

var l;

var i;

i=1;

l=eval("Layer"+i);

l.style.posTop=200;

上面的代码都会使层Layer1移动位置.

017移动的正弦波(层)

需要注意的是:document.write只能第一次有效,再次写的write的源代码就变了,所以程序中第一次创建好层后,再次移动时采用的是改变已有层的位置.

解释:层一经创建,便存在 于网页中,再创建会重复的.

代码

thisdiv=eval("Layer"+(x)+".style");

thisdiv.posTop=y;

thisdiv.posLeft=x;

是将字符串的变量转为实际的变量,使用的函数是eval,好像fox的宏一样

thisdiv.posTop等价于Layeri.style.posTop

018显示和隐藏层

设层的名字是Layer1

显示: Layer1.style.visibility="visible";

隐藏: Layer1.style.visibility="hidden";

利用显示和隐藏层可以制作菜单

019一个简单菜单的例子

020、一个字符串编码再解码的过程

function a()

{

  var str = "你好B.,#cc sldfk";

   var s2=EnCode(str);

   alert(UnCode(s2));

}

//str转换为编码用x分割如:20320x65x66x67x

function EnCode(str)

{

  var s;

  var n;

  s="";

  for(n=0;n<str.length;n++)

  s =s +  str.charCodeAt(n) + "x";

  return s;

}

//EnCode转换出的编码串再转为字符串

function UnCode(str)

{

var i;

var scode;

var rs;

if(str=="") return "";

i=str.indexOf("x",0);

rs=""

while(i>0)

{

  scode=str.substring(0,i)

  rs=rs + String.fromCharCode(scode);

  str=str.substring(i+1);

  i=str.indexOf("x",0);

}

return rs;

}

020span,div,动态html

  点击添加后文字显示到  

<script>

function Insert()

{

var s;

s=document.all.ShowArea.innerHTML;

document.all.ShowArea.innerHTML=s+'<br>'+document.all.text1.value;

 //innerHTML可以写入html控制,如果用innerTexthtml控制也会被显示出来,被作为普通的字符处理.

document.all.text1.value='';

document.all.text1.focus();

}

</script>

<INPUT name=text1 value="" size=5>

<input name="" type="button" value="添加" onClick="Insert()">

<span id='ShowArea'></span>

<!--div也可以

<div id='ShowArea'></div>

-->

<br>

<hr>

邢志云的测试

这是非常好的性能,可以在网页上显示出任意的动态代码.

Span和div都可以作为嵌入式代码的载体,如可以在span的首尾写上表格的控制,然后在span内填写表体的代码.

<table border="1" width="100%" id="table1">

<div id='ShowArea'>

<tr>

<td> </td>

<td> </td>

</tr>

</div>

</table>

021动态生成表格

<script>

function Insert()

{

 var row;

 var cell;

 var tbody = 表格.childNodes[0];

 表格.appendChild( tbody );

 for (var i=0; i<10; i++)//10

 {

  row = document.createElement( "TR" );

  tbody.appendChild( row );

  for (var j=0; j<5; j++)//5

  {

    cell = document.createElement( "TD" );

    row.appendChild( cell );

    cell.innerText = "Row " + i + ", Cell " + j;

  }

 }

}

</script>

<input name="" type="button" value="添加" onClick="Insert()">

<TABLE ID="表格" BORDER="1" ></TABLE>

删除表格节点

表格.removeNode(true);

022使用createElement来动态创建网页元素,按钮文本框都可以

基本

<script>

function Insert()

{

  node = document.createElement( "SPAN" );//创建一个span元素

  node.innerText = " 使用 innerText 属性 <br>";//这里的<br>不会表示为回车,因为用的是innerText所以<br>会被当作普通的文本显示出来.

  divUpdate.appendChild( node );

}

</script>

<input name="" type="button" value="添加" onClick="Insert()">

<br>

<DIV id=divUpdate></DIV>

<hr>

带事件的

<script>

function Insert()

{

  node = document.createElement( "input" );//创建一个span元素

  node.type="text";

  node.id="text1";

  node.fi="dd"; 

  node.οnclick=function(){alert('dd');}

  divquery.appendChild( node );

}

</script>

<html>

<head>

<title>

卡片信息维护

</title>

</head>

<LINK REL=stylesheet HREF="xzyimage\global.css" TYPE="text/css">

<BODY leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<!--img border="0" src="xzyimage\ADD.GIF" width="32" height="32"-->

<div><!--按钮区域-->

<input type="button" value="查询" name="B1" οnclick="Insert();">

<input type="button" value="增加" name="B2" οnclick="alert(document.all.text1.value);">

<input type="button" value="修改" name="B3">

<input type="button" value="删除" name="B4">

</div>

<div id=divquery><!--查询控制区域-->

</div>

023可以添加删除内容网页

<script>

var IDNumber=0;

function Insert()

{

  node = document.createElement( "SPAN" );//创建一个span元素

  node.id=IDNumber;

  click="<a href=\"javascript:DeleteNode(divUpdate,"+IDNumber+");\">删除</a>";

  row="<table border='1'><tr><td>"+IDNumber+"</td><td>填写内容</td><td>"+click+"</td></tr></table>";

  //node.innerHTML =IDNumber + "使用 innerHTML 属性:<a href=\"javascript:DeleteNode(divUpdate,"+IDNumber+");\">删除</a><br>";

  node.innerHTML=row;

  node.邢志云="XZY"+IDNumber;//可以给对象定义一个自己的属性

  divUpdate.appendChild( node );

  IDNumber++;

}

//可以删除Div或span上的node

function DeleteNode( P, CID) 

{

    var attas = P.childNodes;

    var i;

    for (i=0; i<attas.length; i++ ) {

        var oChild = P.children(i);

//alert(oChild.innerHTML);

//alert(oChild.邢志云);//显示自定义的属性

        if (oChild.id == CID) {

            P.removeChild(oChild);

        }

    }

}

</script>

<input name="" type="button" value="添加" onClick="Insert()">

<br>

<DIV id=divUpdate></DIV>

<hr>

024给网页元素添加自定义属性

这里的代码给一个文本框添加了一个属性,字段名

<input name="" type="button" value="添加" onClick="alert(text1.FieldName);">

<br>

<INPUT name=text1 value="" size=5 FieldName="姓名">

<hr>

可以给各种元素添加自定义的属性,如下给div添加

<input name="" type="button" value="添加" onClick="alert(divUpdate.FieldName);">

<br>

<DIV id=divUpdate>这是层</DIV>

<script>

divUpdate.FieldName="姓名";

</script>

<hr>

025利用Microsoft.XMLDOM控件,不刷新网页直接从服务器上读取xml文件数据

说明

Microsoft.XMLDOM是IE5.0以上浏览器自带的。

从客户端网页上利用控件Microsoft.XMLDOM,可以读取服务器上xml格式的文件,要求客户端的IE浏览器上设置,win2000中默认是开启的,win2003中默认是关闭的.csdn上的论坛列表就是用这种方式实现的,如果禁用了ActiveX,则进入论坛的时候会报错.

这个控件很有用,可以实现不刷新网页而直接加载信息,有时我们在网页上选取相关下拉列表时,可以不刷新而动态改变下拉列表的内容.

简单例子

下面的例子,从硬盘或Internet上读取一个xml文件,并把这个文件完整的显示在客户端

<html>

<script>

function Show()

{

var Xsldom;

Xsldom=new ActiveXObject("Microsoft.XMLDOM");

Xsldom.async=false;

Xsldom.load("http://fason.nease.net/samples/xmltree/xtree/files/test2.xml");

//loadXML可以加载字符串,要求是xml格式的

//Xsldom.loadXML(text);

alert(Xsldom.xml);

}

</script>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>新建网页 2</title>

</head>

<input name="" type="button" value="显示" onClick="Show()">

<body οnlοad="alert('Start');">

</body>

</html>

也可以读取本机的xml文件,如把如下的文字,保存到一个xml文件中

<?xml version="1.0" encoding="gb2312"?>

<TreeNode id='4_2_1'>

<TreeNode text="个人基本信息登记" message="这个模块还没有编写完毕"  />

<TreeNode text="单位基本信息登记" />

<TreeNode text="个人求职" />

<TreeNode text="单位求人" />

</TreeNode>

在上面的load中写上这个文件的路径即可,如下

Xsldom.load("E:\\Temp\\xtree\\xtree\\files\\exe.xml");

这个文件必须是xml格式的,下面好像是最简单的了

<?xml version="1.0" encoding="gb2312"?>

<xzy>

中国人民万岁

全世界大团结万岁

</xzy>

创建XML串

利用XMLDOM可以在IE上生成XML格式的信息串.

xml中若使用了特殊字符需要替换,如用<需要被替换为<

<

小于 

>

>

大于 

&

&

&符号

'

'

省略号

"

"

引号

如果数据中有大量的特殊字符,如<,则可以用<![CDATA…]]>来直接显示原始的内容.

<?xml version="1.0" encoding="gb2312"?>

<TreeNode>

    <Node1>

<![CDATA[

ifa>8 大于 then 

<99>

        ]]>

    </Node1>

    <Node2>数据2</Node2>

</TreeNode> 

一个xml文件是有根、节点、节点的属性、值等元素构成的,其中,节点是有层次关系的,一个节点可以被另外的节点嵌套,并且可以嵌套许多层。

利用XMLDOM可以将页面上的信息生成为xml文件格式的字符串。

下面的代码可以产生以上格式的xml字符串:

<html>

<script>

function Show()

{

var objDom

var objRoot

var objNode

var objNodeValue

var objattID

var objattTabOrder

var objPI

var x

//实例化Microsoft XMLDOM对象.

objDom = new ActiveXObject("Microsoft.XMLDOM");

objDom.async=false;

objDom.preserveWhiteSpace = true;

//'创建XML文档的根元素contact,并追加到XML文档中。

objRoot = objDom.createElement("通讯录");

objDom.appendChild(objRoot); //添加根节点

for(x=1;x<5;x++)//循环产生4个下面内容的节点

{

objNode = objDom.createElement("Node");//创建节点 Node

objattID = objDom.createAttribute("id"); //创建属性 id

objattID.text ="字段"+ x; //给属性id赋值

objNode.setAttributeNode(objattID);//把属性id加载到节点node中

objattTabOrder = objDom.createAttribute("taborder");//创建另外一个属性taborder

objattTabOrder.text = x;//给属性taborder赋值

objNode.setAttributeNode(objattTabOrder);//把属性taborder加载到节点node上

objNodeValue = objDom.createElement("Node_value");//创建另外一个节点Node_value

objNodeValue.text ="值"+ x;//给节点Node_value赋值

objNode.appendChild(objNodeValue);//把节点Node_value当作节点Node的子节点,这个操作可以一直进行下去,一个节点可以有许多子节点

objRoot.appendChild(objNode);//把节点Node作为根节点的一个子节点

}

//'创建xml声明

objPI = objDom.createProcessingInstruction("xml", "version='1.0' encoding='gb2312'");

//'把xml生命追加到xml文档

objDom.insertBefore(objPI, objDom.childNodes(0));

//'保存xml文件

//objDom.save strXMLFilePath & "\" & strFileName

alert(objDom.xml);

//document.write(objDom.xml);

//'释放所有对象所引用的值

objDom = null

objRoot = null

objNode = null

objNodeValue = null

objattID = null

objattTabOrder = null

objPI = null

}

</script>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>新建网页 2</title>

</head>

<input name="" type="button" value="显示" onClick="Show()">

<body οnlοad="Show();">

</body>

</html>

从XMLDOM中分离出XML数据

数据可以从xml中被分离出来,可以实现这样的效果,通过xmldom,将数据提交个一个后台网页,该网页接收到信息后,进行操作,然后将操作结果生成一个xml文件,再通过xmldom读取并分离出数据,显示在本地,这样就实现了不提交,也不刷新而实现了数据和服务器的交互.

<html>

<script>

function Show()

{

var Xsldom;

var text;

var Node;

text="<?xml version=\"1.0\" encoding=\"gb2312\"?>";

text=text+"<TreeNode>";

text=text+"<Node1>\n";

text=text+"<![CDATA[ <节点1数据if a>b then\n printf('完成'); ]]>\n";

text=text+"</Node1>";

text=text+"<Node2>节点2数据</Node2>";

text=text+"<Node3>节点3数据</Node3>";

text=text+"<Node4>节点4数据</Node4>";

text=text+"</TreeNode>";

Xsldom=new ActiveXObject("Microsoft.XMLDOM");

Xsldom.async=false;

Xsldom.loadXML(text);

Node=Xsldom.documentElement.childNodes;

if(true)

{

for(i=0;i<1;i++)

{

alert(Node.item(i).text);

}

}

//alert(Xsldom.xml);

document.write(Xsldom.xml);

}

</script>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>新建网页 2</title>

</head>

<input name="" type="button" value="显示" onClick="Show()">

<body οnlοad="Show();">

</body>

</html>

Node.item(0).childNodes.item(j).nodeName//得到节点名

Node.item(0).childNodes(0).nodeName//只有一条记录时得到节点名

LoadXml(“”)加载字符串。

026使用XML数据岛

显示数据到表格中

在HTML中可以将XML数据填写岛表格中

把一下2个文件放到同一个目录中,运行index.htm即可

文件:people.xml

<?姓名l version="1.0" encoding="gb2312"?>

<!-- Edited with 姓名L Spy v4.2 -->

<dataset>

<员工>

<姓名>周星驰</姓名>

<性别>男</性别>

<籍贯>上海</籍贯>

<出生日期>1965.10</出生日期>

</员工>

<员工>

<姓名>张卫健</姓名>

<性别>男</性别>

<籍贯>山东</籍贯>

<出生日期>1972.5</出生日期>

</员工>

<员工>

<姓名>Robot</姓名>

<性别>maile</性别>

<籍贯>USA</籍贯>

<出生日期>1948.6</出生日期>

</员工>

</dataset>

文件:index.htm

<html>

<body>

<xml

src="people.xml"

id="xmldso"

async="false">

</xml>

<table

datasrc="#xmldso"

width="100%"

border="1">

<thead>

<th>员工姓名</th>

<th>员工性别</th>

<th>员工籍贯</th>

<th>生日</th>

</thead>

<tr align="left">

<td><span datafld="姓名"></span></td>

<td><span datafld="性别"></span></td>

<td><span datafld="籍贯"></span></td>

<td><span datafld="出生日期"></span></td>

</tr>

</table>

</body>

</html>

显示效果

显示到span或div中,移动结果集指针

还是用刚才的people.xml,里面的span换成div也可以.

<html>

<script language="JavaScript">

 function movenext()

 {

  x=xmldso.recordset

  if (x.absoluteposition < x.recordcount)

  {

   x.movenext()

  }

 }

 function moveprevious()

 {

  x=xmldso.recordset

  if (x.absoluteposition > 1)

  {

   x.moveprevious()

  }

 }

</script>

<body>

<xml src="people.xml" id="xmldso" async="false"></xml>

<br />name:

<span datasrc="#xmldso" datafld="姓名"></span>

<br />gender:

<span datasrc="#xmldso" datafld="性别"></span>

<br />nation:

<span datasrc="#xmldso" datafld="籍贯"></span>

<p>

<input type="button" value="Previous"

οnclick="moveprevious()" />

<input type="button" value="Next"

οnclick="movenext()" />

</p>

</body>

</html>

数据随表格行刷新

点击表格的行,上部内容随之刷新

<html>

<head>

<script type="text/javascript">

function testclick(field)

{

var row=field.rowIndex

xmldso_list.recordset.absoluteposition=row

td_姓名.innerHTML=xmldso_list.recordset("姓名")

td_性别.innerHTML=xmldso_list.recordset("性别")

td_籍贯.innerHTML=xmldso_list.recordset("籍贯")

td_出生日期.innerHTML=xmldso_list.recordset("出生日期")

}

</script>

</head>

<body>

<xml id="xmldso_list" src="people.xml"></xml>

<table border="1" bgcolor="yellow">

<tr align="left"><th>姓名:  </th><td id="td_姓名"></td></tr>

<tr align="left"><th>性别: </th><td id="td_性别"></td></tr>

<tr align="left"><th>籍贯:   </th><td id="td_籍贯"></td></tr>

<tr align="left"><th>出生日期:</th><td id="td_出生日期"></td></tr>

</table>

<p><b>点击表格中的行:</b></p>

<table datasrc="#xmldso_list" border="1">

<thead>

<tr align="left">

<th>姓名</th>

<th>性别</th>

<th>籍贯</th>

<th>出生日期</th>

</tr>

</thead>

<tr align="left" οnclick="testclick(this);alert(this.rowIndex);">

<td><div datafld="姓名" /></td>

<td><div datafld="性别" /></td>

<td><div datafld="籍贯" /></td>

<td><div datafld="出生日期" /></td>

</tr>

</table>

</body>

</html>

027 XML的http请求

可以将网页的或xml的代码读回来.

<html>

<head>

<script type="text/javascript">

function getPage()

{

var objHTTP = new ActiveXObject("Microsoft.XMLHTTP")

objHTTP.Open('GET','http://www.w3schools.com/xml/tryit.asp?filename=httprequest_js',false)

objHTTP.Send()

document.all['A1'].innerText= objHTTP.status

document.all['A2'].innerText= objHTTP.statusText

document.all['A3'].innerText= objHTTP.responseText //网页的查看源代码内容

document.all['A4'].innerHTML= objHTTP.responseText //网页的HTML显示效果

}

</script>

</head>

<body οnlοad="getPage()">

<h2>Using the HttpRequest Object</h2>

<p>

<b>status:</b>

<span ID="A1"></span>

</p>

<p>

<b>status text:</b>

<span ID="A2"></span>

</p>

<p>

<b>response:</b>

<br><span ID="A3"></span>

</p>

<p>

<b>response:</b>

<br><span ID="A4"></span>

</p>

</body>

</html>

029判断一个字符串是否为纯中文

<script>

function bol_chinese(str)//如果str全部都是中文则返回true,否则返回false

{

var pattern = /[^\u4E00-\u9FA5]/;

if(pattern.test(str)) return false;

else return true;

}

</script>

<button οnclick="alert(bol_chinese('你好我们'));"></button>

030转为unicode编码(escape和unescape)

<script language=javascript>

function EscapeTest()

{

   var s;

   var s1;

   var s2;

   s="你好abc中国";

   s1=escape(s);

   alert(s1);

   s2=unescape(s1);

   alert(s2);

}

</script>

</HEAD>

<button οnclick="EscapeTest();"></button>

</HTML>

031样式表

样式表的操作元素

background: yellow;

背景色

background-image: url(http://news.sohu.com/nimages/news_logo_1.gif)

背景图片

background-repeat: no-repeat;
repeatrepeat-xrepeate-yno-repeat

背景是否重复

H4 { border-top-width: 2px; border-bottom-width: 5px; border-left-width: 1px; border-right-width: 1px }

边框:IE不支持

background-attachment: fixed;
scroll、fixed

作为body的背景时,不随滚动条移动

background-position: center bottom

背景的位置

color: green;

color:rgb(255,0,0)

文字颜色

font-family: 宋体;

font-weight: bold

粗体

font-size:12px

margin-top: 20px; margin-bottom: 5px; margin-left: 100px; margin-right: 55px

边距

A { position:absolute;left:100px;top:15px }

绝对定位

position: relative; left: 40px; top: 10px

相对定位

text-align: center

文字的对齐方式

text-indent: 1cm;

文字左边距,也可作为文字缩进的设置P { text-indent: 26px }

B { text-transform: uppercase }

以下为所有可用的参数: 

· uppercase 使所有字母大写显示, 

· lowercase使所有字母小写显示, 

· capitalize 使每个单词的第1个字母大写显示, 

· none 使所有继承的文字变形参数被忽略,文字将以正常形式显示。
例:
This sentence serves as an example. 

B { text-decoration: underline }

大部分的选项使得文字变得难以阅读: 

· underline 给文字下划线,

· overline给文字上划线, 

· line-through给文字划出删除线, 

· blink文字在闪烁,好心不起作用 

· none使得上述效果都不会发生。 

word-spacing:50px;letter-spacing:5px

文字间距和字符间距,每个汉字算一个字符,空格分开的算一个字.

line-height: 26px

行高

vertical-align: top

垂直对齐方式

· top将要素顶部同最高的母体要素对齐。 

· bottom将要素的底部同最低的母体要素对齐。  

· text-top将要素的顶部同母体要素文字的顶部对齐。 

· text-bottom将要素的底部同母体要素文字的底部对齐。 

· baseline将要素的基准线同母体要素的基准线对齐。 

· middle将要素的中点同母体要素的中点对齐。 

· sub将要素以下标的形式显示。 

· super将要素以 上标的形式显示。

visibility: hidden
visible使要素可以被看见 

hidden使要素被隐藏 

inherit指它将继承母体要素的可视性设置。

隐藏属性

基础

<HTML>

<HEAD>

<TITLE>我的第一个样式表</TITLE>

</HEAD>

<STYLE TYPE="text/css">

H1 { color: green; font-size: 37px; font-family: impact }

P  { text-indent: 1cm; background: yellow; font-family: 宋体;font-size:12px }

</STYLE>

<BODY>

<H1>在H1之间的文字</H1>

<P>^_^我们都是大坏蛋</p>

</BODY>

</HTML>

<STYLE TYPE="text/css">之间的是样式表定义.可以精确的控制文字大小,边距等.

归类

H1,P,BLOCKQUOTE { font-family: arial }

可以一次对多个tag定义样式表

使用外部样式表

把样式表存储在一个文件中,然后许多网页都可以使用这个样式表

<HTML>

<HEAD>

<TITLE>我的第一个样式表</TITLE>

</HEAD>

<BODY>

<H1>在H1之间的文字</H1>

<P>^_^我们都是大坏蛋</p>

</BODY>

<LINK REL=stylesheet HREF="mystyles.css" TYPE="text/css">

</HTML>

其中mystyles.css的内容是

H1 { color: green; font-size: 37px; font-family: impact }

P  { text-indent: 1cm; background: yellow; font-family: 宋体;font-size:12px }

同时使用外部样式表和本页样式表

可以同时引入多个外部样式表,还可以将外部样式表和本页样式表同时使用

<HTML>

<HEAD>

<TITLE>我的第一个样式表</TITLE>

</HEAD>

<LINK REL=stylesheet HREF="mystyles.css" TYPE="text/css">

<LINK REL=stylesheet HREF="mystyles2.css" TYPE="text/css">

<STYLE TYPE="text/css">

TEXTAREA  {background: yellow;color:red;}

</STYLE>

<BODY>

<H1>在H1之间的文字</H1>

<P>^_^我们都是大坏蛋</p>

<a>你好</a>

<textarea>文本框的内容</textarea>

</BODY>

</HTML>

样式表的分类

样式表中使用的标签必须是html中已经定义了的标签,如果要自定义样式,则需要在现有的标签上进行分类

<HTML>

<HEAD>

<TITLE>我的第一个样式表</TITLE>

</HEAD>

<STYLE TYPE="text/css">

a { color: #FF00FF }

a.xzy1 { color: red }

a.xzy2 { color: purple }

.通用分类 { color: gray } <!--如果没有标签而直接写分类,则该分类适用于所有的标签-->

</STYLE>

<BODY>

<a>A无分类</a><br/>

<a class=xzy1>A分类1</a><br/>

<a class=xzy2>A分类2</a>

<p class=通用分类>A分类3</p>

</BODY>

</HTML>

情景选择

<HTML>

<HEAD>

<TITLE>我的第一个样式表</TITLE>

</HEAD>

<STYLE TYPE="text/css">

P B { color: red }/*在p内的并且是b的才变成红色*/

</STYLE>

<BODY>

<p>

你好我们的<b>地球</b>

</p>

</BODY>

</HTML>

字体大小(em)

<HTML>

<HEAD>

<TITLE>我的第一个样式表</TITLE>

</HEAD>

<STYLE TYPE="text/css">

P { font-size: 20px }

B { font-size: 1.5em }/*母体字号的1.5倍,如果B用在P中则会是20px, B { font-size: 200% }也能实现翻倍的效果*/

</STYLE>

<BODY>

<p>

你好我们的<b>地球</b>

</p>

</BODY>

</HTML>

尺寸单位有许多

· in (英寸) 

· cm (厘米) 

· mm (毫米) 

· pc (打字机字型尺寸单位) 

· ex (x-height) 

· px

· point

边框的颜色实现彩色下划线

利用边框颜色可以实现彩色下划线

<HTML>

<HEAD>

<TITLE>我的第一个样式表</TITLE>

</HEAD>

<font style="border-style: solid; border-width: 2px; border-color: #FFFFFF #FFFFFF #FF0000 #FFFFFF;line-height: 26px" color="#000000" >

关于这次工程的报告,下次工程<br/>的计划

</font>

</BODY>

</HTML>

显示效果

border-style可以是以下:

solid、double、dotted、dashed、groove、ridge、inset、outset

文字的精确定位

<HTML>

<HEAD>

<TITLE>我的第一个样式表</TITLE>

<STYLE TYPE="text/css">

A { position:absolute;left:100px;top:15px }

</STYLE>

</HEAD>

<body>

<A>你好</A>

</BODY>

</HTML>

链接的颜色控制

CSS的行为

当鼠标移动到网页的文字上时,该文字变成蓝色,移除时该文字变成黑色.这个行为是在文件behave.htc中定义的.

将行为和网页分离.

将下面的2个文件放到同一个目录中.

文件:Index.htm

<html>

<head>

<style>

h1 {behavior:url(behave.htc)}

</style>

</head>

<body>

<h1>Move your Mouse over me</h1>

</body>

</html>

文件:behave.htc

<component>

<attach for="element" event="onmouseover" handler="hig_lite" />

<attach for="element" event="onmouseout" handler="low_lite" />

<script language="JavaScript">

   function hig_lite()

   {

   element.style.color=255

   }

   function low_lite()

   {

   element.style.color=0

   }

</script>

</component>

032列出对象的所有属性

在html中,对象的属性不易获得,如层的style可以写多少css属性控制,或document中有多少属性,可以用下面代码获得想要对象的所有属性

下面是:层的style属性中有多少子属性

<div id='xzy' style="background-color: #FFFF99" >获取对象的属性:</div>

<script>

var anObject=xzy.style;

var propertyInfo=""

var arr=new Array(1000)

i=0;

for(var propertyName in anObject)

{

  propertyInfo=propertyName +"="+anObject[propertyName];

  arr[i]=propertyInfo;

  i++;

}

arr.sort();

for(a=0;a<i;a++)

  document.write(arr[a]+"<br>");

</script>

033鼠标键盘事件:

只输入数字:

function JHshNumberText()

{

if ( !(((window.event.keyCode >= 48) && (window.event.keyCode <= 57)) || (window.event.keyCode == 13) || (window.event.keyCode == 46) || (window.event.keyCode == 45)))

{

window.event.keyCode = 0 ;

}

}

按键转向

function keydown()

{

e=window.event;

if(e.keyCode==13)

e.keyCode=9;

}

document.οnkeydοwn=keydown;

034对话框操作对象

window.dialogArgument.document;

035时间操作:

function  CheckDate(vNewValue)

{

//    Dim State As Long

var State;

//    Dim Count As Long

var Count;

//    Dim ForceExit As Long

var ForceExit;

//    Dim C As String * 1

var C;

//    Dim OnlyYM As Boolean '是否只有YearMonth,

var OnlyYm;

//    M_CheckThrough = False

var M_CheckThrough;

//    vNewValue = MyTrim(vNewValue)

vNewValue=MyTrim(vNewValue);

//    M_Source = vNewValue

var M_Source;    

//    M_Date = ""

M_Date="";

//    M_Year = ""

M_Year="";

//    M_Month = ""

M_Month="";

//    M_Day = ""

M_Day="";

//

//    M_Year = Mid(vNewValue, 1, 4)

M_Year=vNewValue.substring(0,4);

//    If Not (1900 <= MyVal(M_Year) And MyVal(M_Year) <= 2100) Then

//if (!("1900"<=M_Year && M_Year<="2100"))

// return "Error";

//        Call SetError

 //       Exit Property

 //   End If

//    vNewValue = Mid(vNewValue & "", 5)

vNewValue=vNewValue.substring(4);

//    State = 1

State=1;

//    C = ""

C="";

//    ForceExit = 0

ForceExit=0;

//    OnlyYM = False

OnlyYM=false;

 //   While State <> 8 And ForceExit < 88

while(State!=8 && ForceExit<88)

{

 //       ForceExit = ForceExit + 1

ForceExit = ForceExit + 1

 //       Select Case State

//alert(State);

switch(State)

{

 //           Case 1

case 1:

 //               Count = 1

Count=1;

 //               C = Mid(vNewValue, Count, 1)

C=vNewValue.substring(Count-1,Count);

 //               If "0" <= C And C <= "9" Then

  if("0"<=C && C<="9")

  State=3;

 //                   State = 3

 

  //              ElseIf C = "" Then

   else if(C=="")

 //                   State = 8

  State=8;

 //               Else

  else

 //                   State = 2

  State=2;

 //               End If

 

break;

 //           Case 2

case 2:

//                Count = Count + 1

Count++;

 //               C = Mid(vNewValue, Count, 1)

  C=vNewValue.substring(Count-1,Count);

  //alert(vNewValue);

  //alert(Count);

  //alert(C);

 //               If "0" <= C And C <= "9" Then

if("0"<=C && C<="9")

 //                   State = 3

  State=3;

 //               ElseIf C = "" Then

else if(C=="")

 //                   State = 8

  State=8;

 //               Else

else

return "Error";

 //                   Call SetError

 

 //                   Exit Property

 

 //               End If

 

break;

 //           Case 3

case 3:

 //               M_Month = M_Month & C

M_Month+=C;

 //               Count = Count + 1

  Count++;

 //               C = Mid(vNewValue, Count, 1)

  C=vNewValue.substring(Count-1,Count);

 //               If "0" <= C And C <= "9" Then

 

 //alert("*" +vNewValue);//12-31

 // alert(Count);

//alert("month"+M_Month);

 //alert(vNewValue.substring(4,1));

 

  if("0"<=C && C<="9")

 //                   State = 4

  State=4;

//                ElseIf C = "" Then

else if(C=="")

//                    State = 9

State=9;

//                Else

else

//                    State = 5

State=5;

//                End If

break;

//            Case 4

case 4:

//                M_Month = M_Month & C

M_Month+=C;

//                Count = Count + 1

Count++;

//                C = Mid(vNewValue, Count, 1)

C=vNewValue.substring(Count-1,Count);

//                If "0" <= C And C <= "9" Then

if("0"<=C && C<="9")

//                    State = 6

State=6;

//                ElseIf C = "" Then

else if(C=="")

//                    State = 9

State=9;

//                Else

else

//                    State = 5

State=5;

//                End If

break;

//            Case 5

case 5:

//                Count = Count + 1

Count++;

//                C = Mid(vNewValue, Count, 1)

C=vNewValue.substring(Count-1,Count);

//                If "0" <= C And C <= "9" Then

if("0"<=C && C<="9")

//                    State = 6

State=6;

//                ElseIf C = "" Then

else if(C=="")

//                    State = 8

State=8;

//                Else

else

//                    State = 9

State=9;

//                End If

break;

//            Case 6

case 6:

//                M_Day = M_Day & C

M_Day+=C;

//                Count = Count + 1

Count++;

//                C = Mid(vNewValue, Count, 1)

C=vNewValue.substring(Count-1,Count);

//                If "0" <= C And C <= "9" Then

if("0"<=C && C<="9")

//                    State = 7

State=7;

//                ElseIf C = "" Then

else if(C=="")

//                    State = 8

State=8;

//                Else

else

//                    State = 8

State=8;

//                End If

break;

//            Case 7

case 7:

//                M_Day = M_Day & C

M_Day+=C;

//                State = 8

State=8;

break;

//            Case 8

case 8:

break;

//            Case 9

case 9:

//                M_Day = "01"

M_Day = "01";

//                OnlyYM = True

OnlyYM = true;

//                State = 8

State = 8;

break;

//        End Select

}

//    Wend

}

//    M_Date = M_Year & "/" & M_Month & "/" & M_Day

//M_Date = M_Year + "/" + M_Month + "/" + M_Day;

if (!(parseInt(M_Year,10)>=1900 && parseInt(M_Year,10)<=2100))

return "Error";

if(!(parseInt(M_Month,10)>=1 && parseInt(M_Month,10)<=12))

return "Error";

if(!(parseInt(M_Day,10)>=1 && parseInt(M_Day,10)<=31))

return "Error";

if(M_Month.length<2)M_Month="0"+M_Month;

if(M_Day.length<2)M_Day="0"+M_Day;

//    If Not (IsDate(M_Date)) Then

//        Call SetError

//        Exit Property

//    End If

//    M_Date = Format(CDate(M_Date), "YYYY-MM-DD")

M_Date=M_Year + "-" + M_Month + "-" + M_Day;

//    If OnlyYM Then

//        M_Date = Mid(M_Date, 1, 7) & "   "

//    End If

if(OnlyYM)

M_Date=M_Year + "-" + M_Month+"  ";

//    M_CheckThrough = True

//    M_ErrorString = ""

//End Property

return M_Date;

}

IsDate(date)

用JavaScript实现显示时间和日期

分类:

Java Script

内容:

JavaScript @Now Equivalent
Have you ever needed to set a field's value to the current time? Probably. Just put @Now in the Default Value event of the field. But, this is the time that the server thinks it is! What if you want to know the time your user is on. 

Consider the notes.net café. When I create a document it says it was at the time the server is on, not me. So it's a lie really. That's not when *I* created it. Would it not be more useful if you knew the time that somebody replied to you in their time? I think so.

The only way to do this is to use Client-Side JavaScript. The following function returns a string in the format:

"dd/mm/yyyy hh:mm:ss" 
(or "mm/dd" if it is required in that format).

You can call it from a hyper-link that the user clicks, in the onLoad event of the form or when the user submits the form. It's up to you and your requirements...

<script>
/*
I've used the arguments property of a JavaScript
function, not because I had to, but just to so as to 
show you all how. The arguments[] are:
[0] DateFormat = Whether it is mm/dd or dd/mm (string)
[1] TargetField = Where to put the returned value (object)
*/
function getDateTimeNow(){
nw = new Date(); //Now !
mt = nw.getMonth() +1; //getMonth() is zero based !
mt = (mt < 10) ? "0" + mt : mt;
dy = nw.getDate();
dy = (dy < 10) ? "0" + dy : dy;
yr = nw.getYear();
hr = nw.getHours;
hr = (hr < 10) ? "0" + hr : hr;
mn = nw.getMinutes();
mn = (mn < 10) ? "0" + mn : mn;
sc = nw.getSeconds();
sc = (sc < 10) ? "0" + sc : sc;

ret = (arguments[0].toLowerCase().charAt(0) == "d") ? dy +"/" 
+ mt : mt + "/" + dy;
ret += "/" + yr + " " + hr + ":" + mn + ":" + sc;

arguments[1].value = ret;
}</script>

日期转换

Date.parse()

isNaN(numvalue)

isNaN(Date.parse(document.forms[0].startdatetime.value))

格式:2004/10/08 16:53

显示格式:

现在是

20041228  星期二 

上午 11:07:28 

时间可变化。

<TABLE style="BORDER-BOTTOM: #0f5aa6 1px solid" cellSpacing=0 

      cellPadding=0 width=370 align=center border=0>

        <TBODY>

        <TR>

          <TD width=90 height=24>

            <DIV class=main align=center>

            <DIV align=right>现在是</DIV></DIV></TD>

          <TD width=160>

            <DIV class=main align=center>

            <SCRIPT language=JavaScript>

<!-- Begin

  today=new Date();

 function initArray(){

   this.length=initArray.arguments.length

   for(var i=0;i<this.length;i++)

   this[i+1]=initArray.arguments[i]  }

   var d=new initArray(

     "星期日",

     "星期一",

     "星期二",

     "星期三",

     "星期四",

     "星期五",

     "星期六");

document.write(today.getYear(),"年",

today.getMonth()+1,"月",

today.getDate(),

"日  ",

d[today.getDay()+1]

);

//  End -->

      </SCRIPT>

            </DIV></TD>

          <TD class=main width=120>

            <SCRIPT language=javascript>

<!-- Begin

 function tick() {

var hours, minutes, seconds, xfile;

var intHours, intMinutes, intSeconds;

var today;

today = new Date();

intHours = today.getHours();

intMinutes = today.getMinutes();

intSeconds = today.getSeconds();

if (intHours == 0) {

hours = "12:";

xfile = "午夜 ";

} else if (intHours < 12) {

hours = intHours+":";

xfile = "上午 ";

} else if (intHours == 12) {

hours = "12:";

xfile = "正午 ";

} else {

intHours = intHours - 12

hours = intHours + ":";

xfile = "下午 ";

}

if (intMinutes < 10) {

minutes = "0"+intMinutes+":";

} else {

minutes = intMinutes+":";

}

if (intSeconds < 10) {

seconds = "0"+intSeconds+" ";

} else {

seconds = intSeconds+" ";

}

timeString = xfile+hours+minutes+seconds;

Clock.innerHTML = timeString;

window.setTimeout("tick();", 100);

}

window.onload = tick;

document.write("<div id='Clock'></div>");

//  End -->

</SCRIPT>

          </TD></TR></TBODY></TABLE>

036检查数据是否为空:

function chkIsEmpty(field, errMsg) {

 if(field && trim(field.value)=="") {

  alert(errMsg);

  field.focus();

  field.select();

  return true;

 } else return false;

}

037去除空格:

function trim(string1)

{

    var newstring;

    newstring=string1;

    var index1=newstring.lastIndexOf(' ');

     while(index1>-1)

     {

          var newstring1=newstring.substring(0,index1);

          var newstring2="";

          if((newstring.length-1)!=index1)

          {

                var newstring2=newstring.substring(index1+1,newstring.length);               

          }

          newstring=newstring1+newstring2;

          index1=newstring.lastIndexOf(' ');

          

     }

     return newstring;

}

function MyTrim(str)

{

//return str.replace(/^\s*/,'').replace(/\s*$/,'');

var s;

s=str.replace(" ","");

if(s!=str)

s=MyTrim(s);

return s

}

// Function Name: trim
// Function Description: 去除字符串的首尾的空格
// Creation Date: 2004-7-13 15:30
// Last Modify By: N/A
// Last Modify Date: N/A
String.prototype.trim=function(){
return this.replace(/(^s*)|(s*$)/g, "");
}

// Function Name: ltrim
// Function Description: 去除字符串的左侧的空格
// Creation Date: 2004-7-13 9:58
// Last Modify By: N/A
// Last Modify Date: N/A
String.prototype.ltrim=function()
{
return this.replace(/(^s*)/g, "");
}

// Function Name: rtrim
// Function Description: 去除字符串的右侧的空格
// Creation Date: 2004-7-13 15:31
// Last Modify By: N/A
// Last Modify Date: N/A
String.prototype.rtrim=function()
{
return this.replace(/(s*$)/g, "");
}

038遍历表单元素

for(i=0;i<window.document.forms[0].elements.length;i++)

        {

          if(window.document.forms[0].elements[i].type=="text" && window.document.forms[0].elements[i].title=="1"){

           var arrNames = Xsldom.getElementsByTagName(window.document.forms[0].elements[i].name);

           arrNames.item(0).text="rrrr";

                  }

039装入xml及修改值

function loadxml(str)

{

var Xsldom;

Xsldom=new ActiveXObject("Microsoft.XMLDOM");

Xsldom.async=false;

//alert(str);

Xsldom.load(str);

//alert(Xsldom.xml);

        for(i=0;i<window.document.forms[0].elements.length;i++)

        {

          if(window.document.forms[0].elements[i].type=="text" && window.document.forms[0].elements[i].title=="1"){

           var arrNames = Xsldom.getElementsByTagName(window.document.forms[0].elements[i].name);

           arrNames.item(0).text="rrrr";

                  }

        }

        alert(Xsldom.xml);

//Node=Xsldom.documentElement.childNodes;

//for(i=0;i<Node.length;i++)

//{

// OptionItem.options[i+1] = new Option(Node.item(i).text,Node.item(i).text);

//}

}

049向服务器提交xml

var oXmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

//ÕâÀï»»³ÉÄã×Ô¼ºµÄServerNameºÍVirtualDir

oXmlHttp.Open("POST", "/test/test.jsp", false);

oXmlHttp.setRequestHeader("Content-Type","text/xml")

//alert(Xsldom.xml);

oXmlHttp.Send(Xsldom.xml);

//if(oXmlHttp.status!="200")

//{

//alert("ûÓзµ»ØÕýÈ·µÄÊý¾ÝÀàÐÍ¡£")

//return false

//}

alert(oXmlHttp.responseXML.xml);

//xmlTest.loadXML(oXmlHttp.responseXML.xml);

050添加元素

var s

node = document.createElement( "<div class=query></div>" );

node.id="query" + i;

node.number=i;

s = "<select size='1' id='fieldname' onChange=操作最后一个("+i+")>"

s = s + "<option></option>"

s = s + "</select><select size='1' id='condition' onChange=操作最后一个("+i+")>"

s = s + "<option></option>"

s = s + "</select><input type='text' id='setvalue' size='20' onChange=操作最后一个("+i+") οnkeypress=操作最后一个("+i+")>"

s = s + "<input type='button' value='...' id='showpres' οnclick=预查询("+i+")>"

s = s + " <input type='button' value='×' id='closequery' οnclick=DeleteQuery(divquery,"+i+")>"

node.innerHTML=s;

divquery.appendChild( node );

1.οncοntextmenu="window.event.returnvalue=false"将彻底屏蔽鼠标右键
    <tableborderοncοntextmenu=return(false)><td>no</table>可用于Table 
    2.<bodyonselectstart="returnfalse">取消选取、防止复制
    3.οnpaste="returnfalse"不准粘贴
    
    4.οncοpy="returnfalse;"oncut="returnfalse;"防止复制
    
    5.<linkrel="ShortcutIcon"href="favicon.ico">IE地址栏前换成自己的图标
    
    6.<linkrel="Bookmark"href="favicon.ico">可以在收藏夹中显示出你的图标
    
    7.<inputstyle="ime-mode:disabled">关闭输入法
    
    8.永远都会带着框架
    <scriptlanguage="javascript"><!--
    if(window==top)top.location.href="frames.htm";//frames.htm为框架网页
    //--></script>
    
    9.防止被人frame
    <SCRIPTLANGUAGE=javascript><!--
    if(top.location!=self.location)top.location=self.location;
    //--></SCRIPT>
    
    10.<noscript><iframesrc=*.html></iframe></noscript>网页将不能被另存为
    
    11.<inputtype=buttonvalue=查看网页源代码
    οnclick="window.location='view-source:'+'<IMG src="pic/url.gif" align=absMiddle border=0>http://www.csdn.net/">
    
    12.怎样通过asp的手段来检查来访者是否用了代理
    <%ifRequest.ServerVariables("HTTP_X_FORWARDED_FOR")<>""then
    response.write"<fontcolor=#FF0000>您通过了代理服务器,"&_
    "真实的IP"&Request.ServerVariables("HTTP_X_FORWARDED_FOR")
    endif
    %>
    
    13.取得控件的绝对位置
    
    //javascript
    <scriptlanguage="javascript">
    functiongetIE(e){
    vart=e.offsetTop;
    varl=e.offsetLeft;
    while(e=e.offsetParent){
    t+=e.offsetTop;
    l+=e.offsetLeft;
    }
    alert("top="+t+"\nleft="+l);
    }
    </script>
    
    //VBScript
    <scriptlanguage="VBScript"><!--
    functiongetIE()
    dimt,l,a,b
    seta=document.all.img1
    t=document.all.img1.offsetTop
    l=document.all.img1.offsetLeft
    whilea.tagName<>"BODY"
    seta=a.offsetParent
    t=t+a.offsetTop
    l=l+a.offsetLeft
    wend
    msgbox"top="&t&chr(13)&"left="&l,64,"得到控件的位置"
    endfunction
    --></script>
    
    14.光标是停在文本框文字的最后
    <scriptlanguage="javascript">
    functioncc()
    {
    vare=event.srcElement;
    varr=e.createTextRange();
    r.moveStart('character',e.value.length);
    r.collapse(true);
    r.select();
    }
    </script>
    <inputtype=textname=text1value="123"οnfοcus="cc()">
    
    15.判断上一页的来源
    asp:
    request.servervariables("HTTP_REFERER")
    
    javascript:
    document.referrer
    
    16.最小化、最大化、关闭窗口
    <objectid=hh1classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
    <paramname="Command"value="Minimize"></object>
    <objectid=hh2classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
    <paramname="Command"value="Maximize"></object>
    <OBJECTid=hh3classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
    <PARAMNAME="Command"value="Close"></OBJECT>
    
    <inputtype=buttonvalue=最小化οnclick=hh1.Click()>
    <inputtype=buttonvalue=最大化οnclick=hh2.Click()>
    <inputtype=buttonvalue=关闭οnclick=hh3.Click()>
    本例适用于IE
    
    17.
    <%
    '定义数据库连接的一些常量
    ConstadOpenForwardOnly=0'游标只向前浏览记录,不支持分页、RecordsetBookMark
    ConstadOpenKeyset=1'键集游标,其他用户对记录说做的修改将反映到记录集中,但其他用户增加或删除记录不会反映到记录集中。支持分页、RecordsetBookMark
    ConstadOpenDynamic=2'动态游标功能最强,但耗资源也最多。用户对记录说做的修改,增加或删除记录都将反映到记录集中。支持全功能浏览(ACCESS不支持)
    ConstadOpenStatic=3'静态游标,只是数据的一个快照,用户对记录说做的修改,增加或删除记录都不会反映到记录集中。支持向前或向后移动
    
    ConstadLockReadOnly=1'锁定类型,默认的,只读,不能作任何修改
    ConstadLockPessimistic=2'当编辑时立即锁定记录,最安全的方式
    ConstadLockOptimistic=3'只有在调用Update方法时才锁定记录集,而在此前的其他操作仍可对当前记录进行更改、插入和删除等
    ConstadLockBatchOptimistic=4'当编辑时记录不会被锁定,而更改、插入和删除是在批处理方式下完成的
    
    ConstadCmdText=&H0001
    ConstadCmdTable=&H0002
    %>
    
    18.网页不会被缓存
    HTM网页
    <METAHTTP-EQUIV="pragma"CONTENT="no-cache">
    <METAHTTP-EQUIV="Cache-Control"CONTENT="no-cache,must-revalidate">
    <METAHTTP-EQUIV="expires"CONTENT="Wed,26Feb199708:21:57GMT">
    或者<METAHTTP-EQUIV="expires"CONTENT="0">
    ASP网页
    Response.Expires=-1
    Response.ExpiresAbsolute=Now()-1
    Response.cachecontrol="no-cache"
    PHP网页
    header("Expires:Mon,26Jul199705:00:00GMT");
    header("Cache-Control:no-cache,must-revalidate");
    header("Pragma:no-cache");
    
    
    19.检查一段字符串是否全由数字组成
    <scriptlanguage="javascript"><!--
    functioncheckNum(str){returnstr.match(/\D/)==null}
    alert(checkNum("1232142141"))
    alert(checkNum("123214214a1"))
    //--></script>
    
    20.获得一个窗口的大小
    document.body.clientWidth,document.body.clientHeight
    
    21.怎么判断是否是字符
    if(/[^\x00-\xff]/g.test(s))alert("含有汉字");
    elsealert("全是字符");
    
    22.TEXTAREA自适应文字行数的多少
    <textarearows=1 name=s1 cols=27 onpropertychange="this.style.posHeight=this.scrollHeight">
    </textarea>
    
    23.日期减去天数等于第二个日期
    <scriptlanguage=javascript>
    functioncc(dd,dadd)
    {
    //可以加上错误处理
    vara=newDate(dd)
    a=a.valueOf()
    a=a-dadd*24*60*60*1000
    a=newDate(a)
    alert(a.getFullYear()+""+(a.getMonth()+1)+""+a.getDate()+"")
    }
    cc("12/23/2002",2)
    </script>
    
    24.选择了哪一个Radio
    <HTML><scriptlanguage="vbscript">
    functioncheckme()
    foreachobinradio1
    ifob.checkedthenwindow.alertob.value
    next
    endfunction
    </script><BODY>
    <INPUT name="radio1" type="radio" value="style" checked>style
    <INPUT name="radio1" type="radio" value="barcode">Barcode
    <INPUT type="button" value="check"οnclick="checkme()">
    </BODY></HTML>
    
    25.获得本页urlrequest.servervariables("")集合
    Response.Write"<TABLEborder=1><!--TableHeader--><TR><TD><B>Variables</B></TD><TD><B>value</B></TD></TR>"
    foreachobinRequest.ServerVariables
    Response.Write"<TR><TD>"&ob&"</TD><TD>"&Request.ServerVariables(ob)&"</TD></TR>"
    next
    Response.Write"</TABLE>"
    
    26.
    本机ip<%=request.servervariables("remote_addr")%>
    服务器名<%=Request.ServerVariables("SERVER_NAME")%>
    服务器IP<%=Request.ServerVariables("LOCAL_ADDR")%>
    服务器端口<%=Request.ServerVariables("SERVER_PORT")%>
    服务器时间<%=now%>
    IIS版本<%=Request.ServerVariables"SERVER_SOFTWARE")%>
    脚本超时时间<%=Server.ScriptTimeout%>
    本文件路径<%=server.mappath(Request.ServerVariables("SCRIPT_NAME"))%>
    服务器CPU数量<%=Request.ServerVariables("NUMBER_OF_PROCESSORS")%>
    服务器解译引擎<%=ScriptEngine&"/" & ScriptEngineMajorVersion &"." & ScriptEngineMinorVersion & "." & ScriptEngineBuildVersion%>
    服务器操作系统<%=Request.ServerVariables("OS")%>
    
    27.ENTER键可以让光标移到下一个输入框
    <input οnkeydοwn="if(event.keyCode==13)event.keyCode=9">
    
    28.检测某个网站的链接速度:
    把如下代码加入<body>区域中:
    <scriptlanguage=javascript>
    tim=1
    setInterval("tim++",100)
    b=1
    
    varautourl=newArray()
    autourl[1]="< src="pic/url.gif" align=absMiddle border=0>www.njcatv.net"
    autourl[2]="javacool.3322.net"
    autourl[3]="< src="pic/url.gif" align=absMiddle border=0>www.sina.com.cn"
    autourl[4]="www.nuaa.edu.cn"
    autourl[5]="< src="pic/url.gif" align=absMiddle border=0>www.cctv.com"
    
    functionbutt(){
    document.write("<formname=autof>")
    for(vari=1;i<autourl.length;i++)
    document.write("<inputtype=textname=txt"+i+"size=10value=测试中……>=<inputtype=textname=url"+i+"size=40>=<inputtype=buttonvalue=GOοnclick=window.open(this.form.url"+i+".value)><br/>")
    document.write("<inputtype=submitvalue=刷新></form>")
    }
    butt()
    functionauto(url){
    document.forms[0]["url"+b].value=url
    if(tim>200)
    {document.forms[0]["txt"+b].value="链接超时"}
    else
    {document.forms[0]["txt"+b].value="时间"+tim/10+""}
    b++
    }
    functionrun(){for(vari=1;i<autourl.length;i++)document.write("<imgsrc=http://"+autourl[i]+"/"+Math.random()+"width=1height=1οnerrοr=auto('< src="pic/url.gif" align=absMiddle border=0>http://";+autourl[i]+"')>")}
    run()</script>
    
    
    29.各种样式的光标
    auto:标准光标
    default:标准箭头
    hand:手形光标
    wait:等待光标
    textI形光标
    vertical-text:水平I形光标
    no-drop:不可拖动光标
    not-allowed:无效光标
    help?帮助光标
    all-scroll:三角方向标
    move:移动标
    crosshair:十字标
    e-resize
    n-resize
    nw-resize
    w-resize
    s-resize
    se-resize
    sw-resize
    
    1.本地无缓存,每次自动刷新
    response.expires=0
    response.addHeader"pragma","no-cache"
    response.addHeader"cache-control","private"
    
    2.修改contentType并下载gif等格式
    <%
    functiondl(f,n)
    onerrorresumenext
    
    sets=CreateObject("Adodb.Stream")
    S.Mode=3
    S.Type=1
    S.Open
    s.LoadFromFile(server.mappath(f))
    iferr.number>0then
    response.writeerr.number&":"&err.description
    else
    response.contentType="application/x-gzip"
    response.addheader"Content-Disposition:","attachment;filename="&n
    response.binarywrite(s.Read(s.size))
    endif
    endfunction
    
    calldl("012922501.gif","t1.gif")
    %>
    
    
    19.检查一段字符串是否全由数字组成
    <scriptlanguage="javascript"><!--
    functioncheckNum(str){return!/\D/.test(str)}
    alert(checkNum("1232142141"))
    alert(checkNum("123214214a1"))
    //--></script>
    
    20.获得一个窗口的大小
    document.body.clientWidth,document.body.clientHeight
    document.body.offsetWidth,document.body.offsetHeight
    有时还需要知道window.screenTop,window.screenLeft
    
    21.怎么判断是否含有汉字
    if(escape(str).indexOf("%u")!=-1)alert("含有汉字");
    elsealert("全是字符");
    
    22.TEXTAREA自适应文字行数的多少
    IE5.5+可以用overflow-y:visible
    <textarearows=1name=s1cols=27style="overflow-y:visible">
    </textarea>
    
    23.日期减去天数等于第二个日期
    <scriptlanguage=javascript>
    functioncc(dd,dadd)
    {
    //可以加上错误处理
    vard=newDate(dd.replace("-","/"))
    d.setDate(d.getDate()+dadd)
    alert(d.getFullYear()+""+(d.getMonth()+1)+""+d.getDate()+"")
    }
    cc("2002-2-28",2)
    </script>

table操作

var objTR =objTD.parentElement;

 var objTable = objTR.parentElement;

objTD.parentElement.parentElement.rowIndex

objTD= objTR.childElement

objTable.rows[i].cells[0].all.fieldname//得到td下的表单对象

event.srcElement

objTR.rowIndex;

var objRow = objTable.insertRow();  //增加行

alert(objRow.tagName);

objRow.bgColor="#BFCBCC";

idTabs.setAttribute("tabstate", iTabSelected);

for(i=1;i<objTable.rows.length;i++){

//alert(objTable.rows[i].tagName);

objTable.deleteRow(objTable.rows[i].rowIndex);

}

如何固定表格宽度- -

                                       

<> 

<TABLE style="table-layout: auto | fixed">
auto: 默认值
fixed: 宽度固定,截断超出的内容

<TABLE style="word-break: normal | break-all | keep-all">
normal: 默认值,按字词截断换行
break-all: 强行截断并换行
keep-all: 不截断不换行

style="TABLE-LAYOUT: fixed; WORD-WRAP: break-word" 

用好HTML的表格标记

 一、作系列横单线


  这是系列横单线试验,效果还好吧? 
  在这个例子中,用到了表格主标题标记<caption>,它的语法如下:
<caption
align=left|center|right
valign=top|bottom>
  align和valign分别用于设定标题的水平位置和垂直位置。align的默认值是center;valign的默认值是top。利用<caption>标记可以方便地在紧靠边表格的顶部或底部写上文字,且居中,若用其它办法要麻烦得多。另外在本例中能使表格产生单线效果是设置了<table>标记的rules和frame参数,rules参数是对表格的内部边框作显示控制。
rules="none":表示不加内部边框;
rules="rows":表示只显示水平方向的边框; 
rules="cols:表示只显示垂直方向上的边框;
rules="all":则是显示所有方向上的边框,这也是默认值;
frame="void":表示不加外边框;
frame="above":表示显示上边的外边框;
frame="below":表示显示下边的外边框;
frame="lhs" :表示显示左边的外边框;
frame="rls" :表示显示右边的外边框;
frame="hsides":表示显示上下外边框;
frame="vsides":表示显示左右外边框;
frame="box" 则表示显示所有外边框。
  明白了参数值的含义,制作本例的效果就简单了,本例完成后的源代码如下:
<table width="60%" border="1" cellspacing="0" cellpadding="0" rules="rows" frame="hsides">
<caption>这是系列横单线试验</caption>
<tr> 
<td> 这是系列横单线试验,效果还好吧?</td>
</tr>
<tr> 
<td> </td>
</tr>
<tr> 
<td> </td>
</tr>
</table> 
  用这种方法画系列单线,即快又整齐,且所用代码也很少。

  二、作系列竖单线


  本例这种效果看起来是不是有点特色,其实在制作方法上与上例没有多少区别,只是改变了rules和frame的参数值,使表格只显示垂直方向的内外边框,其它与上例相同,本例完成后的源代码是:
<table border="1" cellspacing="1" cellpadding="8" rules="clos" frame="vsides" height="115" align="left" hspace="10" width="180">
<tr>
<td>更上一 层 楼 </td>
<td>欲穷千 里 目 </td>
<td>黄河 入 海 流 </td>
<td>白日依 山 尽 </td>
<td><p><br>登 黄 鹤 楼 </p></td>
</tr>
</table>

  三、系列双横线


  这是在例一的基础上再增加设定了cellspacing参数所产生的效果。
  本例采用与例一相同的方法,通过设定rules和frame参数,使表格只显示水平方向的内外边框线,并增加了设定cellspacing参数使其产生双线效果,但是<table>标记默认的双线颜色不一样(因它的本意是用两种颜色来产生立体效果的),所以又通过设定bordercolorlight和bordercolordark 参数来改变双线的颜色,以达到双线颜色一致的目的。另外为了使表格内的文字内容上下留空,又设定了cellpadding参数,当然也可以通过设定单元格高度来达到这个目的,但那样要增加许多代码。下面介绍这几个参数的含义:
cellspacing="n":单元格间距,也就是内外边框线的间距;
cellpadding="n":单元格边距,即单元格内内容与内边框的距离;
bordercolorlight="#n":设定立体边框线中较浅部分的颜色,用颜色名称或十六进制数表示。
bordercolordark="#n":设定立体边框线中较深部分的颜色,用颜色名称或十六进制数表示。 
  用本例的方法制作双横线,比用其它方法方便、快捷,所用代码也较少,当横线的数量越多,效果越明显。本例完成后的代码为:
<table width="60%" border="1" cellspacing="6" cellpadding="3" bordercolorlight="#006633" bordercolordark="#006633" rules="rows" frame="hsides">
<tr><td> 这是在例一的基础上再增加设定了cellspacing参数所产</td></tr>
<tr><td>生的效果。</td></tr>
<tr><td> </td></tr>
</table>

1.表格的分隔线可以隐藏 

<table border rules=cols cellspacing=0 align=left> 可以隐藏横向的分隔线 

<table border rules=rows cellspacing=0 align=right>可以隐藏纵向的分隔线 

<table border rules=none cellspacing=0 align=center>可以隐藏横向和纵向的分隔线 


2.表格的边框不断在闪 

以下方法可以令表格的边框不断在闪,很实用的
BODY区加上 

<table border="0" width="280" id="myexample" 
style="border:5px solid yellow"> 

<tr> 

<td>加入任意的物件.加入任意的物件. 

<br>加入任意的物件.加入任意的物件. 

<br>加入任意的物件.加入任意的物件.</td> 

</tr> 

</table> 

<script language="JavaScript1.2"> 

<!-- 

function flashit(){ 

if (!document.all) 

return 

if (myexample.style.borderColor=="yellow") 

myexample.style.borderColor="lime" 

else 

myexample.style.borderColor="yellow" 

setInterval("flashit()", 500) 

//--> 

</script> 


3.表格分行下载 

这个对表哥内容很大比较实用 

在需要分行下载处加上 <tbody > 

比如:
<table >
<tbody >
<tr >
<td >flsdjfsdjfkdsjf</td >
</tr >
<tr >
<td >skdjfsdjfksd</td >
</tr >
</tbody > 

<tbody >
<tr >
<td >flsdjfsdjfkdsjf</td >
</tr >
<tr >
<td>skdjfsdjfksd</td >
</tr >
</tbody >
</table > 

4.几种样式不同的表格 

<table border="1" width="220" style="position: absolute; left: 
11; top: 11" height="26" > 

<tr> 

<td width="100%">普通表格</td> 

</tr> 

</table> 

5.正立方表格 

<table border="1" width="220" bordercolorlight="#eeeeee" 
bordercolordark="#000000" style="position: absolute; left: 10; top: 
49" height="26"> 

<tr> 

<td width="100%">正立方表格</td> 

</tr> 

</table> 


6.细表格 

<table border="0" frame=vsides width="219" 
bgcolor="#000000" cellspacing="1" cellpadding="0" 
height="22" style="position: absolute; left: 11; top: 86"> 

<tr bgcolor="#FFFFFF"> 

<td width="100%" height="2">细表格</td> 

</tr> 

</table> 

7.立体表格 

<table border="1" width="220" bordercolorlight="#ffffff" 
bordercolordark="#ffffff" style="position: absolute; left: 10; top: 
112" height="34"> 

<tr> 

<td width="100%" bgcolor="#B7B7B7" 
bordercolorlight="#000000" bordercolordark="#eeeeee" >立体表格</td> 

</tr> 

</table> 


8.无名表格 

<table width="220" align="center" style="position: absolute; 
left: 246; top: 12" height="51"> 

<tr> 

<td><fieldset style="width:220" align="center"> 
<legend> 无名表格 </legend>  <p align="right"> </fieldset> 
<br> 

</td> 

</tr> 

</table> 

9.表中表效果Ⅱ 

<table width="220" align="center" style="position: 
absolute; left: 245; top: 89" height="110">
<tr>
<td height="75"><fieldset style="width:220" 
align="center"> <legend> 表中表效果Ⅱ </legend> <table 
frame="hsides" border="1"
bordercolorlight="#000000" bordercolordark="#ffffff" 
width="100%" cellspacing="1" cellpadding="0" height="78">
<tr bgcolor="#ffffff">
<td width="100%" height="76"></fieldset></td>
</tr>
</table> 

10.表中表效果Ⅰ 

<table width="220" align="center" style="position: absolute; 
left: 10; top: 120" height="138" cellspacing="1" 
cellpadding="0"> 

<tr> 

<td height="126"><fieldset style="width: 220; color: #B7B7B7; 
border-style: groove" align="center"> <legend style="color: 
#FFFFFF; border: 1 solid #808080" > <font color="#000000">表中表效果Ⅰ</font> 
</legend>  <p align="right"> </fieldset> 

</td> 

</tr> 

</table> 


11.表格中边框的显示 


只显示上边框 <table frame=above>
只显示下边框 <table frame=below> 
只显示左、右边框 <table frame=vsides>
只显示上、下边框 <table frame=hsides>
只显示左边框 <table frame=lhs>
只显示右边框 <table frame=rhs>
不显示任何边框 <table frame=void>

 1. 两种细线表格做法


  源码如下:

<table width="100%" border="1" bordercolor="#000000">
  <tr bordercolor="#FFFFFF">
    <td>表格边线为1,线色为黑,行线色为白。</td>
  </tr>
</table>
<p>
<table width="100%" border="0" cellspacing="1" bgcolor="#000000">
  <tr>
    <td bgcolor="#FFFFFF">表格边线为0,间距为1,背景色为黑,行背景色为白。</td>
  </tr>
</table>

  2. 立体表格



  源码如下:

<table  border=1 cellspacing=0  width=100% bordercolorlight=#333333 bordercolordark=#efefef>
  <tr bgcolor=#cccccc>
    <td>it365cn</td>
    <td>it365cn</td>
    <td>it365cn</td>
    <td>it365cn</td>
  </tr>
  <tr bgcolor=#cccccc>
    <td>cnbruce</td>
    <td>cnbruce</td>
    <td>cnbruce</td>
    <td>cnbruce</td>
  </tr>
</table>
<center>表格边线为1,间隔为0,左上为#333333,右下为#efefef,行背景色为#cccccc

  3. 另类圆角表格制作


  源码如下:

原图:
<table cellpadding=0 cellspacing=0 border=0 width=282 align=center>
  <tr height=1>
    <td rowspan=4 width=1></td>
    <td rowspan=3 width=1></td>
    <td rowspan=2 width=1></td>
    <td width=2></td>
    <td bgcolor=#43B5C9></td>
    <td width=2></td>
    <td rowspan=2 width=1></td>
    <td rowspan=3 width=1></td>
    <td rowspan=4 width=1></td>
  </tr>
  <tr height=1>
    <td bgcolor=#43B5C9></td>
    <td bgcolor=#43B5C9></td>
    <td bgcolor=#43B5C9></td>
  </tr>
  <tr height=1>
    <td bgcolor=#43B5C9></td>
    <td colspan=3 bgcolor=#43B5C9></td>
    <td bgcolor=#43B5C9></td>
  </tr>
  <tr height=2>
    <td bgcolor=#43B5C9></td>
    <td colspan=5 bgcolor=#43B5C9></td>
    <td bgcolor=#43B5C9></td>
  </tr>
</table>
<p>放大
<table cellpadding=0 cellspacing=0 border=1 width=282 align=center>
  <tr height=10>
    <td rowspan=4 width=10></td>
    <td rowspan=3 width=10></td>
    <td rowspan=2 width=10></td>
    <td width=20></td>
    <td bgcolor=#43B5C9></td>
    <td width=20></td>
    <td rowspan=2 width=10></td>
    <td rowspan=3 width=10></td>
    <td rowspan=4 width=10></td>
  </tr>
  <tr height=10>
    <td bgcolor=#43B5C9></td>
    <td bgcolor=#43B5C9></td>
    <td bgcolor=#43B5C9></td>
  </tr>
  <tr height=10>
    <td bgcolor=#43B5C9></td>
    <td colspan=3 bgcolor=#43B5C9></td>
    <td bgcolor=#43B5C9></td>
  </tr>
  <tr height=20>
    <td bgcolor=#43B5C9></td>
    <td colspan=5 bgcolor=#43B5C9></td>
    <td bgcolor=#43B5C9></td>
  </tr>
</table>
4. 虚线边框表格


  源码如下:

<style type="text/css">
.tb{BORDER-BOTTOM: #000000 1px dotted;BORDER-top: #000000 1px dotted;BORDER-LEFT:
#000000 1px dotted;BORDER-RIGHT: #000000 1px dotted;}
</style>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="tb"><center>www.blueidea.com</td>
  </tr>
</table>
<p>
虚线直线1
<hr size=1 style="border:1px dotted #001403;">
虚线直线2
<p size=1 style="border:1px dotted #001403;">

5. 分类型表格

  源码如下:

<fieldset>
<legend>item</legend>
content
</fieldset>


6. 变色的单元格1,通过a:hover


  源码如下:

<style>
a:link,a:visited,a:hover
{width:100%;text-decoration:none;font-family:verdana;font-size:10px;color:white}
a:hover{background:#0099ff;color:black}
td{background:#3366cc;color:white;padding:0px}
</style>

<TABLE width=100% cellspacing=1 bgcolor=black >
  <TR>
    <TD><a href="#">Blueidea
    <TD><a href="#">.com
  <TR>
    <TD><a href="#">CNBruce
    <TD><a href="#">.com
</TABLE>
7. 变色的单元格2,已经做成了CSS,注意还有透明效果

  源码如下:

<style type="text/css">
.aa
{ background-color:#0000ff; color:#ff0000;filter: alpha(opacity=50)}
.bb 
{ background-color:#3366cc; color:#ffffff}
</style> 

<table  width="100%">
  <tr>
    <td  οnmοuseοver="this.className='aa'" οnmοuseοut="this.className='bb'"
class="bb"><center><b>cnbruce</td>
   </tr>
</table>


8. 变色的单元格3,通过mouse事件做.有点微软的味道


  源码如下:
<table width="100%" border="1" cellpadding="3" cellspacing="0"
bordercolor="#efefef" bgcolor="#efefef">
  <tr> 
    <td onMouseOut="this.bgColor='#efefef';this.borderColor='#efefef'";
onMouseOver="this.bgColor='#cccccc'; this.borderColor='#000033'"><div align="left">
Blueidea</div></td>
  </tr>
  <tr> 
    <td 
onMouseOut="this.bgColor='#efefef';this.borderColor='#efefef'"; onMouseOver="this.bgColor='#cccccc'; this.borderColor='#000033'">
cnbruce</td>
  </tr>
</table>

9. 透明表格

<table bgcolor=#ececec style="filter:alpha(opacity=50)" width=200 height=100 border=0>
  <tr><td><center>cnbruce</td></tr>
</table>

10. 表格边框显示外阴影

  源码如下:

<table  align=center  width=200  height=100  bgcolor=#f3f3f3
style="filter:progid:DXImageTransform.Microsoft.Shadow
(Color=#333333,Direction=120,strength=5)">
  <tr>
    <td><center>www.cnbruce.com</td>
  </tr>
</table>
11. VML代码实现的圆角表格
(1).

  源码如下:

<html xmlns:v>
<style>
v\:*{behavior:url(#default#VML)}
</style>
<body>
   <v:RoundRect style="position:relative;width:150;height:240px">
    <v:shadow on="T" type="single" color="#b3b3b3" offset="3px,3px"/>
    <v:TextBox style="font-size:10.2pt;">VML</v:TextBox>
    </v:RoundRect> 
</body>
</html>

(2).

  源码如下:

<html  xmlns:v>
<style>
v\:*{behavior:url(#default#VML)}
</style>
<body>
      <v:RoundRect  style="position:relative;width:150;height:240px">
<v:path  textpathok="true"  />
      <v:textpath  on="true"  string="cnbrucecnbrucecnbrucecnbrucecnbruc
ecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbruce"  />
        <v:shadow  on="T"  type="single"  color="#b3b3b3"  offset="3px,3px"/>
        <v:TextBox  style="font-size:10.2pt;">VML</v:TextBox>
        </v:RoundRect>  
</body>
</html>

(3).


  源码如下:

<html xmlns:v>
<style>
v\:*{behavior:url(#default#VML)}
</style>
<body>
   <v:RoundRect style="position:relative;width:150;height:240px" arcsize=0.5>
    <v:shadow on="T" type="single" color="#b3b3b3" offset="3px,3px"/>
    <v:TextBox style="font-size:10.2pt;">VML</v:TextBox>
    </v:RoundRect> 
</body>
</html>

转自:动态网制作指南 www.knowsky.com

常用函数:

大小写变换:toLowerCase(),toUpperCase()

select操作

var sl=document.forms[0].roomName;

alert(sl.options[sl.selectedIndex].text);

thisform.room.selectedIndex==-1

document.forms[0].roomname.disabled=true;

如何用 Java Script 在下拉列表中自动加入内容?

分类:

Java Script

内容:

If you want to add easy content to your selectlist (dropdown list) this is your tip. Simply use the code below. It simply transforms your selectlist into a field where you can add your value. After that it will transform back into a select list. "Long Live the Dom" 

Add if(this.options[this.selectedIndex].text == 'Other...') selectOther(this); to the ONCHANGE event of the select list and make sure the select list has an Other... option. The script should do the rest.

Code

function selectOther(list) {
var input = document.createElement("INPUT");
input.className = "select";
input.type = "text";
input.onblur = function() {
var list = this.oldNode;
list.options[list.options.length - 1] = new Option(this.value, "", true);
list.options[list.options.length] = new Option("Other...");
list.selectedIndex = list.options.length - 2;

this.parentNode.replaceChild(list, this);
};
input.oldNode = list.parentNode.replaceChild(input, list);
}

附件:

Select清空select.options.length=0

提交操作

如何禁止用户在Web上提交文档后利用后退功能?

分类:

Java Script

内容:

This will prevent the user from resubmitting the same docment many times. I 
have tried many cache expiration solutions and nothing seems to work properly. 
Place this code in the onLoad event of the form and voila!

Code


in the onLoad event of the Form..
--------------------------------

if(history.forward() != null) {
self.location.reload()

附件:

Style操作

if(this.value="1")

{

document.forms[0].see.style.display='none'

}

if(this.value="1")

{

document.forms[0].see.style.display='inline'

}

redio操作

if(document.forms[0].watch){

alert(document.forms[0].watch.value);

if(document.forms[0].watch[0].checked)

document.forms[0].see1.disabled=true;

}

Checkbox操作

If(document.all.zxbz.checked)

document.all.zxbz.value="1";

else

document.all.zxbz.value="0";

素操作

document.getElementById

innerText

innerHTML

disabled

event.srcElement

obj.tagName

this.all('switchPoint').style.display='none'

document.all('switchPoint')[0].style.display='none'

parentNode;

childNodes;

innerText, outerText, innerHTML, outerHTML.

IE的DHTML对象提供了四个可读写的属性来动态操作页面元素的内容:innerText, outerText, innerHTML, outerHTML.

需注意两点:

1.     其中innerText,outerText属性的值是作为普通文本呈现的,即使它含有HTML标签也如实反应出来;而innerHTML, outerHTML呈现的是经HTML引擎解析后文本,它可以反应属性中HTML标签的表现效果。

2.     对对象的outerText,outerHTML属性赋值(即写操作)会删除该对象。

以上四个属性的赋值操作只是替换原对象的文本内容,想要在页面中指定元素相关位置新增文本内容,需采用insertAdjacentHTML和insertAdjacentText方法。形式如下:

object.insertAdjacentText(sWhere, sText)
object.insertAdjacentHTML(sWhere, sText)
其中 sWhere 表示插入的文本相对于html标签的位置,有如下四个预设值:

beforeBegin,afterBegin,beforeEnd,afterEnd

使用中需注意如下几点:

1.这两种方法必须在整个文档装载完成之后才能使用,否则将出错。

2. InsertAdjacentText只能插入普通文本,InsertAdjacentHTML插入html格式的文本

3. 用InsertAdjacentHTML插入脚本,必须在script元素中使用defer属性,否则脚本执行将出现运行期错误

4.InsertAdjacentHTML插入html元素后,all以及其他可能的元素集合将自动更新以反应动态变化。如页面后续元素的sourceIndex 属性将改变。

5.当赋予InsertHTML/outerHTML属性无效的HTML标签,该方法可能出现运行时错。如以下代码将出错:

   <BODY>

      <p id=pdiv></p>

      <SCRIPT LANGUAGE="JavaScript">

           pdiv.innerHTML = "<p>hello</p>"

      </SCRIPT>

      </BODY>
 
此外页面内容动态操作还需要注意如下一些细节:

1.只有文档BODY内显示的内容能被以上属性和方法动态改变,BODY对象的内容能被动态操作,但BODY对象本身无法被替换。

2.以上属性和方式不能操作空标签(没有内容的html标签),如input,img。

3.对于table对象而言,只有td(innerHTML/innerText)和table(outerHMTL/outerText)对象可以用某些属性来替换或插入内容;而其他table对象,如tr、tbody不能用这些属性来改变内容。

数字操作:

描述

返回由字符串转换得到的浮点数 

语法

parseFloat(numstring) 

numstring 参数是包含浮点数的字符串。 

注释

parseFloat 方法返回与 numstring 中保存的数相等的数字表示。如果 numstring 的前缀不能解释为浮点数,则返回 NaN (而不是数字)。 

parseFloat("abc")    // 返回 NaN。

parseFloat("1.2abc") // 返回 1.2。

可以用 isNaN 方法检测 NaN。

parseInt("abc")    // 返回 NaN.

parseInt("12abc")  // 返回 12.

可以用 isNaN 方法检测 NaN。

Document操作

document.body

xml操作

DOM节点类型 
举例 

NODE_ELEMENT 
<artist type="band">The Offspring</artist> 

NODE_ATTRIBUTE 
type="band">The Offspring 

NODE_TEXT 
The Offspring 

NODE_PROCESSING_INSTRUCTION 
<?xml version="1.0"?> 

NODE_DOCUMENT_TYPE 
<!DOCTYPE compactdiscs SYSTEM "cds.dtd">

var contactID=parseInt(sortNode.item(currentid).parentNode.getAttribute("contactID"))+1

Xsldom.getElementsByTagName(PrimaryKey);

var PrimaryKey=node(0).getAttribute("PrimaryKey");

node.item(0).childNodes(j).nodeName

objRoot.setAttribute("orderby",tableorder);

遍历xml

<script language="VBScript"> 
txt="<h1>Traversing the node tree</h1>" 
document.write(txt) 
set xmlDoc=CreateObject("Microsoft.XMLDOM") 
xmlDoc.async="false" 
xmlDoc.load("note.xml") 
for each x in xmlDoc.documentElement.childNodes 
  document.write("<b>" & x.nodename & "</b>") 
  document.write(": ") 
  document.write(x.text) 
  document.write("<br>") 
next 
</script> 

LoadXml(“”)加载字符串。

location操作

var pathname=window.location.pathname;

var searchstr=window.location.search;

遍历操作

遍历xml vbscript

<script language="VBScript"> 
txt="<h1>Traversing the node tree</h1>" 
document.write(txt) 
set xmlDoc=CreateObject("Microsoft.XMLDOM") 
xmlDoc.async="false" 
xmlDoc.load("note.xml") 
for each x in xmlDoc.documentElement.childNodes 
  document.write("<b>" & x.nodename & "</b>") 
  document.write(": ") 
  document.write(x.text) 
  document.write("<br>") 
next 
</script>

遍历xtree 

function cjcbl(tree1,j){

var ddd=tree1;

j+="";

var xx;

for(var i =0; i <= (ddd.childNodes.length - 1); i++){

if(i+1<10){

xx="00"+(i+1);

}

else if(i+1<100){

xx="0"+(i+1);

}

else{

xx=i+1;

}

alert(document.getElementById(ddd.childNodes[i].id+"-anchor").innerText+j+xx);

cjcbl(ddd.childNodes[i],j+xx);

  }

}

This语句

描述

指当前对象。 

语法

this.property

说明

this 关键字通常在对象的 构造函数中使用,用来引用对象。在下面示例中,this 指的是新创建的 Car 对象,并给三个属性赋值: 

function Car(color, make, model)

{

  this.color = color;

  this.make = make;

  this.model = model;

}

对于 JScript 的客户版本,如果在其他所有对象的上下文之外使用 this,则它指的是 window 对象。

Hashmap类

使用javascript模拟了一个类似Java的HashMap类

/*------------------------------------------------------------------------------ 

*   added by LxcJie 2004.7.16

*   模拟简单HashMap类,要求key是String,value可以是任何类型

*   方法列表: 

*     1,HashMap() : 构造函数

*     2, put(key, value) : void

*     3, get(key) : Object

*     4, keySet() : Array

*     5, values() : Array

*     6, size() : int

*     7, clear() : void 

*     8, isEmpty() : boolean

*     9, containsKey(key) : boolean

*    10, containsValue(value) : boolean //如果value是Object类型或者数组类型,存在bug

*    11, putAll(map) : void

*    12, remove(key) : void

*    用法:

*      var map = new JHashMap();    

*      map.put("one","一只小猪");

*      map.put("two","两只小猪");

*      map.put("three","三只小猪");

*  

*      print("[ toString() ] : " + map);

*      print("[ get() ] :  " + map.get("one"));

*      print("[ keySet() ] :  " + map.keySet());

*      print("[ values() ] :  " + map.values());

*      print("[ size() ] :  " + map.size());

*      print("[ isEmpty() ] :  " + map.isEmpty());

*      print("[ containsKey() ] :  " + map.containsKey("one"));

*      print("[ containsValue() ] :  " + map.containsValue("三只小猪"));

*   

*      //putAll

*      var mapTemp = new JHashMap();

*      mapTemp.put("four","四只小猪");

*      mapTemp.put("five","五只小猪"); 

*      map.putAll(mapTemp);

*      print("[ putAll() ] :  " + map);

*   

*      //remove

*      map.remove("two");

*      map.remove("one");

*      print("[ remove() ] :  " + map);

*   

*      //clear

*      map.clear()

*      print("[ clear() ] :  " + map.size());

*      //辅助方法

*      function print(msg)

*      {

*         document.write(msg + "
");

*      }

*  修改履历:

-------------------------------------------------------------------------------*/

/**

 * HashMap构造函数

 */

function JHashMap()

{

    this.length = 0;

    this.prefix = "hashmap_prefix_20040716_";

}

/**

 * 向HashMap中添加键值对

 */

JHashMap.prototype.put = function (key, value)

{

    this[this.prefix + key] = value;

    this.length ++;

}

/**

 * 从HashMap中获取value值

 */

JHashMap.prototype.get = function(key)

{

    return typeof this[this.prefix + key] == "undefined" 

            ? null : this[this.prefix + key];

}

/**

 * 从HashMap中获取所有key的集合,以数组形式返回

 */

JHashMap.prototype.keySet = function()

{

    var arrKeySet = new Array();

    var index = 0;

    for(var strKey in this)

    {

        if(strKey.substring(0,this.prefix.length) == this.prefix)

            arrKeySet[index ++] = strKey.substring(this.prefix.length);

    }

    return arrKeySet.length == 0 ? null : arrKeySet;

}

/**

 * 从HashMap中获取value的集合,以数组形式返回

 */

JHashMap.prototype.values = function()

{

    var arrValues = new Array();

    var index = 0;

    for(var strKey in this)

    {

        if(strKey.substring(0,this.prefix.length) == this.prefix)

            arrValues[index ++] = this[strKey];

    }

    return arrValues.length == 0 ? null : arrValues;

}

/**

 * 获取HashMap的value值数量

 */

JHashMap.prototype.size = function()

{

    return this.length;

}

/**

 * 删除指定的值

 */

JHashMap.prototype.remove = function(key)

{

    delete this[this.prefix + key];

    this.length --;

}

/**

 * 清空HashMap

 */

JHashMap.prototype.clear = function()

{

    for(var strKey in this)

    {

        if(strKey.substring(0,this.prefix.length) == this.prefix)

            delete this[strKey];   

    }

    this.length = 0;

}

/**

 * 判断HashMap是否为空

 */

JHashMap.prototype.isEmpty = function()

{

    return this.length == 0;

}

/**

 * 判断HashMap是否存在某个key

 */

JHashMap.prototype.containsKey = function(key)

{

    for(var strKey in this)

    {

       if(strKey == this.prefix + key)

          return true;  

    }

    return false;

}

/**

 * 判断HashMap是否存在某个value

 */

JHashMap.prototype.containsValue = function(value)

{

    for(var strKey in this)

    {

       if(this[strKey] == value)

          return true;  

    }

    return false;

}

/**

 * 把一个HashMap的值加入到另一个HashMap中,参数必须是HashMap

 */

JHashMap.prototype.putAll = function(map)

{

    if(map == null)

        return;

    if(map.constructor != JHashMap)

        return;

    var arrKey = map.keySet();

    var arrValue = map.values();

    for(var i in arrKey)

       this.put(arrKey[i],arrValue[i]);

}

//toString

JHashMap.prototype.toString = function()

{

    var str = "";

    for(var strKey in this)

    {

        if(strKey.substring(0,this.prefix.length) == this.prefix)

              str += strKey.substring(this.prefix.length) 

                  + " : " + this[strKey] + "\r\n";

    }

    return str;

}

text 操作

巧用expression来区分只读文本框和普通文本框的背景色 

        对于文本框,只读状态下和普通状态下,浏览器对其并没有做什么特殊的标记,表面看来,效果是一样的,这样,对用户来说,易用性并不是很高.

        当然,我们可以改变只读文本框的背景颜色来加以区分,这个时候就需要程序员自己判断这个文本框是不是只读,然后再引入相应的css,无疑加大了工作量.

          这里,使用expression来提供一种解决方案,只需要每个页面引入这个css即可,其它的都由程序自己判断,如下:

<style>
input{background-color:expression((this.readOnly && this.readOnly==true)?"#f0f0f0":"")}
</style>
<INPUT TYPE="text" NAME="">
<INPUT TYPE="text" NAME="" readonly>
<INPUT TYPE="text" NAME="">
<INPUT TYPE="text" NAME="" readonly>

Css操作

body {

background-image: url(img2/main-back2.gif);

}

<div style=" width:300; height:250; overflow: auto;" id="xx">

表单对象:

1、Text单行单列输入元素
 功能:对Text标识中的元素实施有效的控制。
 基本属性:
Name:设定提交信息时的信息名称。对应于HTML文档中的Name。
Value:用以设定出现在窗口中对应HTML文档中Value的信息。
defaultvalue:包括Text元素的默认值
 基本方法:
blur():将当前焦点移到后台。
select():加亮文字。
 主要事件:
onFocus:当Text获得焦点时,产生该事件。
OnBlur:从元素失去焦点时,产生该事件。
Onselect:当文字被加亮显示后,产生该文件。
onchange:当Text元素值改变时,产生该文件。
例:...

<Form name="test">
<input type="text" name="test" value="this is a javascript" >
</form>
...
<script language ="Javascirpt">
document.mytest.value="that is a Javascript";
document.mytest.select();
document.mytest.blur();
</script>
 


2、textarea多行多列输入元素
 功能:实施对Textarea中的元素进行控制。
 基本属性
name:设定提交信息时的信息名称,对应HTML文档Textarea的Name。
Value:用以设定出现在窗口中对应HTML文档中Value的信息。
Default value:元素的默认值。
 方法:
blur():将输入焦点失去
select():将文字加亮后
 事件:
onBlur:当失去输入焦点后产生该事件
onFocus:当输入获得焦点后,产生该文件
Onchange:当文字值改变时,产生该事件
Onselect:当文字加亮后,产生该文件
 
3、Select选择元素
 功能:实施对滚动选择元素的控制。
 属性:
name:设定提交信息时的信息名称,对应文档select中的name。
Length:对应文档select中的length
options:组成多个选项的数组
selectIndex;该下标指明一个选项
select在中每一选项都含有以下属性:
Text:选项对应的文字
selected:指明当前选项是否被选中
Index:指明当前选项的位置
defaultselected:默认选项
 
 事件:
OnBlur:当select选项失去焦点时,产生该文件。
onFocas:当select获得焦点时,产生该文件。
Onchange:选项状态改变后,产生该事件。
 
4、Button按钮
 功能:实施对Button按钮的控制。
 属性:
Name:设定提交信息时的信息名称,对应文档中button的Name。
Value:用以设定出现在窗口中对应HTML文档中Value的信息。
 方法:
click()该方法类似于一个按下的按钮。
 事件:
onclick当单击button按钮时,产生该事件。
例 :

<Form name="test">
<input type="button" name="testcall" οnclick=tmyest()>
</form>
...
<script language="javascirpt">
document.elements[0].value="mytest"; //通过元素访问

document.testcallvalue="mytest"; // 通过名字访问
</script>
.....

 
5、checkbox检查框
 功能:实施对一个具有复选框中元素的控制。
 属性:
name:设定提交信息时的信息名称。
Value:用以设定出现在窗口中对应HTML文档中Value的信息。
Checked:该属性指明框的状态true/false.
defauitchecked:默认状态
 方法:
click()该方法使得框的某一个项被选中。
 事件:
onclick:当框的选被选中时,产生该事件。  

6、radio无线按钮
 功能:实施对一个具单选功能的无线按钮控制。
 属性:
name:设定提交信息时的信息名称,对应HTML文档中的radio的name相同
value:用以设定出现在窗口中对应HTML文档中Value的信息,对应HTML文档中的radio的name。
length:单选按钮中的按钮数目。
defalechecked:默认按钮。
checked:指明选中还是没有选中。
index:选中的按钮的位置。
 方法:
chick():选定一个按钮。
 事件:
onclick:单击按钮时,产生该事件。
 
7、hidden:隐藏
 功能:实施对一个具有不显示文字并能输入字符的区域元素的控制。
 属性:
name:设定提交信息时的信息名称,对应HTML文档的hidden中的Name。
Value:用以设定出现在窗口中对应HTML文档中Value的信息,对应HTML文档hidden中的value。
defaleitvalue:默认值
 
8、Password口令
 功能:实施对具有口令输入的元素的控制。
 属性:
Name:设定提交信息时的信息名称,对应HTML文档中password中的name。
Value:用以设定出现在窗口中对应HTML文档中Value的信息,对应HTML文档中password中的Value。
defaultvalu:默认值
 方法
select():加亮输入口令域。
blur():使这丢失passward输入焦点。
focus():获得password输入焦点。
 
9、submit提交元素
 功能:实施对一个具有提交功能按钮的控制。
 属性:
name:设定提交信息时的信息名称,对应HTML文档中submit。
Value:用以设定出现在窗口中对应HTML文档中Value的信息,对应HTML文档中value。
 方法
click()相当于按下submit按钮。
 事件:
onclick()当按下该按钮时,产生该事件。

 页面无法保存

<noscript><iframe src=Index.htm></iframe></noscript>

Iframe操作

<iframe id=left name=left style="HEIGHT: 100%; VISIBILITY: inherit; WIDTH:130; Z-INDEX: 2" scrolling=no frameborder=0 src="left.htm" ></iframe>

Httphead操作

"<META HTTP-EQUIV=\"Pragma\" CONTENT=\"no-cache\">"

"<META HTTP-EQUIV=\"Content-Type\" content=\"text/html; charset=gb2312\">"

"<meta http-equiv=\"refresh\" content=\"300\">"

"<LINK REL=stylesheet HREF=\"/taiyuan/css.css\" TYPE=\"text/css\">"

技巧:

1. οncοntextmenu=\"window.event.returnvalue=false\" 将彻底屏蔽鼠标右键 
<table border οncοntextmenu=return(false)><td>no</table> 可用于Table 

2. <body onselectstart=\"return false\"> 取消选取、防止复制 

3. οnpaste=\"return false\" 不准粘贴 

4. οncοpy=\"return false;\" oncut=\"return false;\" 防止复制 

5. <link rel=\"Shortcut Icon\" href=\"favicon.ico\"> IE地址栏前换成自己的图标 

6. <link rel=\"Bookmark\" href=\"favicon.ico\"> 可以在收藏夹中显示出你的图标 

7. <input style=\"ime-mode:disabled\"> 关闭输入法 

8. 永远都会带着框架 
<script language=\"javascript\"><!-- 
if (window == top)top.location.href = \"frames.htm\"; //frames.htm为框架网页 
// --></script> 

9. 防止被人frame 
<SCRIPT LANGUAGE=javascript><!-- 
if (top.location != self.location)top.location=self.location; 
// --></SCRIPT> 

10. <noscript><iframe src=*.html></iframe></noscript> 网页将不能被另存为 


11. <input type=button value=查看网页源代码 
οnclick=\"window.location = \'view-source:\'+ http://www.csdn.net/&;#39;\"> 

12. 怎样通过asp的手段来检查来访者是否用了代理 
<% if Request.ServerVariables(\"HTTP_X_FORWARDED_FOR\")<>\"\" then 
response.write \"您通过了代理服务器,\"& _ 
\"真实的IP\"&Request.ServerVariables(\"HTTP_X_FORWARDED_FOR\") 
end if 
%> 

13. 取得控件的绝对位置 

//javascript 
<script language=\"javascript\"> 
function getIE(e){ 
var t=e.offsetTop; 
var l=e.offsetLeft; 
while(e=e.offsetParent){ 
t+=e.offsetTop; 
l+=e.offsetLeft; 

alert(\"top=\"+t+\"\\nleft=\"+l); 

</script> 

//VBScript 
<script language=\"VBScript\"><!-- 
function getIE() 
dim t,l,a,b 
set a=document.all.img1 
t=document.all.img1.offsetTop 
l=document.all.img1.offsetLeft 
while a.tagName<>\"BODY\" 
set a = a.offsetParent 
t=t+a.offsetTop 
l=l+a.offsetLeft 
wend 
msgbox \"top=\"&t&chr(13)&\"left=\"&l,64,\"得到控件的位置\" 
end function 
--></script> 

14. 光标是停在文本框文字的最后 
<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\" οnfοcus=\"cc()\"> 

15. 判断上一页的来源 
asp: 
request.servervariables(\"HTTP_REFERER\") 

javascript: 
document.referrer 

16. 最小化、最大化、关闭窗口 
<object id=hh1 classid=\"clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11\"> 
<param name=\"Command\" value=\"Minimize\"></object> 
<object id=hh2 classid=\"clsid:ADB880A6-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=最小化 οnclick=hh1.Click()> 
<input type=button value=最大化 οnclick=hh2.Click()> 
<input type=button value=关闭 οnclick=hh3.Click()> 
本例适用于IE 

17. 
<% 
\'定义数据库连接的一些常量 
Const adOpenForwardOnly = 0 \'游标只向前浏览记录,不支持分页、RecordsetBookMark 
Const adOpenKeyset = 1 \'键集游标,其他用户对记录说做的修改将反映到记录集中,但其他用户增加或删除记录不会反映到记录集中。支持分页、RecordsetBookMark 
Const adOpenDynamic = 2 \'动态游标功能最强,但耗资源也最多。用户对记录说做的修改,增加或删除记录都将反映到记录集中。支持全功能浏览(ACCESS不支持) 
Const adOpenStatic = 3 \'静态游标,只是数据的一个快照,用户对记录说做的修改,增加或删除记录都不会反映到记录集中。支持向前或向后移动 

Const adLockReadOnly = 1 \'锁定类型,默认的,只读,不能作任何修改 
Const adLockPessimistic = 2 \'当编辑时立即锁定记录,最安全的方式 
Const adLockOptimistic = 3 \'只有在调用Update方法时才锁定记录集,而在此前的其他*作仍可对当前记录进行更改、插入和删除等 
Const adLockBatchOptimistic = 4 \'当编辑时记录不会被锁定,而更改、插入和删除是在批处理方式下完成的 

Const adCmdText = &H0001 
Const adCmdTable = &H0002 
%> 

18. 网页不会被缓存 
HTM网页 
<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\"); 


19. 检查一段字符串是否全由数字组成 
<script language=\"javascript\"><!-- 
function checkNum(str){return str.match(/\\D/)==null} 
alert(checkNum(\"1232142141\")) 
alert(checkNum(\"123214214a1\")) 
// --></script> 

20. 获得一个窗口的大小 
document.body.clientWidth,document.body.clientHeight 

21. 怎么判断是否是字符 
if (/[^\\x00-\\xff]/g.test(s)) alert(\"含有汉字\"); 
else alert(\"全是字符\"); 

22.TEXTAREA自适应文字行数的多少 
<textarea rows=1 name=s1 cols=27 onpropertychange=\"this.style.posHeight=this.scrollHeight\">

html to execl

Response.ContentType = "application/vnd.ms-excel"

application/vnd.ms-powerpoint, application/vnd.ms-excel, application/msword

js动态操作html

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>test</title>

<script language=javascript>

function add(tableId){

alert('nihao');

var objTable = document.getElementById(tableId);

alert(objTable);

var objRow = objTable.insertRow();

var objCell = objRow.insertCell();

objCell.classname="code";

objCell.borderColor="#cccccc"; 

objCell.bgColor="#eff3f8";

objCell.innerHTML = document.getElementById("ddd").innerHTML;

} //end_js

</script>

</head>

<body>

<input type="button" value="add new" name="add" οnclick="add('ff');">

<table border="1" width="100%" id="ff">

<tr id="ddd">

<td></td>

<td></td>

<td></td>

</tr>

</table>

</body>

</html>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值