- 浏览: 49536 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
网页编程的学习笔记
网页编程的学习笔记
一、JavaScript
0-1基本Html语言
n(1)超链接指定目标网页的Name
<Ahref="a1.htm"target="xzy">连结</A>
一般情况下超链接打开的目标网页是在本网页之内打开的,但是利用上面的代码可以在新窗口中打开目标网页,再重新打开时仍然在已经开启的目标网页中显示.
n(2)框架中指定子网页的Name
上面的网页框架中,点击下面的产生随机数时,上面的数字会随着刷新
框架代码
<HTML>
<HEAD>
<title>Frames</title>
</HEAD>
<FRAMESETROWS="50%,50%">
<FRAMESRC="a1.html"name="xzy1">
<FRAMESRC="a2.html"name="xzy2">
</FRAMESET>
</HTML>
上部的网页代码
<html>
<head>
</head>
<body>
<script>
document.writeln(Math.random());
</script>
</body>
</html>
下部网页代码
<html>
<head>
</head>
<body>
<Ahref="a1.html"target="xzy1">产生新随机数</A>
</body>
</html>
nJS提交表单数据语法
Document.formName.submit();
n(3)在网页总嵌套其它网页(Ifame)
<IFRAMEsrc="太原办公厅.htm"name="zhidu"frameBorder=0scrolling="yes"width=420height=355></IFRAME>
去掉frameBorder=0,则IFRAME带上边框
scrolling="no"则没有了调整位置的滚动条
把Iframe中添到层中可以随着层改变位置
点击按钮更改Iframe的网页内容
<inputtype="button"value="按钮"name="B3"onclick="
pdfshow.document.location='url';
">
<iframeid=pdfshowscrolling="yes"align="center"
frameBorder=1width="100%"height="100%"
>
</iframe>
第二个例子程序
<inputtype="button"value="a"name="B3"onclick="pdfshow.document.location='aa.htm';alert(location.href)"><br>
<inputtype="button"value="b"name="B4"onclick="pdfshow.document.location='bb.htm';">
<br>
<IFRAMEid=pdfshowalign=left
src=""frameBorder=1width=300scrolling=yes
height=200>
</IFRAME>
注意修改目标地址的时候,不能随便写,如写程sohu和csdn则会报错,”权限拒绝”,要在自己目录下的(好象同一个网站下的也应该行吧)
n(4)YesNo提示框
functionpushbutton()
{
v=confirm("完全删除后将无法恢复，请您确认是否继续?");
if(v)
alert('yesclicked');
else
alert('noclicked');
}
n设置文本输入框的读写属性
window.document.getElementById('nodeName').readOnly=false;
window.document.getElementById('nodeTops').readOnly=false;
n选取文本框中的文本函数
window.document.getElementById('nodeName').select();
n(5)在超链接中执行函数
<ahref=”javascript:void(0)”>：本例功能是不执行任何操作
：<ahref=”javascript:alert('cctv');”>：显示提示框
n(6)下拉选择框的几个属性
下拉选择框的名字是D1
<1>获得D1中有几个元素:alert(D1.options.length);
<2>追加一个新元素,cctv
functionAddNew()
{
varMycat=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;
}
n(7)网页打开时加载另外一个内容
<metahttp-equiv="refresh"content="0;url=http://www.sohu.com">
n(8)避免重复open窗体
if(this.name!='fullscreen'){
setTimeout("window.opener=null;window.close();",500);
window.open(location.href,'fullscreen','fullscreen,scrollbars');
}
n（9）加入CSS
<linkrel="stylesheet"type="text/css"href="../style/style.css">
n(10)加入js文件
<scriptsrc="xtree.js"></script>
000各种事件
n(1)onLoad
<bodyonLoad="scroll()">
在网页刷新,启动时调用指定的函数.
n(2)onunload
<bodyonload="scroll()"onunload="alert('关闭')">
n(3)onClick
onclick=pushbutton("你好")//单击调用函数Click
n(4)onblur也就是LostFocus
onblur=Message(this.value)//丢失焦点LostFocus
n(5)OnMouseOver:当鼠标移进区域时执行,MouseIn
onmouseover="window.status='Justanotherstupidlink...';returntrue"//鼠标移过MouseMove
JavaScript代码可以直接写在Html的<>内,如:
<Aonmouseover="vara;a=30;alert('我'+a+'岁');document.writeln('abc');"href="00Readme.htm">连结</A>
这将显示一个超链接,连接的目标是00Readme.htm,当鼠标移动到该超链接上时,则执行JavaScript代码.
n(6)onMouseOut鼠标移出
<inputtype="button"value="按钮"name="B3"onMouseOut="alert('c');">
n(7)onMouseMove鼠标在区域内移动
<bodyonmousemove="move();">
n(8)onSelect:反白选择其上的文字或元素时
<bodyonSelect="window.status=Math.random();">
反白选择网页上一个元素或文字时执行本事件,每多反白一个则执行一遍.
对象得到焦点：
dateForm.select()
n(9)onChange
text框内容发生变化时激发
000_1常用的元素状态设置
说明,本节使用的代码都是设置按钮或图片等元素的外观或动作的
如<inputstyle="CURSOR:hand"type="button"value="按钮"name="B3"ID="Button1">
可以把移动到按钮上的鼠标形状为手指形状
多个状态设置时用;分开
n(1)设置鼠标的外观
style="CURSOR:hand"
n(2)设置为不可见
style="display:none;CURSOR:hand"
可见是style="display:inline;CURSOR:hand"
关于js检测浏览器关闭事件(-)
<scripttype='text/javascript'>
functionpromptOnClose(e){
//e=e?e:windowevent;
varpromptString='你要关闭浏览器吗?';
//event.returnValue=promptString;
returnpromptString;
}
if(window!=top){
top.location.href="http://www.baidu.com";
}else{
if(window.Event){
window.onbeforeunload=function(event){
returnpromptOnClose(event);
}
}else{
window.onbeforeunload=function(){
returnpromptOnClose(event);
}
}
}
</script>
关于浏览器检测浏览器关闭事件(二)
001常用JavaScript代码
n三目运算（？：）
<script>
a=5
alert(a>3?"111":"111no")//显示：111
alert(a<3?"222":"222no")//显示：222no
</script>
n(0)把函数写在其它文件中(类似C中的include,或inline)
<SCRIPTsrc="module/images.js"></SCRIPT>
把函数卸载module目录下的images.js(也可以是其它扩展名)文件中,便可以在本文件中使用,相当于把那段代码写在这个地方一样.
如images.js的内容可以这么写
functionX()
{
alert("a");
}
把这些函数写上就可以了,
n(1)在状态条上书写字符串
window.status="显示在状态条上";
n(2)Alert
alert("cctv";或alert('cctv');
n(3)输出文字
document.writeln("abc");
document.writeln()在网页初始加载时,输出的文字会产生在源代码中,但是加载网页后再执行某些函数内执行的document.writeln();则会将整个网页的代码全部替换为输出的文字,所以document.writeln最好只在加载时执行一遍,它也可以创建元素,在网页中使用过程中最好不要执行document.writeln,
<html>
<head>
</head>
<bodybgcolor="pink">
<script>document.writeln("abc");</script>
<inputonclick="document.writeln('abc');"type="button"value="按钮"name="B3"style="CURSOR:hand"ID="Button1">
</body>
</html>
第一次会显示abc并且有按钮,当点击按钮时,源代码就只剩下了abc其它文字全没有了
n(4)数学运算
vari;
i=Math.random();
Math的都是数学方面的运算,包括sin,cos等等
n(5)打开一个网页
Ø①在新窗口中打开
<html>
<head>
<script>
functionMyOpen(url)
{
msg=open(url,"xzy");
}
</script>
</head>
<body>
<inputtype="button"name="Button2"value="按钮"onclick="MyOpen('00Readme.htm')"ID="Button1">
</body>
</html>
Ø②在当前网页打开
<script>
location="http://www.sohu.com";
</script>
只要网页一执行这个代码,就会把网页引导到指定的目标上,若像这样写在body之间,只要一打开网页就去了sohu上,不会显示本网页的内容
也可以把location=””放在onclick中或其它事件中,则可以导引网页到sohu上.
n(5_01)可以互相打开的地址函数
网页a1.htm和a2.htm,在a2上编制了一个通用的过程,只要按照一定的规则打开a2,则a2可以再返回到a1上
a1.htma2.htm
n(6)使用数组
Ø基本操作
<script>
vara=newArray("cctv","sxtv","tytv");
vara=newArray(3);
vara=newArray();
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(stringval)可以将数组元素连接起来,并且用中间插入val,
当在网页上交互显示下拉框内容的时候可以将内容加载到数组内,再利用innerHTML将内容显示在出来
<script>
vara=newArray("cctv","sxtv","tytv");
vara=newArray(3);
vara=newArray();
a[0]="cctv";
a[1]="sxtv";
a[2]="tytv";
a[3]="xzy";
document.writeln(a.join('<br>'));
</script>
显示:
cctv
sxtv
tytv
xzy
Ø数组排序
vararr=newArray(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]);
}
n(7)网页的后退和前进
history.back()
history.forward()
history.go(1)go(-1)go(-2)
n(8)类型转换
Ø①字符串转为整数
vara1;
a1=parseInt(”88”);
n(9)设置焦点
document.first.text1.focus();
n(10)设置背景色
document.bgColor=255;
n(11)日期函数
varD=newDate();返回的是当前日期
varD=newDate(1995,10,11);
D.setHours(15);
给日期类型赋值
n(12)使用网页地址的一些信息
<script>
vars;
//这里测试用的地址是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>
n(13)打开新链接
window.location="http://192.168.1.169:81/postinfo.html";
window就是打开的IE浏览器,windows有很多属性,可以通过.看出
n(14)关闭IE浏览器
window.close();可以直接将页面关闭了，但是在直接打开的网页上有确认关闭的提示，如果是通过超连接到新窗口打开的网页，则关闭时没有提示。
<atarget="_blank"href="a.htm">ggg</a>则在a.htm中有window.close的话可以直接关闭。
无提示框的（好像不能用）
<html>
<head>
<objectid=closestype="application/x-oleobject"classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"VIEWASTEXT>
<paramname="Command"value="Close">
</object>
</head>
<bodybgcolor="pink">
<inputonclick="closes.Click();"type="button"value="关闭"name="B3"style="CURSOR:hand"ID="Button1">
</body>
</html>
可以直接关闭,没有任何提示
n(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>
我是邢志云
<ahref="http://www.sohu.com"target=_blank>cctv</a>
<ahref="http://ddd"target=_blank>cctv</a>
</body>
</html>
n(16)数据输入提示窗口
<HTML>
<Head>
<scriptlanguaga="JavaScript">
<Html>
<head>
</head>
<body>
<script>
vartest=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>
我是邢志云
<ahref="http://www.sohu.com"target=_blank>cctv</a>
<ahref="http://ddd"target=_blank>cctv</a>
</body>
</html>
n(17)控制文字的显示：
<astyle="display:inline;color:#ff0000">aaa</a>
display:none时不显示文字
完整的代码
<html>
<head>
<title>NewPage1</title>
<script>
functionMake()
{
if(document.all.text1.style.display=="none")
document.all.text1.style.display="inline";
else
document.all.text1.style.display="none"
}
</script>
</head>
<body>
<aname=text1style="display:inline;color=#FF0000;font=32">真有趣!</a>
<br>
<inputonclick="Make();"type="button"value="按钮"name="B3"style="CURSOR:hand"ID="Button1">
</body>
</html>
n(18)只能输入数字的文本框
<body>
<script>
functionJHshNumberText()
{
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;
}
}
</script>
<formname=frm>
<inputtype=textname=testvalue=""onKeypress="JHshNumberText()">
<inputtype=buttonname=submitvalue=submit>
</form>
</body>
nswitch
switch(j)
{
case0:
wtab.rows[iRow].cells(j).innerHTML=xuhao+"";wtab.rows[iRow].cells(j).align="right";
break;
case1:
wtab.rows[iRow].cells(j).innerHTML=""+mc;wtab.rows[iRow].cells(j).align="left";
break;
case2:
wtab.rows[iRow].cells(j).innerHTML=""+shifou;wtab.rows[iRow].cells(j).align="left";
break;
case3:
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;
}
n19、客户端数据校验的通用解决之道----妙用自定义属性
我们知道，HTML的文本框元素可以使用type,name,value,size,maxlength,style,id等固有属性，但你可曾想到，我们还可以自定义一些属性呢。笔者是在一个极其偶然的机会里发现这个小秘密的，并且没有想到的是，这个小秘密竟然可以帮我们很大的忙----实现客户端数据的通用校验，自此客户端校验工作容易做了，不用再为每个FORM表单劳神又费力地写Javascript校验代码了。
请看下面的测试网页univerify_test.html：
|
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"> <html> <head> <title>基于自定义属性的客户端统一检测方法</title> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"> </head> <scriptlanguage="javascript"src="univerify.js"></script> <body> <br> <br> <center>基于自定义属性的客户端统一检测方法</center> <formname="form1"method="post"action="" onsubmit="returnverifyAll(form1);"> <center> <TABLEalign="center"border="1"borderColor="#aaeeff" cellPadding="1"cellSpacing="0"width="580"> <tr> <td><imgid=img_NAMEsrc="img/space.gif"></td> <td>姓名:</td> <td><inputtype="text"name="NAME"chname="姓名" size="10"maxlength="10"maxsize="10"nullable="no" datatype="text"onBlur="verifyInput(this);"> <fontcolor="red">*</font></td> </tr> <td><imgid=img_AGEsrc="img/space.gif"></td> <td>年龄：</td> <td><inputtype="text"name="AGE"chname="年龄" size="3"maxlength="3"maxsize="3"nullable="no" datatype="number"onBlur="verifyInput(this);"> <fontcolor="red">*</font></td> <tr> <td><imgid=img_ADDRESSsrc="img/space.gif"></td> <td>住址：</td> <td><inputtype="text"name="ADDRESS"chname="住址" size="40"maxlength="100"maxsize="100"nullable="yes" datatype="text"onBlur="verifyInput(this);"></td> </tr> <trheight=48px> <tdcolspan=3align=center><inputtype="submit" name="Button"value="检测全部输入并提交"></td> </tr> </table> </center> </form> </html> |
上述网页的表单form1中有三个文本框，姓名(NAME)、年龄(AGE)和住址(ADDRESS)。笔者为这三个文本框中自行定义了四个新属性，分别是:
1、chname：表示该数据的中文名称，用于校验出错时显示用。
2、maxsize：表示允许输入的最大长度，这个长度是以节字计算的。
3、nullable：表示输入值是否允许为空。为yes时允许为空。
4、datatype：表示输入值的数据类型。这个数据类型用户可以根据需要自行定义，需要注意的是，对于每一个新的数据类型，均需要在下面将要讲述的Javascript文件univerify.js中添加相应的校验函数，从而实现统一校验。
三个文本框都对失去焦点事件进行捕获：onBlur="verifyInput(this);"。在失去焦点时用verifyInput校验一下此文本框的值是否合法。
form1表单对onsubmit事件进行了捕获：onsubmit="returnverifyAll(this);"。在用户提交表单时，用verifyAll对此表单的元素的值统一进行检测，验证其合法性，保证存入数据库时不出现异常。
上述网页引用的Javascript函数库univerify.js内容如下：
|
/******************************************************/ /*文件名：univerify.js*/ /*功能：基于自定义属性的统一检测用Javascript函数库*/ /*作者：纵横软件制作中心雨亦奇(zhsoft88@sohu.com)*/ /******************************************************/ /*取得字符串的字节长度*/ functionstrlen(str) {vari; varlen; len=0; for(i=0;i<str.length;i++) { if(str.charCodeAt(i)>255)len+=2;elselen++; } returnlen; } /*检测字符串是否为空*/ functionisnull(str) { vari; for(i=0;i<str.length;i++) { if(str.charAt(i)!='')returnfalse; } returntrue; } /*检测字符串是否全为数字*/ functionisnumber(str) { varnumber_chars="1234567890"; vari; for(i=0;i<str.length;i++) { if(number_chars.indexOf(str.charAt(i))==-1)returnfalse; } returntrue; } /*检测指定文本框输入是否合法*/ functionverifyInput(input) { varimage; vari; varerror=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; /*在这里可以添加多个自定义数据类型的校验判断*/ /*casedatatype1:...;break;*/ /*casedatatype2:...;break;*/ /*....................................*/ default :break; } } /*根据有无错误设置或取消警示标志*/ if(error) { image=document.getElementById("img_"+input.name); image.src="img/warning.gif"; returnfalse; } else { image=document.getElementById("img_"+input.name); image.src="img/space.gif"; returntrue; } } /*检测指定FORM表单所有应被检测的元素 （那些具有自定义属性的元素）是否合法，此函数用于表单的onsubmit事件*/ functionverifyAll(myform) { vari; 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(); returnfalse; } } returntrue; } |
在univerify.js中，verifyAll用来校验指定表单的数据，它是逐个提取表单中的元素的，不用特别指定表单元素的名字，所以具有通用性。verifyInput是用来实际执行数据校验的函数，如果有新的数据类型datatype需要检测，用户可在此函数中添加，可扩充性好。
下面是浏览univerify_test.html网页的画面：
使用基于自定义属性的客户端统一检测方法，需要做的工作很简单：
1、在网页文件中嵌入统一检测用Javascript函数库：<scriptlanguage="javascript"src="univerify.js"></script>
2、对所用表单添加onsubmit事件处理程序：onsubmit="returnverifyAll(this);"。其中的this指定为当前表单对象，勿需提供表单具体名字,极具通用性。
3、对每个需要检测的文本框添加chname,maxsize,nullable和datatype四个自定义属性。如果想在文本框失去焦点时对数据进行一下校验，请添加事件处理程序：onBlur="verifyInput(this);"。
怎么样？使用基于自定义属性的客户端统一检测方法后，不用再为每个表单写类似的检测代码了吧，统一检测足够了。
小结：自定义属性是非常有用的属性，基于自定义属性的客户端数据统一检测方法，在B/S开发中极其有用，使用方便，可扩充性强。相信读者经过实践，自能体会到个中妙处。
0015获取地址内输入的参数
在调用网页的时候地址写入:http://localhost:8080/jsp1.jsp?st=d&xzy=cctv,则点击按钮会显示cctv.
<script>
//从url字符串中提取变量的值
functionGetQueryValue(sorStr,panStr)
{
varvStr="";
if(sorStr==null||sorStr==""||panStr==null||panStr=="")returnvStr;
sorStr=sorStr.toLowerCase();
panStr+="=";
varitmp=sorStr.indexOf(panStr);
if(itmp<0){returnvStr;}
sorStr=sorStr.substr(itmp+panStr.length);
itmp=sorStr.indexOf("&");
if(itmp<0)
{
returnsorStr;
}
else
{
sorStr=sorStr.substr(0,itmp);
returnsorStr;
}
}
functiongetcookieval(offset)
{
varendstr=document.cookie.indexOf(';',offset);
if(endstr==-1)endstr=document.cookie.length;
returnunescape(document.cookie.substring(offset,endstr));
}
//从cookcie中获得
functiongetcookie(name)
{
vararg=name+'=';
varalen=arg.length;
varclen=document.cookie.length;
varj=0;
while(j<clen)
{
vark=j+alen;
if(document.cookie.substring(j,k)==arg)returngetcookieval(k);
j=document.cookie.indexOf('',j)+1;
if(j==0)break;
}
returnnull;
}
</script>
<html>
<head>
<title>
jsp2
</title>
</head>
<bodybgcolor="#ffffff">
<inputname=""type="button"value="显示"onClick="alert(GetQueryValue(document.location.search,'xzy'))">
<h1>
你好中央电视台a
</h1>
</body>
</html>
002简单的文字输出
在html中直接输入下面的代码，就可以把文字输出来
<scriptlanguage="LiveScript">
document.write("<fontcolor='red'>JavaPrint</font>")
</script>
还可以循环,显示10行红色的文字
<html>
<head>
</head>
<body>
<script>
for(a=0;a<10;a++)
document.write("<fontcolor='red'>JavaPrint</font><br>")
</script>
</body>
</html>
这可以生成动态的Html代码，用这种方法可以动态地创建Html元素，如层的动态创建用的就是这种方法。
003第一个函数
先显示一个提示框,再显示10行文字
<html>
<head>
<script>
functionpushbutton(str)
{
alert(str);
}
</script>
</head>
<body>
<script>
pushbutton("我们都是大好人");
for(a=0;a<10;a++)
document.write("<fontcolor='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>
functionpushbutton(str)
{
alert(str);
}
</script>
</head>
<body>
<p><inputtype="button"value="按钮"name="B3"onclick=pushbutton("你好")></p>
</body>
</html>
005丢失焦点时引发事件,显示本文本框的文字
<html>
<head>
<script>
functionMessage(str)
{
alert(str);
}
</script>
</head>
<body>
<p><inputtype="text"onblur=Message(this.value)name="T1"size="20"ID="Text1"></p>
</body>
</html>
this.value是引发事件的实体的值,在按钮中也可以这么用.
直接写成<p><inputtype="text"onblur=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>
vartoday=newDate();
vars=newString();
//02/20/200316:07:16
s=document.lastModified;
//最后更新日期:02/20/200316:17:22<BR>
document.writeln("最后更新日期:"+s+"<br>");
//最后更新日期:2003年02月20日
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()+"日";
//今天是:2003年2月20日
document.writeln(s);
</script>
</body>
</html>
008鼠标移过超链接时执行的操作
<Aonmouseover="window.status='Justanotherstupidlink...';returntrue"
href="00Readme.htm">连结</A>
009产生随机数
<script>
vari;
vartoday=newDate();
i=Math.random();//Math.abs(Math.sin(today.getTime()));
document.write("Thisisarandomnumber:"+i);
</script>
010打开新窗体
<html>
<head>
<script>
functionNewWindow()
{
//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>
<inputtype="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/yesyes时显示一个全屏的窗体 directories=yes/nono时,显示的窗体没有工具条,不能调整大小,只能关闭 fullscreen=no/yesyes时,显示一个真正的全屏界面,没有任何操作按钮,只能用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.Whenopeninganewdocument,sUrlisaStringthatspecifiesaMultipurposeInternetMailExtensions(MIME)typeforthedocument.Whenopeninganewwindow,sUrlisaStringthatspecifiestheURLtorenderinthenewwindow.IfasUrlisnotspecified,anewwindowwithabout:blankisdisplayed.
|
||||||||||||||||||||||||||||
|
sName |
Optional.Whenopeningupanewdocument,specifyingtheStringreplaceforsNamedesignatesthatthenewdocumentistoreplacethecurrentdocumentinthehistorylist.Ifthevaluereplaceisnotspecifiedwhenopeningupadocument,anewentrywillsimplybeaddedtothehistorylist.Whenopeningawindow,thisisaStringthatspecifiesthenameofthewindow.ThevalueofthisparametermaybespecifiedasthevalueoftheTARGETattributeforaformoraelement.Thisvaluewillthenwilldefinethisnewwindowastheplacetoloadadocument.
|
||||||||||||||||||||||||||||
|
sFeatures |
Optional.ThisStringisonlyusedwhenopeninganewwindowandspecifiesthesettingsofthewindow'sdisplayfeatures.Thisparameterisalistofitemsseparatedbycommas.Eachitemconsistsofanoptionandavalue,separatedbyanequalssign(forexample,"fullscreen=yes,toolbar=yes").Thefollowingfeaturesaresupported.
|
||||||||||||||||||||||||||||
|
bReplace |
Optional.WhenthesUrlisloadedintothesamewindow,thisBooleanparameterspecifieswhetherthesUrlcreatesanewentryorreplacesthecurrententryinthewindow'shistorylist.
|
ReturnValue
Returnsareferencetothenewdocumentorwindowobject.Usethisreferencetoaccesspropertiesandmethodsofthenewdocumentorwindow.
Window.open(“”,””,”scrollbars=yes,status=yes,toolbar=no,menu=no,resizable=1”)
010.1打开一个模式窗体
<script>
vararr=showModalDialog("index.jsp","","dialogWidth:18.5em;dialogHeight:11.5em;status:0");
alert('cctv');
</script>
showModalDialog：是一个模式对话框，显示后下面的窗体便不能操作了，除非将模式窗体关闭,相当于vb中的from1.show1
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}［ＩＥ５＋］：是否可被改变大小。默认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()(IE4+支持)
showModelessDialog()(IE5+支持)
window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框，由于是对话框，因此它并没有一般用window.open()打开的窗口的所有属性。
window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。
当我们用showModelessDialog()打开窗口时，不必用window.close()去关闭它，当以非模态方式［IE5］打开时，打开对话框的窗口仍可以进行其他的操作，即对话框不总是最上面的焦点，当打开它的窗口ＵＲＬ改变时，它自动关闭。而模态［ＩＥ４］方式的对话框始终有焦点（焦点不可移走，直到它关闭）。模态对话框和打开它的窗口相联系，因此我们打开另外的窗口时，他们的链接关系依然保存，并且隐藏在活动窗口的下面。
使用方法如下：
vReturnValue=window.showModalDialog(sURL[,vArguments][,sFeatures])
vReturnValue=window.showModelessDialog(sURL[,vArguments][,sFeatures])
参数说明：
sURL
必选参数，类型：字符串。用来指定对话框要显示的文档的URL。
vArguments
可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
sFeatures
可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。
dialogHeight对话框高度，不小于１００px，ＩＥ４中dialogHeight和dialogWidth默认的单位是em，而ＩＥ５中是px，为方便其见，在定义modal方式的对话框时，用px做单位。
dialogWidth:对话框宽度。
dialogLeft:距离桌面左的距离。
dialogTop:离桌面上的距离。
center:{yes|no|1|0}：窗口是否居中，默认yes，但仍可以指定高度和宽度。
help:{yes|no|1|0}：是否显示帮助按钮，默认yes。
resizable:{yes|no|1|0}［ＩＥ５＋］：是否可被改变大小。默认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>
varmxh1=newArray("mxh","net_lover","孟子E章")
varmxh2=window.open("about:blank","window_mxh")
//向对话框传递数组
window.showModalDialog("test2.htm",mxh1)
//向对话框传递window对象
window.showModalDialog("test3.htm",mxh2)
</script>
test2.htm
====================
<script>
vara=window.dialogArguments
alert("您传递的参数为："+a)
</script>
test3.htm
====================
<script>
vara=window.dialogArguments
alert("您传递的参数为window对象，名称："+a.name)
</script>
可以通过window.returnValue向打开对话框的窗口返回信息，当然也可以是对象。例如：
test4.htm
===================
<script>
vara=window.showModalDialog("test5.htm")
for(i=0;i<a.length;i++)alert(a[i])
</script>
test5.htm
===================
<script>
functionsendTo()
{
vara=newArray("a","b")
window.returnValue=a
window.close()
}
</script>
<body>
n网页间数据的传递
可以向用showModalDialog和showModelessDialog打开的窗体传递参数，参数可以是字符串，也可以是对象，如数组或窗体对象
例子：test1.htm打开test2.htm，并向test2.htm传递一个数组对象作为参数
test1.htm
<script>
varxzy=newArray(3);
xzy[0]="孙悟空";
xzy[1]="猪八戒";
xzy[2]="唐僧";
//向对话框传递数组
window.showModelessDialog("test2.htm",xzy)
</script>
test2.htm
<script>
vara=window.dialogArguments//读出传递过来的参数
alert("您传递的参数为："+a.join("[和]"));
</script>
下面是传递document对象的例子
test1.htm
<script>
functiont()
{
alert('被调用了');
}
</script>
<inputtype="text"name="T1"size="20"ID="Text1">
<INPUTonclick="window.showModelessDialog('test2.htm',document);"type=buttonvalue="打开另外一个网页"name=button1size=5>
test2.htm
<script>
varlastwindow=window.dialogArguments
</script>
<INPUTonclick="lastwindow.all.T1.value=Math.random();"type=buttonvalue="设置上一个网页的值"name=button1size=5>
下面是个传递窗体对象的代码
<script>
varmxh2=window.open("about:blank","window_mxh")
//向对话框传递window对象
window.showModalDialog("test3.htm",mxh2)
</script>
011在框架中的子网页调用其它子网页内的函数
上面网页中使用了框架,点击下边超链接时上边的网页显示一个随机数,点击按钮时,调用上边网页内的一个函数,onclick="parent.xzy1.Print('这是由按钮产生的文字')",,上边网页将传入的参数显示出来.
|
框架 |
<HTML> <HEAD> <title>Frames</title> </HEAD> <FRAMESETROWS="50%,50%"> <FRAMESRC="a1.html"name="xzy1"> <FRAMESRC="a2.html"name="xzy2"> </FRAMESET> </HTML> |
|
上部网页 |
<html> <head> <script> functionPrint(Str) { alert(Str); } </script> </head> <body> <script> document.writeln(Math.random()); </script> </body> </html> |
|
下部网页 |
<html> <head> </head> <body> <Ahref="a1.html"target="xzy1">产生新随机数</A> <inputtype="button"value="按钮"name="B3"onclick="parent.xzy1.Print('这是由按钮产生的文字')"> </body> </html> 当超链接使用<Ahref="a1.html"TARGET="_top">产生新随机数</A> 时,目标网页可以充满整个frame. |
012与原启动窗口互动：
window.opener.document.form1.text1.value=””;
013使用定时器
JavaScript中的定时器是利用一个函数,setTimeout(调用函数,延时),下面的程序会在显示网页的状态栏中不停地显示一个随机数
<html>
<head>
<script>
functionscroll()
{
window.status=Math.random();
setTimeout("scroll()",300);//300ms
}
</script>
</head>
<bodyonLoad="scroll()">
</body>
</html>
013读取和设置网页上元素的值
n例子1,用名称访问
这里以一个网页的加法器来示范,如何读取和设置,Text框的文字.
<html>
<head>
<script>
functionMake()
{
vara1;
vara2
vara3;
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>
<FORMname=first>
<INPUTname=text1value="0"size=5>+
<INPUTname=text2value="0"size=5>
<INPUTonclick="Make()"type=buttonvalue="输入测试"name=button1size=5>
<INPUTname=text3size=5>
</FORM>
</body>
</html>
n(2)例子2，用数组访问
本例的功能:2个text框的内容保持一致,当一个改变时,另外一个也相应的改变.
窗体和上面的元素都是可以通过数组来访问的.
<Html>
<head>
</head>
<body>
<formName="Form1">
<!--Form2的第一个元素的值和本元素的值相同-->
1:<inputtype=textonChange="document.Form2.elements[0].value=this.value;"ID="Text1"NAME="Text1">
</form>
<!--网页上第一个窗体的第一个元素的值和本元素的值相同-->
<formNAME="Form2">
2:<inputtype=textonChange="document.forms[0].elements[0].value=this.value;"ID="Text2"NAME="Text2">
</form>
</body>
</html>
n(3)实现邮箱中全选的功能（遍历窗体对象）
本例实现的功能,当点中全选按钮时,所有的信件全被选中,并显示删除图片,且图片的鼠标是手(hand)形状的
初始点击全选时
完整的代码
<html>
<head>
<script>
functiont()
{
vari;
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中,代码可以短些
varelems=window.document.forms[0].elements;
for(vari=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>
<bodybgcolor="pink">
<formname="f1">
<p><inputtype="checkbox"name="C1"value="ON">信件1</p>
<P><inputtype="checkbox"name="C2"value="ON">信件2</P>
<P><inputtype="checkbox"name="C3"value="ON">信件3</P>
<p><inputtype="checkbox"name="C4"value="ON">信件4</p>
<p><inputtype="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行文字
<divid="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>
functionmove(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>
<SCRIPTlanguage="javascript">
<!--
varx,y;//声明存放当前鼠标位置坐标的变量
functionmove()
{//移动图层的函数
//获取当前鼠标位置的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>
<bodyonmousemove="move();">
<divid="div1"style="position:absolute;left:250px;top:118px;background-color:#FFFF99;width:60px;height:37px;z-index:"50">
这是测试的层
</div>
</body>
</html>
016使用宏替换eval
设图层上有一个层,名字叫Layer1,可以用下面的代码利用字符串型的层名字来指向实际的层.
|
varl; vars; s="Layer1"; l=eval(s); l.style.posTop=200; |
varl; vari; 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、一个字符串编码再解码的过程
functiona()
{
varstr="你好B.,#ccsldfk";
vars2=EnCode(str);
alert(UnCode(s2));
}
//将str转换为编码用x分割如:20320x65x66x67x
functionEnCode(str)
{
vars;
varn;
s="";
for(n=0;n<str.length;n++)
s=s+str.charCodeAt(n)+"x";
returns;
}
//将EnCode转换出的编码串再转为字符串
functionUnCode(str)
{
vari;
varscode;
varrs;
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);
}
returnrs;
}
020span,div,动态html
点击添加后文字显示到
functionInsert()
{
vars;
s=document.all.ShowArea.innerHTML;
document.all.ShowArea.innerHTML=s+'<br>'+document.all.text1.value;
//innerHTML可以写入html控制,如果用innerText则html控制也会被显示出来,被作为普通的字符处理.
document.all.text1.value='';
document.all.text1.focus();
}
</script>
<INPUTname=text1value=""size=5>
<inputname=""type="button"value="添加"onClick="Insert()">
<spanid='ShowArea'></span>
<!--用div也可以
<divid='ShowArea'></div>
-->
<br>
<hr>
邢志云的测试
这是非常好的性能,可以在网页上显示出任意的动态代码.
Span和div都可以作为嵌入式代码的载体,如可以在span的首尾写上表格的控制,然后在span内填写表体的代码.
<tableborder="1"width="100%"id="table1">
<divid='ShowArea'>
<tr>
<td> </td>
<td> </td>
</tr>
</div>
</table>
021动态生成表格
<script>
functionInsert()
{
varrow;
varcell;
vartbody=表格.childNodes[0];
表格.appendChild(tbody);
for(vari=0;i<10;i++)//10行
{
row=document.createElement("TR");
tbody.appendChild(row);
for(varj=0;j<5;j++)//5列
{
cell=document.createElement("TD");
row.appendChild(cell);
cell.innerText="Row"+i+",Cell"+j;
}
}
}
</script>
<inputname=""type="button"value="添加"onClick="Insert()">
<TABLEID="表格"BORDER="1"></TABLE>
删除表格节点
表格.removeNode(true);
022使用createElement来动态创建网页元素,按钮文本框都可以
n基本
<script>
functionInsert()
{
node=document.createElement("SPAN");//创建一个span元素
node.innerText="使用innerText属性<br>";//这里的<br>不会表示为回车,因为用的是innerText所以<br>会被当作普通的文本显示出来.
divUpdate.appendChild(node);
}
</script>
<inputname=""type="button"value="添加"onClick="Insert()">
<br>
<DIVid=divUpdate></DIV>
<hr>
n带事件的
<script>
functionInsert()
{
node=document.createElement("input");//创建一个span元素
node.type="text";
node.id="text1";
node.fi="dd";
node.onclick=function(){alert('dd');}
divquery.appendChild(node);
}
</script>
<html>
<head>
<title>
卡片信息维护
</title>
</head>
<LINKREL=stylesheetHREF="xzyimage\global.css"TYPE="text/css">
<BODYleftmargin="0"topmargin="0"marginwidth="0"marginheight="0">
<!--imgborder="0"src="xzyimage\ADD.GIF"width="32"height="32"-->
<div><!--按钮区域-->
<inputtype="button"value="查询"name="B1"onclick="Insert();">
<inputtype="button"value="增加"name="B2"onclick="alert(document.all.text1.value);">
<inputtype="button"value="修改"name="B3">
<inputtype="button"value="删除"name="B4">
</div>
<divid=divquery><!--查询控制区域-->
</div>
023可以添加删除内容网页
<script>
varIDNumber=0;
functionInsert()
{
node=document.createElement("SPAN");//创建一个span元素
node.id=IDNumber;
click="<ahref=\"javascript:DeleteNode(divUpdate,"+IDNumber+");\">删除</a>";
row="<tableborder='1'><tr><td>"+IDNumber+"</td><td>填写内容</td><td>"+click+"</td></tr></table>";
//node.innerHTML=IDNumber+"使用innerHTML属性:<ahref=\"javascript:DeleteNode(divUpdate,"+IDNumber+");\">删除</a><br>";
node.innerHTML=row;
node.邢志云="XZY"+IDNumber;//可以给对象定义一个自己的属性
divUpdate.appendChild(node);
IDNumber++;
}
//可以删除Div或span上的node
functionDeleteNode(P,CID)
{
varattas=P.childNodes;
vari;
for(i=0;i<attas.length;i++){
varoChild=P.children(i);
//alert(oChild.innerHTML);
//alert(oChild.邢志云);//显示自定义的属性
if(oChild.id==CID){
P.removeChild(oChild);
}
}
}
</script>
<inputname=""type="button"value="添加"onClick="Insert()">
<br>
<DIVid=divUpdate></DIV>
<hr>
024给网页元素添加自定义属性
这里的代码给一个文本框添加了一个属性,字段名
<inputname=""type="button"value="添加"onClick="alert(text1.FieldName);">
<br>
<INPUTname=text1value=""size=5FieldName="姓名">
<hr>
可以给各种元素添加自定义的属性,如下给div添加
<inputname=""type="button"value="添加"onClick="alert(divUpdate.FieldName);">
<br>
<DIVid=divUpdate>这是层</DIV>
<script>
divUpdate.FieldName="姓名";
</script>
<hr>
025利用Microsoft.XMLDOM控件,不刷新网页直接从服务器上读取xml文件数据
n说明
Microsoft.XMLDOM是IE5.0以上浏览器自带的。
从客户端网页上利用控件Microsoft.XMLDOM,可以读取服务器上xml格式的文件,要求客户端的IE浏览器上设置,win2000中默认是开启的,win2003中默认是关闭的.csdn上的论坛列表就是用这种方式实现的,如果禁用了ActiveX,则进入论坛的时候会报错.
这个控件很有用,可以实现不刷新网页而直接加载信息,有时我们在网页上选取相关下拉列表时,可以不刷新而动态改变下拉列表的内容.
n简单例子
下面的例子,从硬盘或Internet上读取一个xml文件,并把这个文件完整的显示在客户端
<html>
<script>
functionShow()
{
varXsldom;
Xsldom=newActiveXObject("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>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<title>新建网页2</title>
</head>
<inputname=""type="button"value="显示"onClick="Show()">
<bodyonload="alert('Start');">
</body>
</html>
也可以读取本机的xml文件,如把如下的文字,保存到一个xml文件中
<?xmlversion="1.0"encoding="gb2312"?>
<TreeNodeid='4_2_1'>
<TreeNodetext="个人基本信息登记"message="这个模块还没有编写完毕"/>
<TreeNodetext="单位基本信息登记"/>
<TreeNodetext="个人求职"/>
<TreeNodetext="单位求人"/>
</TreeNode>
在上面的load中写上这个文件的路径即可,如下
Xsldom.load("E:\\Temp\\xtree\\xtree\\files\\exe.xml");
这个文件必须是xml格式的,下面好像是最简单的了
<?xmlversion="1.0"encoding="gb2312"?>
<xzy>
中国人民万岁
全世界大团结万岁
</xzy>
n创建XML串
利用XMLDOM可以在IE上生成XML格式的信息串.
xml中若使用了特殊字符需要替换,如用<需要被替换为<
|
< |
< |
小于 |
|
> |
> |
大于 |
|
& |
& |
&符号 |
|
' |
' |
省略号 |
|
" |
" |
引号 |
如果数据中有大量的特殊字符,如<,则可以用<![CDATA…]]>来直接显示原始的内容.
<?xmlversion="1.0"encoding="gb2312"?>
<TreeNode>
<Node1>
<![CDATA[
ifa>8大于then
<99>
]]>
</Node1>
<Node2>数据2</Node2>
</TreeNode>
一个xml文件是有根、节点、节点的属性、值等元素构成的，其中，节点是有层次关系的，一个节点可以被另外的节点嵌套，并且可以嵌套许多层。
利用XMLDOM可以将页面上的信息生成为xml文件格式的字符串。
下面的代码可以产生以上格式的xml字符串：
<html>
<script>
functionShow()
{
varobjDom
varobjRoot
varobjNode
varobjNodeValue
varobjattID
varobjattTabOrder
varobjPI
varx
//实例化MicrosoftXMLDOM对象.
objDom=newActiveXObject("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.savestrXMLFilePath&"\"&strFileName
alert(objDom.xml);
//document.write(objDom.xml);
//'释放所有对象所引用的值
objDom=null
objRoot=null
objNode=null
objNodeValue=null
objattID=null
objattTabOrder=null
objPI=null
}
</script>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<title>新建网页2</title>
</head>
<inputname=""type="button"value="显示"onClick="Show()">
<bodyonload="Show();">
</body>
</html>
n从XMLDOM中分离出XML数据
数据可以从xml中被分离出来,可以实现这样的效果,通过xmldom,将数据提交个一个后台网页,该网页接收到信息后,进行操作,然后将操作结果生成一个xml文件,再通过xmldom读取并分离出数据,显示在本地,这样就实现了不提交,也不刷新而实现了数据和服务器的交互.
<html>
<script>
functionShow()
{
varXsldom;
vartext;
varNode;
text="<?xmlversion=\"1.0\"encoding=\"gb2312\"?>";
text=text+"<TreeNode>";
text=text+"<Node1>\n";
text=text+"<![CDATA[<节点1数据ifa>bthen\nprintf('完成');]]>\n";
text=text+"</Node1>";
text=text+"<Node2>节点2数据</Node2>";
text=text+"<Node3>节点3数据</Node3>";
text=text+"<Node4>节点4数据</Node4>";
text=text+"</TreeNode>";
Xsldom=newActiveXObject("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>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<title>新建网页2</title>
</head>
<inputname=""type="button"value="显示"onClick="Show()">
<bodyonload="Show();">
</body>
</html>
nNode.item(0).childNodes.item(j).nodeName//得到节点名
Node.item(0).childNodes(0).nodeName//只有一条记录时得到节点名
LoadXml(“”)加载字符串。
026使用XML数据岛
n显示数据到表格中
在HTML中可以将XML数据填写岛表格中
把一下2个文件放到同一个目录中,运行index.htm即可
文件:people.xml
<?姓名lversion="1.0"encoding="gb2312"?>
<!--Editedwith姓名LSpyv4.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>
<tralign="left">
<td><spandatafld="姓名"></span></td>
<td><spandatafld="性别"></span></td>
<td><spandatafld="籍贯"></span></td>
<td><spandatafld="出生日期"></span></td>
</tr>
</table>
</body>
</html>
显示效果
n显示到span或div中,移动结果集指针
还是用刚才的people.xml,里面的span换成div也可以.
<html>
<scriptlanguage="JavaScript">
functionmovenext()
{
x=xmldso.recordset
if(x.absoluteposition<x.recordcount)
{
x.movenext()
}
}
functionmoveprevious()
{
x=xmldso.recordset
if(x.absoluteposition>1)
{
x.moveprevious()
}
}
</script>
<body>
<xmlsrc="people.xml"id="xmldso"async="false"></xml>
<br/>name:
<spandatasrc="#xmldso"datafld="姓名"></span>
<br/>gender:
<spandatasrc="#xmldso"datafld="性别"></span>
<br/>nation:
<spandatasrc="#xmldso"datafld="籍贯"></span>
<p>
<inputtype="button"value="Previous"
onclick="moveprevious()"/>
<inputtype="button"value="Next"
onclick="movenext()"/>
</p>
</body>
</html>
n数据随表格行刷新
点击表格的行,上部内容随之刷新
<html>
<head>
<scripttype="text/javascript">
functiontestclick(field)
{
varrow=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>
<xmlid="xmldso_list"src="people.xml"></xml>
<tableborder="1"bgcolor="yellow">
<tralign="left"><th>姓名:</th><tdid="td_姓名"></td></tr>
<tralign="left"><th>性别:</th><tdid="td_性别"></td></tr>
<tralign="left"><th>籍贯:</th><tdid="td_籍贯"></td></tr>
<tralign="left"><th>出生日期:</th><tdid="td_出生日期"></td></tr>
</table>
<p><b>点击表格中的行:</b></p>
<tabledatasrc="#xmldso_list"border="1">
<thead>
<tralign="left">
<th>姓名</th>
<th>性别</th>
<th>籍贯</th>
<th>出生日期</th>
</tr>
</thead>
<tralign="left"onclick="testclick(this);alert(this.rowIndex);">
<td><divdatafld="姓名"/></td>
<td><divdatafld="性别"/></td>
<td><divdatafld="籍贯"/></td>
<td><divdatafld="出生日期"/></td>
</tr>
</table>
</body>
</html>
027XML的http请求
可以将网页的或xml的代码读回来.
<html>
<head>
<scripttype="text/javascript">
functiongetPage()
{
varobjHTTP=newActiveXObject("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>
<bodyonload="getPage()">
<h2>UsingtheHttpRequestObject</h2>
<p>
<b>status:</b>
<spanID="A1"></span>
</p>
<p>
<b>statustext:</b>
<spanID="A2"></span>
</p>
<p>
<b>response:</b>
<br><spanID="A3"></span>
</p>
<p>
<b>response:</b>
<br><spanID="A4"></span>
</p>
</body>
</html>
029判断一个字符串是否为纯中文
<script>
functionbol_chinese(str)//如果str全部都是中文则返回true,否则返回false
{
varpattern=/[^\u4E00-\u9FA5]/;
if(pattern.test(str))returnfalse;
elsereturntrue;
}
</script>
<buttononclick="alert(bol_chinese('你好我们'));"></button>
030转为unicode编码(escape和unescape)
<scriptlanguage=javascript>
functionEscapeTest()
{
vars;
vars1;
vars2;
s="你好abc中国";
s1=escape(s);
alert(s1);
s2=unescape(s1);
alert(s2);
}
</script>
</HEAD>
<buttononclick="EscapeTest();"></button>
</HTML>
031样式表
样式表的操作元素
|
background:yellow; |
背景色 |
|
background-image:url(http://news.sohu.com/nimages/news_logo_1.gif) |
背景图片 |
|
background-repeat:no-repeat; |
背景是否重复 |
|
H4{border-top-width:2px;border-bottom-width:5px;border-left-width:1px;border-right-width:1px} |
边框:IE不支持 |
|
background-attachment:fixed; |
作为body的背景时，不随滚动条移动 |
|
background-position:centerbottom |
背景的位置 |
|
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使所有继承的文字变形参数被忽略，文字将以正常形式显示。 |
|
|
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 hidden使要素被隐藏 inherit指它将继承母体要素的可视性设置。 |
隐藏属性 |
n基础
<HTML>
<HEAD>
<TITLE>我的第一个样式表</TITLE>
</HEAD>
<STYLETYPE="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>
在<STYLETYPE="text/css">之间的是样式表定义.可以精确的控制文字大小,边距等.
n归类
H1,P,BLOCKQUOTE{font-family:arial}
可以一次对多个tag定义样式表
n使用外部样式表
把样式表存储在一个文件中,然后许多网页都可以使用这个样式表
<HTML>
<HEAD>
<TITLE>我的第一个样式表</TITLE>
</HEAD>
<BODY>
<H1>在H1之间的文字</H1>
<P>^_^我们都是大坏蛋</p>
</BODY>
<LINKREL=stylesheetHREF="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}
n同时使用外部样式表和本页样式表
可以同时引入多个外部样式表,还可以将外部样式表和本页样式表同时使用
<HTML>
<HEAD>
<TITLE>我的第一个样式表</TITLE>
</HEAD>
<LINKREL=stylesheetHREF="mystyles.css"TYPE="text/css">
<LINKREL=stylesheetHREF="mystyles2.css"TYPE="text/css">
<STYLETYPE="text/css">
TEXTAREA{background:yellow;color:red;}
</STYLE>
<BODY>
<H1>在H1之间的文字</H1>
<P>^_^我们都是大坏蛋</p>
<a>你好</a>
<textarea>文本框的内容</textarea>
</BODY>
</HTML>
n样式表的分类
样式表中使用的标签必须是html中已经定义了的标签,如果要自定义样式,则需要在现有的标签上进行分类
<HTML>
<HEAD>
<TITLE>我的第一个样式表</TITLE>
</HEAD>
<STYLETYPE="text/css">
a{color:#FF00FF}
a.xzy1{color:red}
a.xzy2{color:purple}
.通用分类{color:gray}<!--如果没有标签而直接写分类,则该分类适用于所有的标签-->
</STYLE>
<BODY>
<a>A无分类</a><br/>
<aclass=xzy1>A分类1</a><br/>
<aclass=xzy2>A分类2</a>
<pclass=通用分类>A分类3</p>
</BODY>
</HTML>
n情景选择
<HTML>
<HEAD>
<TITLE>我的第一个样式表</TITLE>
</HEAD>
<STYLETYPE="text/css">
PB{color:red}/*在p内的并且是b的才变成红色*/
</STYLE>
<BODY>
<p>
你好我们的<b>地球</b>
</p>
</BODY>
</HTML>
n字体大小(em)
<HTML>
<HEAD>
<TITLE>我的第一个样式表</TITLE>
</HEAD>
<STYLETYPE="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
n边框的颜色实现彩色下划线
利用边框颜色可以实现彩色下划线
<HTML>
<HEAD>
<TITLE>我的第一个样式表</TITLE>
</HEAD>
<fontstyle="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
n文字的精确定位
<HTML>
<HEAD>
<TITLE>我的第一个样式表</TITLE>
<STYLETYPE="text/css">
A{position:absolute;left:100px;top:15px}
</STYLE>
</HEAD>
<body>
<A>你好</A>
</BODY>
</HTML>
n链接的颜色控制
nCSS的行为
当鼠标移动到网页的文字上时,该文字变成蓝色,移除时该文字变成黑色.这个行为是在文件behave.htc中定义的.
将行为和网页分离.
将下面的2个文件放到同一个目录中.
文件:Index.htm
<html>
<head>
<style>
h1{behavior:url(behave.htc)}
</style>
</head>
<body>
<h1>MoveyourMouseoverme</h1>
</body>
</html>
文件:behave.htc
<component>
<attachfor="element"event="onmouseover"handler="hig_lite"/>
<attachfor="element"event="onmouseout"handler="low_lite"/>
<scriptlanguage="JavaScript">
functionhig_lite()
{
element.style.color=255
}
functionlow_lite()
{
element.style.color=0
}
</script>
</component>
032列出对象的所有属性
在html中，对象的属性不易获得，如层的style可以写多少css属性控制，或document中有多少属性，可以用下面代码获得想要对象的所有属性
下面是：层的style属性中有多少子属性
<divid='xzy'style="background-color:#FFFF99">获取对象的属性：</div>
<script>
varanObject=xzy.style;
varpropertyInfo=""
vararr=newArray(1000)
i=0;
for(varpropertyNameinanObject)
{
propertyInfo=propertyName+"="+anObject[propertyName];
arr[i]=propertyInfo;
i++;
}
arr.sort();
for(a=0;a<i;a++)
document.write(arr[a]+"<br>");
</script>
033鼠标键盘事件：
只输入数字：
functionJHshNumberText()
{
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;
}
}
按键转向
functionkeydown()
{
e=window.event;
if(e.keyCode==13)
e.keyCode=9;
}
document.onkeydown=keydown;
034对话框操作对象
window.dialogArgument.document;
035时间操作：
functionCheckDate(vNewValue)
{
//DimStateAsLong
varState;
//DimCountAsLong
varCount;
//DimForceExitAsLong
varForceExit;
//DimCAsString*1
varC;
//DimOnlyYMAsBoolean'是否只有YearMonth,
varOnlyYm;
//M_CheckThrough=False
varM_CheckThrough;
//vNewValue=MyTrim(vNewValue)
vNewValue=MyTrim(vNewValue);
//M_Source=vNewValue
varM_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);
//IfNot(1900<=MyVal(M_Year)AndMyVal(M_Year)<=2100)Then
//if(!("1900"<=M_Year&&M_Year<="2100"))
// return"Error";
//CallSetError
//ExitProperty
//EndIf
//vNewValue=Mid(vNewValue&"★",5)
vNewValue=vNewValue.substring(4);
//State=1
State=1;
//C=""
C="";
//ForceExit=0
ForceExit=0;
//OnlyYM=False
OnlyYM=false;
//WhileState<>8AndForceExit<88
while(State!=8&&ForceExit<88)
{
//ForceExit=ForceExit+1
ForceExit=ForceExit+1
//SelectCaseState
//alert(State);
switch(State)
{
//Case1
case1:
//Count=1
Count=1;
//C=Mid(vNewValue,Count,1)
C=vNewValue.substring(Count-1,Count);
//If"0"<=CAndC<="9"Then
if("0"<=C&&C<="9")
State=3;
//State=3
//ElseIfC="★"Then
elseif(C=="★")
//State=8
State=8;
//Else
else
//State=2
State=2;
//EndIf
break;
//Case2
case2:
//Count=Count+1
Count++;
//C=Mid(vNewValue,Count,1)
C=vNewValue.substring(Count-1,Count);
//alert(vNewValue);
//alert(Count);
//alert(C);
//If"0"<=CAndC<="9"Then
if("0"<=C&&C<="9")
//State=3
State=3;
//ElseIfC="★"Then
elseif(C=="★")
//State=8
State=8;
//Else
else
return"Error";
//CallSetError
//ExitProperty
//EndIf
break;
//Case3
case3:
//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"<=CAndC<="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;
//ElseIfC="★"Then
elseif(C=="★")
//State=9
State=9;
//Else
else
//State=5
State=5;
//EndIf
break;
//Case4
case4:
//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"<=CAndC<="9"Then
if("0"<=C&&C<="9")
//State=6
State=6;
//ElseIfC="★"Then
elseif(C=="★")
//State=9
State=9;
//Else
else
//State=5
State=5;
//EndIf
break;
//Case5
case5:
//Count=Count+1
Count++;
//C=Mid(vNewValue,Count,1)
C=vNewValue.substring(Count-1,Count);
//If"0"<=CAndC<="9"Then
if("0"<=C&&C<="9")
//State=6
State=6;
//ElseIfC="★"Then
elseif(C=="★")
//State=8
State=8;
//Else
else
//State=9
State=9;
//EndIf
break;
//Case6
case6:
//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"<=CAndC<="9"Then
if("0"<=C&&C<="9")
//State=7
State=7;
//ElseIfC="★"Then
elseif(C=="★")
//State=8
State=8;
//Else
else
//State=8
State=8;
//EndIf
break;
//Case7
case7:
//M_Day=M_Day&C
M_Day+=C;
//State=8
State=8;
break;
//Case8
case8:
break;
//Case9
case9:
//M_Day="01"
M_Day="01";
//OnlyYM=True
OnlyYM=true;
//State=8
State=8;
break;
//EndSelect
}
//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;
//IfNot(IsDate(M_Date))Then
//CallSetError
//ExitProperty
//EndIf
//M_Date=Format(CDate(M_Date),"YYYY-MM-DD")
M_Date=M_Year+"-"+M_Month+"-"+M_Day;
//IfOnlyYMThen
//M_Date=Mid(M_Date,1,7)&""
//EndIf
if(OnlyYM)
M_Date=M_Year+"-"+M_Month+"";
//M_CheckThrough=True
//M_ErrorString=""
//EndProperty
returnM_Date;
}
IsDate(date)
|
用JavaScript实现显示时间和日期 |
|
|
分类: |
JavaScript |
|
内容： |
JavaScript@NowEquivalent |
日期转换
Date.parse()
isNaN(numvalue)
isNaN(Date.parse(document.forms[0].startdatetime.value))
格式：2004/10/0816:53
显示格式：
|
现在是 |
2004年12月28日星期二 |
上午11:07:28 |
时间可变化。
<TABLEstyle="BORDER-BOTTOM:#0f5aa61pxsolid"cellSpacing=0
cellPadding=0width=370align=centerborder=0>
<TBODY>
<TR>
<TDwidth=90height=24>
<DIVclass=mainalign=center>
<DIValign=right>现在是</DIV></DIV></TD>
<TDwidth=160>
<DIVclass=mainalign=center>
<SCRIPTlanguage=JavaScript>
<!--Begin
today=newDate();
functioninitArray(){
this.length=initArray.arguments.length
for(vari=0;i<this.length;i++)
this[i+1]=initArray.arguments[i]}
vard=newinitArray(
"星期日",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六");
document.write(today.getYear(),"年",
today.getMonth()+1,"月",
today.getDate(),
"日",
d[today.getDay()+1]
);
//End-->
</SCRIPT>
</DIV></TD>
<TDclass=mainwidth=120>
<SCRIPTlanguage=javascript>
<!--Begin
functiontick(){
varhours,minutes,seconds,xfile;
varintHours,intMinutes,intSeconds;
vartoday;
today=newDate();
intHours=today.getHours();
intMinutes=today.getMinutes();
intSeconds=today.getSeconds();
if(intHours==0){
hours="12:";
xfile="午夜";
}elseif(intHours<12){
hours=intHours+":";
xfile="上午";
}elseif(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("<divid='Clock'></div>");
//End-->
</SCRIPT>
</TD></TR></TBODY></TABLE>
036检查数据是否为空：
functionchkIsEmpty(field,errMsg){
if(field&&trim(field.value)==""){
alert(errMsg);
field.focus();
field.select();
returntrue;
}elsereturnfalse;
}
037去除空格：
functiontrim(string1)
{
varnewstring;
newstring=string1;
varindex1=newstring.lastIndexOf('');
while(index1>-1)
{
varnewstring1=newstring.substring(0,index1);
varnewstring2="";
if((newstring.length-1)!=index1)
{
varnewstring2=newstring.substring(index1+1,newstring.length);
}
newstring=newstring1+newstring2;
index1=newstring.lastIndexOf('');
}
returnnewstring;
}
functionMyTrim(str)
{
//returnstr.replace(/^\s*/,'').replace(/\s*$/,'');
vars;
s=str.replace("","");
if(s!=str)
s=MyTrim(s);
returns
}
//FunctionName:trim
//FunctionDescription:去除字符串的首尾的空格
//CreationDate:2004-7-1315:30
//LastModifyBy:N/A
//LastModifyDate:N/A
String.prototype.trim=function(){
returnthis.replace(/(^s*)|(s*$)/g,"");
}
//FunctionName:ltrim
//FunctionDescription:去除字符串的左侧的空格
//CreationDate:2004-7-139:58
//LastModifyBy:N/A
//LastModifyDate:N/A
String.prototype.ltrim=function()
{
returnthis.replace(/(^s*)/g,"");
}
//FunctionName:rtrim
//FunctionDescription:去除字符串的右侧的空格
//CreationDate:2004-7-1315:31
//LastModifyBy:N/A
//LastModifyDate:N/A
String.prototype.rtrim=function()
{
returnthis.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"){
vararrNames=Xsldom.getElementsByTagName(window.document.forms[0].elements[i].name);
arrNames.item(0).text="rrrr";
}
039装入xml及修改值
functionloadxml(str)
{
varXsldom;
Xsldom=newActiveXObject("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"){
vararrNames=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]=newOption(Node.item(i).text,Node.item(i).text);
//}
}
049向服务器提交xml
varoXmlHttp=newActiveXObject("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("ûÓзµ»ØÕýÈ·µÄÊý¾ÝÀàÐÍ¡£")
//returnfalse
//}
alert(oXmlHttp.responseXML.xml);
//xmlTest.loadXML(oXmlHttp.responseXML.xml);
050添加元素
vars
node=document.createElement("<divclass=query></div>");
node.id="query"+i;
node.number=i;
s="<selectsize='1'id='fieldname'onChange=操作最后一个("+i+")>"
s=s+"<option></option>"
s=s+"</select><selectsize='1'id='condition'onChange=操作最后一个("+i+")>"
s=s+"<option></option>"
s=s+"</select><inputtype='text'id='setvalue'size='20'onChange=操作最后一个("+i+")onkeypress=操作最后一个("+i+")>"
s=s+"<inputtype='button'value='...'id='showpres'onclick=预查询("+i+")>"
s=s+"<inputtype='button'value='×'id='closequery'onclick=DeleteQuery(divquery,"+i+")>"
node.innerHTML=s;
divquery.appendChild(node);
1.oncontextmenu="window.event.returnvalue=false"将彻底屏蔽鼠标右键
<tableborderoncontextmenu=return(false)><td>no</table>可用于Table
2.<bodyonselectstart="returnfalse">取消选取、防止复制
3.onpaste="returnfalse"不准粘贴
4.oncopy="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=查看网页源代码
onclick="window.location='view-source:'+'<IMGsrc="pic/url.gif"align=absMiddleborder=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"onfocus="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=最小化onclick=hh1.Click()>
<inputtype=buttonvalue=最大化onclick=hh2.Click()>
<inputtype=buttonvalue=关闭onclick=hh3.Click()>
本例适用于IE
17.
<%
'定义数据库连接的一些常量
ConstadOpenForwardOnly=0'游标只向前浏览记录，不支持分页、Recordset、BookMark
ConstadOpenKeyset=1'键集游标，其他用户对记录说做的修改将反映到记录集中，但其他用户增加或删除记录不会反映到记录集中。支持分页、Recordset、BookMark
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=1name=s1cols=27onpropertychange="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>
<INPUTname="radio1"type="radio"value="style"checked>style
<INPUTname="radio1"type="radio"value="barcode">Barcode
<INPUTtype="button"value="check"onclick="checkme()">
</BODY></HTML>
25.获得本页url的request.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键可以让光标移到下一个输入框
<inputonkeydown="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=absMiddleborder=0>www.njcatv.net"
autourl[2]="javacool.3322.net"
autourl[3]="<src="pic/url.gif"align=absMiddleborder=0>www.sina.com.cn"
autourl[4]="www.nuaa.edu.cn"
autourl[5]="<src="pic/url.gif"align=absMiddleborder=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=GOonclick=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=1onerror=auto('<src="pic/url.gif"align=absMiddleborder=0>http://";+autourl[i]+"')>")}
run()</script>
29.各种样式的光标
auto：标准光标
default：标准箭头
hand：手形光标
wait：等待光标
text：I形光标
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操作
varobjTR=objTD.parentElement;
varobjTable=objTR.parentElement;
objTD.parentElement.parentElement.rowIndex
objTD=objTR.childElement
objTable.rows[i].cells[0].all.fieldname//得到td下的表单对象
event.srcElement
objTR.rowIndex;
varobjRow=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);
}
n如何固定表格宽度--
|
<> <TABLEstyle="table-layout:auto|fixed"> <TABLEstyle="word-break: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"则表示显示所有外边框。
明白了参数值的含义，制作本例的效果就简单了，本例完成后的源代码如下：
<tablewidth="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的参数值，使表格只显示垂直方向的内外边框，其它与上例相同，本例完成后的源代码是：
<tableborder="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"：设定立体边框线中较深部分的颜色，用颜色名称或十六进制数表示。
用本例的方法制作双横线，比用其它方法方便、快捷，所用代码也较少，当横线的数量越多，效果越明显。本例完成后的代码为：
<tablewidth="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>
n1.表格的分隔线可以隐藏
<tableborderrules=colscellspacing=0align=left>可以隐藏横向的分隔线
<tableborderrules=rowscellspacing=0align=right>可以隐藏纵向的分隔线
<tableborderrules=nonecellspacing=0align=center>可以隐藏横向和纵向的分隔线
2.表格的边框不断在闪
以下方法可以令表格的边框不断在闪，很实用的
在BODY区加上
<tableborder="0"width="280"id="myexample"
style="border:5pxsolidyellow">
<tr>
<td>加入任意的物件.加入任意的物件.
<br>加入任意的物件.加入任意的物件.
<br>加入任意的物件.加入任意的物件.</td>
</tr>
</table>
<scriptlanguage="JavaScript1.2">
<!--
functionflashit(){
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.几种样式不同的表格
<tableborder="1"width="220"style="position:absolute;left:
11;top:11"height="26">
<tr>
<tdwidth="100%">普通表格</td>
</tr>
</table>
5.正立方表格
<tableborder="1"width="220"bordercolorlight="#eeeeee"
bordercolordark="#000000"style="position:absolute;left:10;top:
49"height="26">
<tr>
<tdwidth="100%">正立方表格</td>
</tr>
</table>
6.细表格
<tableborder="0"frame=vsideswidth="219"
bgcolor="#000000"cellspacing="1"cellpadding="0"
height="22"style="position:absolute;left:11;top:86">
<trbgcolor="#FFFFFF">
<tdwidth="100%"height="2">细表格</td>
</tr>
</table>
7.立体表格
<tableborder="1"width="220"bordercolorlight="#ffffff"
bordercolordark="#ffffff"style="position:absolute;left:10;top:
112"height="34">
<tr>
<tdwidth="100%"bgcolor="#B7B7B7"
bordercolorlight="#000000"bordercolordark="#eeeeee">立体表格</td>
</tr>
</table>
8.无名表格
<tablewidth="220"align="center"style="position:absolute;
left:246;top:12"height="51">
<tr>
<td><fieldsetstyle="width:220"align="center">
<legend>无名表格</legend> <palign="right"> </fieldset>
<br>
</td>
</tr>
</table>
9.表中表效果Ⅱ
<tablewidth="220"align="center"style="position:
absolute;left:245;top:89"height="110">
<tr>
<tdheight="75"><fieldsetstyle="width:220"
align="center"><legend>表中表效果Ⅱ</legend><table
frame="hsides"border="1"
bordercolorlight="#000000"bordercolordark="#ffffff"
width="100%"cellspacing="1"cellpadding="0"height="78">
<trbgcolor="#ffffff">
<tdwidth="100%"height="76"></fieldset></td>
</tr>
</table>
10.表中表效果Ⅰ
<tablewidth="220"align="center"style="position:absolute;
left:10;top:120"height="138"cellspacing="1"
cellpadding="0">
<tr>
<tdheight="126"><fieldsetstyle="width:220;color:#B7B7B7;
border-style:groove"align="center"><legendstyle="color:
#FFFFFF;border:1solid#808080"><fontcolor="#000000">表中表效果Ⅰ</font>
</legend> <palign="right"> </fieldset>
</td>
</tr>
</table>
11.表格中边框的显示
只显示上边框<tableframe=above>
只显示下边框<tableframe=below>
只显示左、右边框<tableframe=vsides>
只显示上、下边框<tableframe=hsides>
只显示左边框<tableframe=lhs>
只显示右边框<tableframe=rhs>
不显示任何边框<tableframe=void>
1.两种细线表格做法
源码如下：
<tablewidth="100%"border="1"bordercolor="#000000">
<trbordercolor="#FFFFFF">
<td>表格边线为1，线色为黑，行线色为白。</td>
</tr>
</table>
<p>
<tablewidth="100%"border="0"cellspacing="1"bgcolor="#000000">
<tr>
<tdbgcolor="#FFFFFF">表格边线为0，间距为1，背景色为黑，行背景色为白。</td>
</tr>
</table>
2.立体表格
源码如下：
<tableborder=1cellspacing=0width=100%bordercolorlight=#333333bordercolordark=#efefef>
<trbgcolor=#cccccc>
<td>it365cn</td>
<td>it365cn</td>
<td>it365cn</td>
<td>it365cn</td>
</tr>
<trbgcolor=#cccccc>
<td>cnbruce</td>
<td>cnbruce</td>
<td>cnbruce</td>
<td>cnbruce</td>
</tr>
</table>
<center>表格边线为1，间隔为0，左上为#333333，右下为#efefef,行背景色为#cccccc
3.另类圆角表格制作
源码如下：
原图：
<tablecellpadding=0cellspacing=0border=0width=282align=center>
<trheight=1>
<tdrowspan=4width=1></td>
<tdrowspan=3width=1></td>
<tdrowspan=2width=1></td>
<tdwidth=2></td>
<tdbgcolor=#43B5C9></td>
<tdwidth=2></td>
<tdrowspan=2width=1></td>
<tdrowspan=3width=1></td>
<tdrowspan=4width=1></td>
</tr>
<trheight=1>
<tdbgcolor=#43B5C9></td>
<tdbgcolor=#43B5C9></td>
<tdbgcolor=#43B5C9></td>
</tr>
<trheight=1>
<tdbgcolor=#43B5C9></td>
<tdcolspan=3bgcolor=#43B5C9></td>
<tdbgcolor=#43B5C9></td>
</tr>
<trheight=2>
<tdbgcolor=#43B5C9></td>
<tdcolspan=5bgcolor=#43B5C9></td>
<tdbgcolor=#43B5C9></td>
</tr>
</table>
<p>放大
<tablecellpadding=0cellspacing=0border=1width=282align=center>
<trheight=10>
<tdrowspan=4width=10></td>
<tdrowspan=3width=10></td>
<tdrowspan=2width=10></td>
<tdwidth=20></td>
<tdbgcolor=#43B5C9></td>
<tdwidth=20></td>
<tdrowspan=2width=10></td>
<tdrowspan=3width=10></td>
<tdrowspan=4width=10></td>
</tr>
<trheight=10>
<tdbgcolor=#43B5C9></td>
<tdbgcolor=#43B5C9></td>
<tdbgcolor=#43B5C9></td>
</tr>
<trheight=10>
<tdbgcolor=#43B5C9></td>
<tdcolspan=3bgcolor=#43B5C9></td>
<tdbgcolor=#43B5C9></td>
</tr>
<trheight=20>
<tdbgcolor=#43B5C9></td>
<tdcolspan=5bgcolor=#43B5C9></td>
<tdbgcolor=#43B5C9></td>
</tr>
</table>
4.虚线边框表格
源码如下：
<styletype="text/css">
.tb{BORDER-BOTTOM:#0000001pxdotted;BORDER-top:#0000001pxdotted;BORDER-LEFT:
#0000001pxdotted;BORDER-RIGHT:#0000001pxdotted;}
</style>
<tablewidth="100%"border="0"cellspacing="0"cellpadding="0">
<tr>
<tdclass="tb"><center>www.blueidea.com</td>
</tr>
</table>
<p>
虚线直线1
<hrsize=1style="border:1pxdotted#001403;">
虚线直线2
<psize=1style="border:1pxdotted#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>
<TABLEwidth=100%cellspacing=1bgcolor=black>
<TR>
<TD><ahref="#">Blueidea
<TD><ahref="#">.com
<TR>
<TD><ahref="#">CNBruce
<TD><ahref="#">.com
</TABLE>
7.变色的单元格2，已经做成了CSS，注意还有透明效果
源码如下：
<styletype="text/css">
.aa
{background-color:#0000ff;color:#ff0000;filter:alpha(opacity=50)}
.bb
{background-color:#3366cc;color:#ffffff}
</style>
<tablewidth="100%">
<tr>
<tdonmouseover="this.className='aa'"onmouseout="this.className='bb'"
class="bb"><center><b>cnbruce</td>
</tr>
</table>
8.变色的单元格3，通过mouse事件做.有点微软的味道
源码如下：
<tablewidth="100%"border="1"cellpadding="3"cellspacing="0"
bordercolor="#efefef"bgcolor="#efefef">
<tr>
<tdonMouseOut="this.bgColor='#efefef';this.borderColor='#efefef'";
onMouseOver="this.bgColor='#cccccc';this.borderColor='#000033'"><divalign="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.透明表格
<tablebgcolor=#ecececstyle="filter:alpha(opacity=50)"width=200height=100border=0>
<tr><td><center>cnbruce</td></tr>
</table>
10.表格边框显示外阴影
源码如下：
<tablealign=centerwidth=200height=100bgcolor=#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).
源码如下：
<htmlxmlns:v>
<style>
v\:*{behavior:url(#default#VML)}
</style>
<body>
<v:RoundRectstyle="position:relative;width:150;height:240px">
<v:shadowon="T"type="single"color="#b3b3b3"offset="3px,3px"/>
<v:TextBoxstyle="font-size:10.2pt;">VML</v:TextBox>
</v:RoundRect>
</body>
</html>
(2).
源码如下：
<htmlxmlns:v>
<style>
v\:*{behavior:url(#default#VML)}
</style>
<body>
<v:RoundRectstyle="position:relative;width:150;height:240px">
<v:pathtextpathok="true"/>
<v:textpathon="true"string="cnbrucecnbrucecnbrucecnbrucecnbruc
ecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbruce"/>
<v:shadowon="T"type="single"color="#b3b3b3"offset="3px,3px"/>
<v:TextBoxstyle="font-size:10.2pt;">VML</v:TextBox>
</v:RoundRect>
</body>
</html>
(3).
源码如下：
<htmlxmlns:v>
<style>
v\:*{behavior:url(#default#VML)}
</style>
<body>
<v:RoundRectstyle="position:relative;width:150;height:240px"arcsize=0.5>
<v:shadowon="T"type="single"color="#b3b3b3"offset="3px,3px"/>
<v:TextBoxstyle="font-size:10.2pt;">VML</v:TextBox>
</v:RoundRect>
</body>
</html>
转自：动态网制作指南www.knowsky.com
常用函数：
大小写变换：toLowerCase()，toUpperCase()
select操作
varsl=document.forms[0].roomName;
alert(sl.options[sl.selectedIndex].text);
thisform.room.selectedIndex==-1
document.forms[0].roomname.disabled=true;
|
如何用JavaScript在下拉列表中自动加入内容？ |
|
|
分类: |
JavaScript |
|
内容： |
Ifyouwanttoaddeasycontenttoyourselectlist(dropdownlist)thisisyourtip.Simplyusethecodebelow.Itsimplytransformsyourselectlistintoafieldwhereyoucanaddyourvalue.Afterthatitwilltransformbackintoaselectlist."LongLivetheDom" |
|
附件： |
Select清空：select.options.length=0
提交操作
|
如何禁止用户在Web上提交文档后利用后退功能？ |
|
|
分类: |
JavaScript |
|
内容： |
Thiswillpreventtheuserfromresubmittingthesamedocmentmanytimes.I |
|
附件： |
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>
<pid=pdiv></p>
<SCRIPTLANGUAGE="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
<artisttype="band">TheOffspring</artist>
NODE_ATTRIBUTE
type="band">TheOffspring
NODE_TEXT
TheOffspring
NODE_PROCESSING_INSTRUCTION
<?xmlversion="1.0"?>
NODE_DOCUMENT_TYPE
<!DOCTYPEcompactdiscsSYSTEM"cds.dtd">
varcontactID=parseInt(sortNode.item(currentid).parentNode.getAttribute("contactID"))+1
Xsldom.getElementsByTagName(PrimaryKey);
varPrimaryKey=node(0).getAttribute("PrimaryKey");
node.item(0).childNodes(j).nodeName
objRoot.setAttribute("orderby",tableorder);
遍历xml
<scriptlanguage="VBScript">
txt="<h1>Traversingthenodetree</h1>"
document.write(txt)
setxmlDoc=CreateObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("note.xml")
foreachxinxmlDoc.documentElement.childNodes
document.write("<b>"&x.nodename&"</b>")
document.write(":")
document.write(x.text)
document.write("<br>")
next
</script>
LoadXml(“”)加载字符串。
location操作
varpathname=window.location.pathname;
varsearchstr=window.location.search;
遍历操作
遍历xmlvbscript
<scriptlanguage="VBScript">
txt="<h1>Traversingthenodetree</h1>"
document.write(txt)
setxmlDoc=CreateObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("note.xml")
foreachxinxmlDoc.documentElement.childNodes
document.write("<b>"&x.nodename&"</b>")
document.write(":")
document.write(x.text)
document.write("<br>")
next
</script>
遍历xtree
functioncjcbl(tree1,j){
varddd=tree1;
j+="";
varxx;
for(vari=0;i<=(ddd.childNodes.length-1);i++){
if(i+1<10){
xx="00"+(i+1);
}
elseif(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对象，并给三个属性赋值：
functionCar(color,make,model)
{
this.color=color;
this.make=make;
this.model=model;
}
对于JScript的客户版本，如果在其他所有对象的上下文之外使用this，则它指的是window对象。
Hashmap类
使用javascript模拟了一个类似Java的HashMap类
/*------------------------------------------------------------------------------
*addedbyLxcJie2004.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
*用法：
*varmap=newJHashMap();
*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
*varmapTemp=newJHashMap();
*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());
*//辅助方法
*functionprint(msg)
*{
*document.write(msg+"
");
*}
*修改履历：
-------------------------------------------------------------------------------*/
/**
*HashMap构造函数
*/
functionJHashMap()
{
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)
{
returntypeofthis[this.prefix+key]=="undefined"
?null:this[this.prefix+key];
}
/**
*从HashMap中获取所有key的集合，以数组形式返回
*/
JHashMap.prototype.keySet=function()
{
vararrKeySet=newArray();
varindex=0;
for(varstrKeyinthis)
{
if(strKey.substring(0,this.prefix.length)==this.prefix)
arrKeySet[index++]=strKey.substring(this.prefix.length);
}
returnarrKeySet.length==0?null:arrKeySet;
}
/**
*从HashMap中获取value的集合，以数组形式返回
*/
JHashMap.prototype.values=function()
{
vararrValues=newArray();
varindex=0;
for(varstrKeyinthis)
{
if(strKey.substring(0,this.prefix.length)==this.prefix)
arrValues[index++]=this[strKey];
}
returnarrValues.length==0?null:arrValues;
}
/**
*获取HashMap的value值数量
*/
JHashMap.prototype.size=function()
{
returnthis.length;
}
/**
*删除指定的值
*/
JHashMap.prototype.remove=function(key)
{
deletethis[this.prefix+key];
this.length--;
}
/**
*清空HashMap
*/
JHashMap.prototype.clear=function()
{
for(varstrKeyinthis)
{
if(strKey.substring(0,this.prefix.length)==this.prefix)
deletethis[strKey];
}
this.length=0;
}
/**
*判断HashMap是否为空
*/
JHashMap.prototype.isEmpty=function()
{
returnthis.length==0;
}
/**
*判断HashMap是否存在某个key
*/
JHashMap.prototype.containsKey=function(key)
{
for(varstrKeyinthis)
{
if(strKey==this.prefix+key)
returntrue;
}
returnfalse;
}
/**
*判断HashMap是否存在某个value
*/
JHashMap.prototype.containsValue=function(value)
{
for(varstrKeyinthis)
{
if(this[strKey]==value)
returntrue;
}
returnfalse;
}
/**
*把一个HashMap的值加入到另一个HashMap中，参数必须是HashMap
*/
JHashMap.prototype.putAll=function(map)
{
if(map==null)
return;
if(map.constructor!=JHashMap)
return;
vararrKey=map.keySet();
vararrValue=map.values();
for(variinarrKey)
this.put(arrKey[i],arrValue[i]);
}
//toString
JHashMap.prototype.toString=function()
{
varstr="";
for(varstrKeyinthis)
{
if(strKey.substring(0,this.prefix.length)==this.prefix)
str+=strKey.substring(this.prefix.length)
+":"+this[strKey]+"\r\n";
}
returnstr;
}
text操作
巧用expression来区分只读文本框和普通文本框的背景色
对于文本框,只读状态下和普通状态下,浏览器对其并没有做什么特殊的标记,表面看来,效果是一样的,这样,对用户来说,易用性并不是很高.
当然,我们可以改变只读文本框的背景颜色来加以区分,这个时候就需要程序员自己判断这个文本框是不是只读,然后再引入相应的css,无疑加大了工作量.
这里,使用expression来提供一种解决方案,只需要每个页面引入这个css即可,其它的都由程序自己判断,如下:
<style>
input{background-color:expression((this.readOnly&&this.readOnly==true)?"#f0f0f0":"")}
</style>
<INPUTTYPE="text"NAME="">
<INPUTTYPE="text"NAME=""readonly>
<INPUTTYPE="text"NAME="">
<INPUTTYPE="text"NAME=""readonly>
Css操作
body{
background-image:url(img2/main-back2.gif);
}
<divstyle="width:300;height:250;overflow:auto;"id="xx">
表单对象：
１、Text单行单列输入元素
功能：对Text标识中的元素实施有效的控制。
基本属性：
Name：设定提交信息时的信息名称。对应于HTML文档中的Name。
Value：用以设定出现在窗口中对应HTML文档中Value的信息。
defaultvalue：包括Text元素的默认值
基本方法：
blur()：将当前焦点移到后台。
select()：加亮文字。
主要事件：
onFocus：当Text获得焦点时，产生该事件。
OnBlur：从元素失去焦点时，产生该事件。
Onselect：当文字被加亮显示后，产生该文件。
onchange：当Text元素值改变时，产生该文件。
例：...
|
<Formname="test"> |
２、textarea多行多列输入元素
功能：实施对Textarea中的元素进行控制。
基本属性
name：设定提交信息时的信息名称，对应HTML文档Textarea的Name。
Value：用以设定出现在窗口中对应HTML文档中Value的信息。
Defaultvalue：元素的默认值。
方法：
blur()：将输入焦点失去
select()：将文字加亮后
事件：
onBlur:当失去输入焦点后产生该事件
onFocus:当输入获得焦点后，产生该文件
Onchange:当文字值改变时，产生该事件
Onselect:当文字加亮后，产生该文件
３、Select选择元素
功能：实施对滚动选择元素的控制。
属性：
name:设定提交信息时的信息名称，对应文档select中的name。
Length:对应文档select中的length
options:组成多个选项的数组
selectIndex;该下标指明一个选项
select在中每一选项都含有以下属性：
Text:选项对应的文字
selected:指明当前选项是否被选中
Index:指明当前选项的位置
defaultselected:默认选项
事件：
OnBlur：当select选项失去焦点时，产生该文件。
onFocas:当select获得焦点时，产生该文件。
Onchange:选项状态改变后，产生该事件。
４、Button按钮
功能：实施对Button按钮的控制。
属性：
Name:设定提交信息时的信息名称，对应文档中button的Name。
Value:用以设定出现在窗口中对应HTML文档中Value的信息。
方法：
click()该方法类似于一个按下的按钮。
事件：
onclick当单击button按钮时，产生该事件。
例：
|
<Formname="test"> |
５、checkbox检查框
功能：实施对一个具有复选框中元素的控制。
属性：
name:设定提交信息时的信息名称。
Value:用以设定出现在窗口中对应HTML文档中Value的信息。
Checked:该属性指明框的状态true/false.
defauitchecked:默认状态
方法：
click()该方法使得框的某一个项被选中。
事件：
onclick:当框的选被选中时，产生该事件。
６、radio无线按钮
功能：实施对一个具单选功能的无线按钮控制。
属性：
name:设定提交信息时的信息名称，对应HTML文档中的radio的name相同
value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中的radio的name。
length:单选按钮中的按钮数目。
defalechecked:默认按钮。
checked:指明选中还是没有选中。
index:选中的按钮的位置。
方法：
chick():选定一个按钮。
事件：
onclick:单击按钮时，产生该事件。
７、hidden:隐藏
功能：实施对一个具有不显示文字并能输入字符的区域元素的控制。
属性：
name:设定提交信息时的信息名称，对应HTML文档的hidden中的Name。
Value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档hidden中的value。
defaleitvalue:默认值
８、Password口令
功能：实施对具有口令输入的元素的控制。
属性：
Name:设定提交信息时的信息名称，对应HTML文档中password中的name。
Value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中password中的Value。
defaultvalu:默认值
方法
select():加亮输入口令域。
blur():使这丢失passward输入焦点。
focus():获得password输入焦点。
９、submit提交元素
功能：实施对一个具有提交功能按钮的控制。
属性：
name:设定提交信息时的信息名称，对应HTML文档中submit。
Value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中value。
方法
click()相当于按下submit按钮。
事件：
onclick()当按下该按钮时，产生该事件。
页面无法保存
<noscript><iframesrc=Index.htm></iframe></noscript>
Iframe操作
<iframeid=leftname=leftstyle="HEIGHT:100%;VISIBILITY:inherit;WIDTH:130;Z-INDEX:2"scrolling=noframeborder=0src="left.htm"></iframe>
Httphead操作
"<METAHTTP-EQUIV=\"Pragma\"CONTENT=\"no-cache\">"
"<METAHTTP-EQUIV=\"Content-Type\"content=\"text/html;charset=gb2312\">"
"<metahttp-equiv=\"refresh\"content=\"300\">"
"<LINKREL=stylesheetHREF=\"/taiyuan/css.css\"TYPE=\"text/css\">"
技巧：
1.oncontextmenu=\"window.event.returnvalue=false\"将彻底屏蔽鼠标右键
<tableborderoncontextmenu=return(false)><td>no</table>可用于Table
2.<bodyonselectstart=\"returnfalse\">取消选取、防止复制
3.onpaste=\"returnfalse\"不准粘贴
4.oncopy=\"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=查看网页源代码
onclick=\"window.location=\'view-source:\'+http://www.csdn.net/&;#39;\">
12.怎样通过asp的手段来检查来访者是否用了代理
<%ifRequest.ServerVariables(\"HTTP_X_FORWARDED_FOR\")<>\"\"then
response.write\"您通过了代理服务器，\"&_
\"真实的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\"onfocus=\"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=最小化onclick=hh1.Click()>
<inputtype=buttonvalue=最大化onclick=hh2.Click()>
<inputtype=buttonvalue=关闭onclick=hh3.Click()>
本例适用于IE
17.
<%
\'定义数据库连接的一些常量
ConstadOpenForwardOnly=0\'游标只向前浏览记录，不支持分页、Recordset、BookMark
ConstadOpenKeyset=1\'键集游标，其他用户对记录说做的修改将反映到记录集中，但其他用户增加或删除记录不会反映到记录集中。支持分页、Recordset、BookMark
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=1name=s1cols=27onpropertychange=\"this.style.posHeight=this.scrollHeight\">
htmltoexecl
Response.ContentType="application/vnd.ms-excel"
application/vnd.ms-powerpoint,application/vnd.ms-excel,application/msword
js动态操作html
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<title>test</title>
<scriptlanguage=javascript>
functionadd(tableId){
alert('nihao');
varobjTable=document.getElementById(tableId);
alert(objTable);
varobjRow=objTable.insertRow();
varobjCell=objRow.insertCell();
objCell.classname="code";
objCell.borderColor="#cccccc";
objCell.bgColor="#eff3f8";
objCell.innerHTML=document.getElementById("ddd").innerHTML;
}//end_js
</script>
</head>
<body>
<inputtype="button"value="addnew"name="add"onclick="add('ff');">
<tableborder="1"width="100%"id="ff">
<trid="ddd">
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
发表评论
相关推荐
c#学习笔记(1) 51099在线学习网发布 文章来源：网络收集 发布时间：2006-05-25 字体： [大 中 小] 51099在线学习网 http://www.51099.com 1, 结构(struct) 与 类(class) [attributes] [modifiers] struct ...
第一篇：Windows的编程模式 第二篇：Microsoft基本类库应用程序框架 第三篇：消息映射和视图类 第四篇：资源和编译 ...非常好的学习笔记，里面有许多实例的笔记，非常推荐。 网页收集，个人整理成word版的。
Java/JavaEE 学习笔记 作者在杰普学习时的学习笔记，是J2ee初学者必备手册，是大家学习J2EE开发的很好的参考笔记。 Java/JavaEE 学习笔记 内容目录: Unix 学习笔记..........7 一、Unix前言............7 二、...
这是我的shell编程笔记，我有很多自己的学习笔记，供我以及大家复习使用,还有其他的哦 C语言笔记,java笔记,网页笔记,javaweb笔记,gcc笔记,等,我会慢慢传
MATLAB 入门之旅为matlab官方学习课程，用于matlab基础知识快速入门。本文档仅为本人学习matlab的学习笔记。
Unix 学习笔记7 一、Unix前言............7 二、Unix基础知识....7 三、Unix常用命令....8 四、 文件系统权限.21 五、软硬连接的区别..........................22 六、范例程序...........22 七、网络基本命令...26...
网络爬虫是一个自动提取网页的程序，它为搜索引擎从万维网上下载网页，是搜索引擎的重要组成。python的urllib\urllib2等模块很容易实现这一功能，下面的例子实现的是对baidu首页的下载。具体代码如下： 复制代码 ...
JavaScript是一种网页编程技术，经常用于创建动态交互网页 JavaScript是一种基于对象和事件驱动的解释性脚本语言，类似C语言和Java的语法 事先不编译；逐行执行；无需进行严格的变量声明；内置大量现成对象，编写...
【目录】 1.01编写简单程序 4 0.1py软件的创建 8 0.2软件的修改及打包 10 1.02中文显示 12 1.03文本输入 16 1.04函数与菜单 18 1.05二级菜单 25 ...1.25打开网页 129 1.26联网发表 132 1.27默认接入点 141
老杜JSP 教程学习笔记 JSP（全称JavaServer Pages）是由Sun Microsystems公司主导创建的一种动态网页技术标准。JSP部署于网络服务器上，可以响应客户端发送的请求，并根据请求内容动态地生成HTML、XML或其他格式文档...
超文本标记语言（Hyper Text Markup Language），...HTML不是一种编程语言，而是一种标记语言 （markup language），是网页制作所必备的工具。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
一、利用HTMLParser进行网页解析 具体HTMLParser官方文档可参考http://docs.python.org/library/htmlparser.html#HTMLParser.HTMLParser 1、从一个简单的解析例子开始 例1： test1.html文件内容如下： 复制代码 ...
通过这个项目，我学习了数据库操作、网页设计和用户交互等方面的知识。实践让我更加深入地理解了编程的实际应用。 深入：探索编程社区和资源 在学习过程中，我发现了许多优秀的编程社区和在线资源。这些社区提供了...
ASP.NET编程技术与交互式网页设计 asp.net亲密接触_带源码 C#学习 01_类.htm.txt 02_构造函数的执行序列.htm.txt 03_抽象类和接口.htm.txt 04_结构类型.htm.txt 05_类成员的定义.htm.txt 06_类成员的其他...
本文用以记录从0开始学习JS，将学习过程中迷惑的点以学习笔记的方式进行记录，并以时间为顺序进行排序。文中一级目录都是笔者在学习过程中遇到的问题,大部分内容并非原创，而是遇到后网上查阅并做以整理，所以如果...
TensorFlow是一个基于数据流编程（dataflow programming）的符号数学系统，被广泛应用于各类机器学习（machine learning）算法的编程实现，其前身是谷歌的神经网络算法库DistBelief Tensorflow拥有多层级结构，可...
springmvc笔记分享主要是编程和网页开发方向，特此分享供大家学习参考
ASP.NET编程技术与交互式网页设计 asp.net亲密接触_带源码 C#学习 01_类.htm.txt 02_构造函数的执行序列.htm.txt 03_抽象类和接口.htm.txt 04_结构类型.htm.txt 05_类成员的定义.htm.txt 06_类成员的其他...
被VS吓坏了吧 其实开始最好不要使用VS，对于有过ASP编程经验的朋友来说，学习.Net最重要的除了学习C#以为，转变观念更重要，如果一开始就使用VS的话就好像使用DW写Asp一样（指用DW集成的动态网页模块）往往会把真相...
javascript是一门用来增强页面动态效果，实现页面与用户之间的实时、动态交互的脚本语言(解释型编程语言)。javascript由三部分组成:ECMA、DOM和BOM [1]ECMAScript由ECMA-262定义，提供核心语言功能（ECMA是欧洲...