---------------------- android培训、java培训、期待与您交流！ ----------------------
<!--html是超文本编辑语言 语法不严谨很宽松 不知道报错为何物 你乱写最多也只会照成达不到预计效果而已 有时候某些标签写错了对结果没任何影响 这既是一件让人非常头疼的事又是一件让人happy的事
<tile>：如果不闭合的话且在该文件里找(不是只找head字段 是整个文件里找 没到闭合就属于它的内容 就是字符串没有特殊含义)不到闭合标签的话不会改变网页名称而且在这个标签出现的地方后面的标签和文字都得不到执行和显示
如果找到闭合标签了的话会把标签和闭合标签里面的文字原封不动的显示出来也就是说title标签字段里如果有标签的话是不会得到解析执行的会把标签当字符串显示出来
如上面的代网页标题是：<font size=12>这是我地一个网页</font><html><title>
<html> <head> <body>没闭合的话跟没写一样 而且这些标签写错了都不要警的
<p> 没闭合等于没写 如果你闭合写错了 下个段落标签头也写错了 将会出现地一个标签头和下个结束标签组成一组标签 形成一个段落出现这种情况的话可以查下是否是这原因
<font> 这标签中的属性写错了不会有任何效果 当没闭合时 设置的文字属性将从你的标签头起一直到下个<font>标签
<h1>标签号越大代表的字体就越大 如果该标签没闭合后果很严重 该标签后面的所有文字除了被<font>标记修饰的内容都将继承<h1>标记的字体设置 直到再次遇到标题标记如<h1/h2> 它的生命周期/作用域就将结束
标签没有相应的结束标签相当于java里的类体没有用}括号括回来 在JAVA里会报错而在超文本标记语言里不会 既然它不会那么我们大胆的想下如果在一个类中我们的类体没有用}大括号括会来即表示该类还没结束
当你在这里又写了一个类的情况下 是不是这个类就变成了头前那个类的内部内 这个类是不是拥有了开头那个类的所有成员 继承。。。 这个类中是不是可以有自己的成员 成员是不是可以跟头前那个类的名字相同
如果相同调用的则是自己的成员 覆盖。。。 我们在在 这里搞个}将标志着头前的类的生命周期结束。
同理 在超文本语言中标签既然没有闭合那么它的作用域还在当你在后面书写了文字或标签时将继承没闭合的标签的特有功能 当后面的标签跟头前没闭合的标签相同时(标签相同功能相同 java则子类或实现类)将覆盖掉没闭合的标签的功能
后面如果还有文字或标签 标签功能不同时将继承没闭合的标签功能。。 如果在 出现跟头前一样的闭合标签时标示着该标签的生命周期已完 后面在出文字或标签不会继承头前那个标签的功能或属性。。。
如<font size=20>标签<font size=10>嵌套</font>应用</font>。。。
标签字体大小为20 嵌套字体为10 覆盖第一个标签的字体大小 应用字体大小为继承地1个标签所以为20 。。。为默认大小因为在第1/2个标签的作用域外
如何在网页上显示特殊符号 这些特殊符号在超文本标记语言中有特殊意义 如<>&
这点跟JAVA的转义一样 java是用的\转义 超文本标记语言也有着自己的转义格式 &开头
< 用< 表示 &qt 表示>  表示-->
HTML和dom简单应用
<html>
<head>
<script type="text/javascript">
var str="";
function listener(){
listNode(document,0);
document.write(str);
}
function listNode(node,num){
str+=toString(node,num++);
var nodes=node.childNodes;
for(var index=0;index<nodes.length;index++){
if(nodes[index].hasChildNodes()){
listNode(nodes[index],num);
}else{
str+=toString(nodes[index],num);
}
}
}
function toString(node,num){
return getPrefix(num)+"Name:"+ node.nodeName+"...type"+node.nodeType+"...value"+node.nodeValue+"<br/>";
}
function getPrefix(num){
var str="";
for(var index=0;index<num;index++){
str+="      ";
if(num-1==index){
str+="|---"
}
}
return str;
}
</script>
<title><font size=12>这是我地一个网页</font><html><title></title>
</head>
<body>
<form>
<input type="button" value="点击" οnclick="listener()"/>
</form>
<p>第一个 段落哦</p>asdfadfs
<p><font size=3 color=#00ff00>第二个段落哦</font></p>
<p><font size=20>第三个段落哦<html></font></p>
</br>
<hr color=red size=3/>
<h1>地一个标题哦<h1>
<h2><font size=13><b>地2个标题哦</b><font></h2>
<a name="top"/>
<hr color=black size=4>
<table border="1" width="400">
<caption>王五</caption>
<tbody>
<tr>姓名</tr>
<td>王五</td>
<td>赵六</td>
<td>李八</td>
</tbody>
<tbody>
<tr>年龄</tr>
<td>20</td>
<td>30</td>
<td>32</td>
</tbody>
</table>
<a href=" src="1.jpg"/></a>
<a href="mailto:adsfafs@163.com"><img src="1.jpg"/></a>
<img src="1.jpg" width="450" height="600" border="0" usemap="#Map" href="0510测试题.java"/>
<img src="2.jpg"width=600/>
<a href="#top">跳转</a>
</body>
</html>
差大小
<html>
<head>
<script type="text/javascript">
num=parseInt(Math.random()*100+1);
function ok(){
var textIn=document.getElementById("inputtext");
var txt=parseInt(textIn.value);
var out=document.getElementById("echodiv")
if(num>txt){
out.innerText="小了";
}else if(num<txt){
out.innerText="大了";
}else if(num==txt){
out.innerText="恭喜对了";
}else{
out.innerText="数字数字请输入数字";
}
}
</script>
</head>
<body>
<input id=inputtext type="text" value="请输入一个数字"/>
<input type="button" value="提交" οnclick="ok()"/>
<div id="echodiv">
</div>
</body>
</html>
大杂烩 详情看注释
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
var interval; //用setInterval每过1秒调用changePic()方法返回的timeId
οnlοad=function(){
//创建表格那块初始化 让删除表格按钮不可用
var names=document.getElementsByName("submit");
names[0].disabled=false;
for(var index=1;index<names.length;index++){
names[index].disabled=true;
}
//姓名年龄地址的高亮显示
var tableNodes=document.getElementsByTagName("table");
var trNodes=tableNodes[tableNodes.length-2].rows;
for(var index=0,className;index<trNodes.length;index++){
trNodes[index].οnmοuseοver=function(){
className=this.className;
this.className="mouseover";
}
trNodes[index].οnmοuseοut=function(){
this.className=className;
}
}
//list表格一次行让所以子表格都具备高亮显示 鼠标移动到子表格里面外表格的TR和子表格的TR同时高亮显示
/*
var tdNodes=document.getElementById("list").getElementsByTagName("td");//这是获取id为list表格下的所以td包括子表格的td所以25个
for(var index=0,className;index<tdNodes.length;index++){
tdNodes[index].οnmοuseοver=function(){
className=this.className;
this.className="mouseover";
}
tdNodes[index].οnmοuseοut=function(){
this.className=className;
}
}
*/
//list嵌套表格只有一个对象高亮显示 外表格a标签高亮显示内表格tr标签高亮显示
aNodes=document.getElementById("list").getElementsByTagName("a");
var tableNodes=document.getElementById("list").getElementsByTagName("table");
for(var index=0,className;index<aNodes.length;index++){
aNodes[index].οnmοuseοver=function(){
className=this.className;
this.className="mouseover";
}
aNodes[index].οnmοuseοut=function(){
this.className=className;
}
}
for(var row=0,className,tdNodes;row<tableNodes.length;row++){
tdNodes=tableNodes[row].getElementsByTagName("td");
for(var col=0;col<tdNodes.length;col++){
tdNodes[col].οnmοuseοver=function(){
className=this.className;
this.className="mouseover";
}
tdNodes[col].οnmοuseοut=function(){
this.className=className;
}
}
}
//list高亮over///
//随着鼠标移动而移动的广告
var adNode=document.getElementById("ad");
document.body.οnmοusemοve=function(){
adNode.style.left=event.x-adNode.offsetWidth/2;
adNode.style.top=event.y-adNode.offsetHeight/2;
}
//注意下！！！！！！！！！
//adNode=document.getElementById("ad1"); //要重新定义一个变量储存对象因为上面的onmousemove方法需要移动鼠标才能执行 onload方法加载完
//以后adNode 被重新赋予了一个对象 当鼠标移动后 调用的是adNode对象导致 你的鼠标移动你指望的对象不会跟着移动 而不想移动的又在自己移动
//下一张按钮初始化位置 该按钮能停止轮播随着鼠标移动而移动的广告图标
var ad1Node=document.getElementById("ad1");
ad1Node.style.left=screen.width/2;
ad1Node.style.top="200px";
//interval=setInterval("document.getElementsByName('queding')[0].onclick()",1000);//这条语句告诉我们能用代码按下确定按钮
//让随着鼠标移动的div容器里的img自动换图片
interval=setInterval("changePic()",1000);
//在屏幕上飞来飞去的广告初始化
ad1Node=document.getElementById("ad2");
ad1Node.οnmοuseοver=over; //这里的把over方法体赋给onmouseover 不能赋方法调用的结果 否则会无效 下面的onmouseout也一样
//clearInterval(timeId);在这里也是可以调用timeId的 这句代码也没有问题 这是为了让代码更清爽
ad1Node.οnmοuseοut=fly;
//程序初始化时让广告飞起来
fly();
countryLoad();
}
///onload over///
//广告一般用到setTimeout setInterval clearTimeout clearInterval open onmouseover onmouseout onmousemove 中的方法事件
//绕屏幕飞的广告
var timeId;
function over(){
clearInterval(timeId);
}
function fly(){
timeId=setInterval("mouseMove()",10);
}
var x=1,y=1,moveX=0;moveY=0;
function mouseMove(){
var ad1Node=document.getElementById("ad2");
moveX+=x*5;
moveY+=y*5;
x=moveX+ad1Node.offsetWidth>=document.body.clientWidth?-1:x;
y=moveY+ad1Node.offsetHeight>=document.body.clientHeight?-1:y;
x=moveX>=0?x:1;
y=moveY>=0?y:1;
ad1Node.style.left=moveX;
ad1Node.style.top=moveY;
/*if((moveX+ad1Node.offsetWidth)>=document.body.clientWidth){
x=-1;
}
if(moveX<=0){
x=1;
}
if((moveY+ad1Node.offsetHeight)>=document.body.clientHeight){
y=-1;
}
if(moveY<=0){
y=1;
}*/
}
//广告over/
//通过大中小3个超链接实现div容器的样式转换 css 样式代码 391-406行 .min .max .norn html代码499-508
function changeSize(className){
divNode=document.getElementById("divid");
divNode.className=className;
}
//over
///列表overFlow dom样式操作 css .open .close///
function change(dtNode){
if(dtNode==null){
dtNode=event.srcElement;
}
//alert(dtNode);
//var dlNode=document.getElementsByTagName("dl")[0];
var dlNode=dtNode.parentNode;
if(dlNode.className=="open"){
dlNode.className="close";
}else{
var dlNodes=document.getElementsByTagName("dl");
for(var index=0;index<dlNodes.length;index++){
if(dlNodes[index].className=="open"){
dlNodes[index].className="close";
}
}
dlNode.className="open";
}
}
//over/
//动态创建删除表格操作和表格样式操作用到了.first .second .mouseOver 在trColor()方法中修改样式美化表格///
//input的文本框只接收数字
function keyPressed(){
var key=event.keyCode;
if(!(key<=57&key>=48)){
alert("输入非法");
event.returnValue=false;
}
}
//动态创建表格的提交按钮
function submit1(){
var tableNode=document.createElement("table");
var tbodyNode=document.createElement("tbody");
var trNode=document.createElement("tr");
var tdNode=document.createElement("td");
var textNode=document.createTextNode("单元格1");
tdNode.appendChild(textNode);
trNode.appendChild(tdNode);
tbodyNode.appendChild(trNode);
tableNode.appendChild(tbodyNode);
var divNode=document.getElementsByTagName("div")[1];
divNode.appendChild(tableNode);
}
function submit(){
var tableNode=document.createElement("table");
var rowNum=document.getElementsByName("row")[0].value;
var colNum=document.getElementsByName("col")[0].value;
var divNode=document.getElementsByTagName("div")[1];
if(rowNum<=0|| colNum<=0){
alert("参数非法");
return;
}
for(var row=0;row<rowNum;row++){
/*
table.insertRow();
for(var col=0;col<colNum;col++){
table.rows[row].insertCell();
var textNode=document.createTextNode(row+"..."+col);
table.rows[row].cells[col].appendChild(textNode);
}
}*/
var trNode=tableNode.insertRow();
for(var cell=0;cell<colNum;cell++){
var tdNode=trNode.insertCell();
//tdNode.innerHTML="<font size=24>row+1+'行......'+(cell+1)+'列'</font>"; 结果为row+1+'行......'+(cell+1)+'列'字体大小为24
tdNode.innerHTML=row+1+'行......'+(cell+1)+'列';
}
}
divNode.appendChild(tableNode);
//event.srcElement.disabled=true;
//让创建表格的提交按钮不可用并让删除表格的按钮可用
disSubmit(true);
setTimeout("trColor()",3000);
}
动态创建表格提交按钮over
flag为true删除表格按钮可用创建表格按钮不可用 为false则反之
function disSubmit(flag){
if(flag){
var submits=document.getElementsByName("submit");
submits[0].disabled=true;
for(var index=1;index<submits.length;index++){
submits[index].disabled=false;
}
}else{
onload();
}
}
//让创键的表格的tr节点单双加载不同的样式即不同颜色 并且让表格高亮显示
function trColor(){
var tableNode=document.getElementsByTagName("div")[1].childNodes[0];
var trNodes=tableNode.rows;
var name;
for(var row=0;row<trNodes.length;row++){
if(row%2==0){
trNodes[row].className="second";
}else{
trNodes[row].className="first";
}
trNodes[row].οnmοuseοver=function(){
name=this.className;
this.className="mouseover";
}
trNodes[row].οnmοuseοut=function(){
this.className=name;
}
}
}
//删除表格中的某行下的某个单元格 当该行中单元格被删玩 则删除改行 当表格中行被删完 删除表格(即清空div) 当表格被删 删除按钮禁用 创建按钮解禁
function del(){
//alert(document.getElementsByTagName("div")[1].innerText);
if(document.getElementsByTagName("div")[1].innerText==""){
alert("DIV容器里没内容");
return;
}
var rowNum=document.getElementsByName("row")[1].value;
var cellNum=document.getElementsByName("col")[1].value;
tableNode=document.getElementsByTagName("div")[1].childNodes[0];
if(rowNum<=tableNode.rows.length && cellNum<=tableNode.rows[rowNum-1].cells.length){
tableNode.rows[rowNum-1].deleteCell(cellNum-1);
if(tableNode.rows[rowNum-1].cells.length==0){
tableNode.deleteRow(rowNum-1);
}
if(tableNode.rows.length==0){
document.getElementsByTagName("div")[1].innerText="";
//表格已删完 删除按钮禁用 创建按钮解禁
disSubmit();
}
}else{
alert("没有该行或该行没有该单元格");
}
}
// deleteRow()和deleteCell()没有参数或参数为-1时删除最后一行或列 insertRow()和insertCell()没有参数或参数为-1时在最后一行或列插入
//删除表格中的某行 当表格中行被删完 删除表格(即清空div) 当表格被删 删除按钮禁用 创建按钮解禁
function delRow(){
var tableNode=getTableNode();
rowNum=document.getElementsByName("row")[2].value;
if(tableNode.rows.length>=rowNum && rowNum>0){
tableNode.deleteRow(rowNum-1);
if(tableNode.rows.length==0){
document.getElementsByTagName("div")[1].innerText="";
//表格已删完 删除按钮禁用 创建按钮解禁
disSubmit();
}
}else{
alert("表格中没有该行");
}
}
//删除表格中的某列 得道表格中的所有行 遍历行 删除所有行下的指定单元格
//当某行中单元格被删玩则删除改行 当表格中行被删完 则删除表格(即清空div) 当表格被删 删除按钮禁用 创建按钮解禁
function delCell(){
var tableNode=getTableNode();
var cellNum=document.getElementsByName("col")[2].value;
for(var row=0;row<tableNode.rows.length;row++){
if(tableNode.rows[row].cells.length>=cellNum && cellNum>0){
tableNode.rows[row].deleteCell(cellNum-1);
}
if(tableNode.rows[row].cells.length==0){
tableNode.deleteRow(row);
row--;
}
}
if(tableNode.rows.length==0){
document.getElementsByTagName("div")[1].innerText="";
//表格已删完 删除按钮禁用 创建按钮解禁
disSubmit();
}
}
//获取存储在div容器里面的动态建立的表格对象
function getTableNode(){
var tableNode=document.getElementsByTagName("div")[1].childNodes[0];
return tableNode;
}
动态创建删除表格OVER//
///list表格模拟聊天软件的分组按钮用到了style的display属性 常用的值为none(隐藏) block（显示） css样式 .listOpen .listClose
function list(){
//alert(event.srcElement.parentNode.getElementsByTagName("table")[0].style.display);
var aNode=event.srcElement;
var tdNode=aNode.parentNode;
var tableNode=tdNode.getElementsByTagName("table")[0];
//alert(tableNode.nodeName);
//var tableNodes=document.getElementsByTagName("table")[0].getElementsByTagName("table");
var tableNodes=tdNode.parentNode.parentNode.getElementsByTagName("table");
//tableNode.style.display="block";
for(var index=0;index<tableNodes.length;index++){
if(tableNode==tableNodes[index]){
if(tableNode.className=="listOpen"){
tableNode.className="listClose";
//tableNode.style.display="none";
}else{
tableNode.className="listOpen";
//tableNode.style.display="block";
}
}else{
tableNodes[index].className="liseClose";
//tableNodes[index].style.display="none";
}
}
}
///模拟聊天分组按钮OVER
//姓名年龄地址表格的排序功能 tdNode.innerText获取的文字为字符串如果是数字的话要先用parseInt转换为数字在比较 英文字符串比较跟java一样 而中文比较很烂不是我要的结果
//根据姓名 年龄 地址任意一样排序 姓名地址是中文的排序结果看不懂。。。。
function sort1(cellNum){
var tbodyNode=document.getElementsByTagName("table")[6].childNodes[0];
var trNodes1=tbodyNode.childNodes;
var trNodes=new Array();
for(var index=1;index<trNodes1.length;index++){
trNodes[index-1]=trNodes1[index];
}
for(var row=0;row<trNodes.length-1;row++){
//var first=trNodes[row].cells[cellNum].innerText;在这里获取的话要点几次才能实现排序 因为符合条件交换位置后
//还是拿着你原先的数来判断的 不是哪着交换后的值判断
for(var col=row+1;col<trNodes.length;col++){
var first=trNodes[row].cells[cellNum].innerText;
var second=trNodes[col].cells[cellNum].innerText;
if(cellNum==1){
first=parseInt(first);
second=parseInt(second);
}
//alert(first+"..."+second);
if(first>second){
var temp=trNodes[row];
trNodes[row]=trNodes[col];
trNodes[col]=temp;
}
}
tbodyNode.appendChild(trNodes[row]);
}
tbodyNode.appendChild(trNodes[trNodes.length-1])
}
//根据年龄排序
function sort(){
var tbodyNode=event.srcElement.parentNode.parentNode.parentNode;
var trNodes=tbodyNode.childNodes;
for(var max,row=1,length=trNodes.length;row<length-1;row++){
max=row;
for(var col=row+1;col<length;col++){
max=(parseInt(trNodes[max].cells[1].innerText)>parseInt(trNodes[col].cells[1].innerText))?col:max;
}
if(max!=row){
tbodyNode.parentNode.moveRow(max,row);
//tbodyNode.parentNode.moveRow(max);年龄最大的tr移动最后 下面的循环每次获取的都是最后一个tr的角标
}
}
}
//姓名年龄地址表格over/
</script>
<!--
table table,table table tr{
border:hidden;
width:100%;
background-color:#669966;
display:none;
}
上面样式会导致list表格谈不开 因为list()方法里没有修改tr样式里的display只修改了table样式里的display 这样会导致tr里的display 永远为none既不显示（不弹出）
可以把table table和 table table tr样式分开写即
table table{
}
table table tr{
这里不要把display修改成none
}
-->
<style type="text/css">
.max{
font-size:24px;
background-color:#6699CC;
width:300px;
}
.norm{
font-size:18px;
background-color:#33CCFF;
width:300px;
}
.min{
font-size:10px;
background-color:#CC0000;
color:#000000;
width:300px;
}
.open{
overflow:visible;
height:auto;
}
.close{
overflow:hidden;
}
.first{
background-color:#CC3300;
}
.second{
background-color:#CC6666;
}
.mouseover{
background-color:#00ff00;
}
.mouse{
background-color:#0000ff;
}
table,table tr{
border:#33FF00 1px solid;
background-color:#339900;
}
table td a{
color:#6633FF;
text-decoration:none;
}
table table {
border:hidden;
width:100%;
background-color:#669966;
display:none;
}
table table tr{
border:hidden;
width:100%;
background-color:#669966;
}
dl{
overflow:hidden;
height:16px;
}
div table{
border:#FF0000 solid 1px;
width:80%;
}
div table td{
border:#000000 1px solid;
border
}
table th a{
text-decoration:none;
color:#FF0000;
}
#echoid{
border:#FFFFFF 1px solid;
background-color:#FFFF00;
width:300px;
height:100px;
}
#cssid{
border:#333333 1px solid;
background-color:#999999;
width:300px;
}
#uploadid{
border:#0099CC 1px solid;
background-color:#0099FF;
}
#truploadid{
background-color:#99CCFF;
}
#tduploadid{
border:#0099CC 1px solid;
}
.listOpen{
display:block;
}
.listClose{
display:none;
}
</style>
</head>
<body>
<!--通过大中小3个超链接实现div容器的样式转换 javascript代码144-149行 css 样式代码 391-406行 .min .max .norn -->
<a href="javascript:void(0)" οnclick="changeSize('max')">大</a>
<a href="javascript:void(0)" οnclick="changeSize('norm')">中</a>
<a href="#" οnclick="changeSize('min')">小</a> <br/>
<div id=divid>
地方第三方克里斯多夫大是大非上课监督法爱的说法 <br/>
大事发生大幅看了风刀霜剑kdj阿双方读书法撒地方江苏大丰 <br/>
ads客服机阿斯顿f东方时空监督法科技大上课酒店式付款据倒萨客服简单上课就
</div>
<!-- /over//-->
<!-- /overFlow 样式修改 css样式.pen .close javascipt change() -->
<dl>
<dt οnclick="change()">网络游戏</dt>
<dd>魔兽世界</dd>
<dd>大话西游</dd>
<dd>倩女幽魂</dd>
<dd>英雄联盟</dd>
</dl>
<dl>
<dt οnclick="change(this)">单机游戏</dt>
<dd>魔兽争霸</dd>
<dd>反恐精英</dd>
<dd>星际争霸</dd>
<dd>侠盗猎车</dd>
</dl>
<dl>
<dt οnclick="change(this)">单机游戏</dt>
<dd>魔兽争霸</dd>
<dd>反恐精英</dd>
<dd>星际争霸</dd>
<dd>侠盗猎车</dd>
</dl>
<dl>
<dt οnclick="change(this)">单机游戏</dt>
<dd>魔兽争霸</dd>
<dd>反恐精英</dd>
<dd>星际争霸</dd>
<dd>侠盗猎车</dd>
</dl><dl>
<dt οnclick="change(this)">单机游戏</dt>
<dd>魔兽争霸</dd>
<dd>反恐精英</dd>
<dd>星际争霸</dd>
<dd>侠盗猎车</dd>
</dl>
<!-- /over///-->
<!--/创建删除表格并美化操作///-->
<p><h5>添加表格</h5></p>
<p>行<input type="text" name="row" οnkeypress="keyPressed()"/>
列<input type="text" name="col" οnkeypress="keyPressed()" />
<input type="button" name="submit"/ value="提交" οnclick="submit()"></p>
<p><h5>删除表格</h5></p>
<p>行<input type="text" name="row" οnkeypress="keyPressed()"/>
列<input type="text" name="col" οnkeypress="keyPressed()" />
<input type="button" name="submit"/ value="提交" οnclick="del()"></p>
<p>
行<input type="text" name="row" οnkeypress="keyPressed()" />
<input type="button" name="submit"/ value="提交" οnclick="delRow()">
</p>
<p>
列<input type="text" name="col" οnkeypress="keyPressed()" />
<input type="button" name="submit"/ value="提交" οnclick="delCell()">
</p>
//动态添加的表格存放的容器
<div>
</div>
<!-- //添加删除表格OVER///-->
<!--/list表格模拟聊天软件的分组按钮用到了style的display属性 常用的值为none(隐藏) block（显示） css样式 .listOpen .listClose-->
<table id="list">
<tr>
<td>
<a href="javascript:void(0)" οnclick="list()">好友列表</a>
<table>
<tr>
<td>张三</td>
</tr>
<tr>
<td>李四</td>
</tr>
<tr>
<td>王五</td>
</tr>
<tr>
<td>赵六</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" οnclick="list()">好友列表</a>
<table>
<tr>
<td>张三</td>
</tr>
<tr>
<td>李四</td>
</tr>
<tr>
<td>王五</td>
</tr>
<tr>
<td>赵六</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" οnclick="list()">好友列表</a>
<table>
<tr>
<td>张三</td>
</tr>
<tr>
<td>李四</td>
</tr>
<tr>
<td>王五</td>
</tr>
<tr>
<td>赵六</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" οnclick="list()">好友列表</a>
<table>
<tr>
<td>张三</td>
</tr>
<tr>
<td>李四</td>
</tr>
<tr>
<td>王五</td>
</tr>
<tr>
<td>赵六</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" οnclick="list()">好友列表</a>
<table>
<tr>
<td>张三</td>
</tr>
<tr>
<td>李四</td>
</tr>
<tr>
<td>王五</td>
</tr>
<tr>
<td>赵六</td>
</tr>
</table>
</td>
</tr>
</table>
<!--///list 好友分组显示表格 OVER/-->
<!--姓名年龄地址表格///-->
<table border="1px" cellspacing="0px" cellpadding="10px" bordercolor="#FF0000" width="80%">
<tr bgcolor="#0000CC">
<th><a href="javascript:void(0)" οnclick="sort(0)">姓名</a></th>
<th><a href="javascript:void(0)" οnclick="sort(1)">年龄</a></th>
<th><a href="javascript:void(0)" οnclick="sort(2)">地址</a></th>
</tr>
<tr>
<th>张三</th>
<th>38</th>
<th>北京</th>
</tr>
<tr>
<th>李四</th>
<th>18</th>
<th>上海</th>
</tr>
<tr>
<th>王五</th>
<th>37</th>
<th>深圳</th>
</tr>
<tr>
<th>赵六</th>
<th>27</th>
<th>纽约</th>
</tr>
<tr>
<th>周七</th>
<th>20</th>
<th>巴黎</th>
</tr>
<tr>
<th>孙八</th>
<th>32</th>
<th>杭州</th>
</tr>
</table>
<!-- OVER-->
<p></p>
<!--///多选框买笔记本DEMO//-->
<script type="text/javascript">
//多选框全选反选操作 全选操作：获取全线框的checked值 在获取其他所以在这组的复选框的对象并把全选框的checked值赋值给所有其他复选框对象的checked
//反选操作：获取反选框的checked值并把它的非值赋值给该组其他复选框的checked
function check(){
var checkNode=event.srcElement;
var checkNodes=document.getElementsByName("item");
if(checkNode.name=="reverse"){
document.getElementsByName("all")[0].checked=false;
}else{
document.getElementsByName("reverse")[0].checked=false;
}
for(var index=0;index<checkNodes.length;index++){
if(checkNode.name=="reverse"){
checkNodes[index].checked^=1; //这个还可以局部取反。。
//checkNodes[index].checked=!(checkNodes[index].checked);//这个和上面的都可以达到目的
}else{
checkNodes[index].checked=checkNode.checked;
}
}
}
//求选中的复选框的value的和
function sure(){
var checkNodes=document.getElementsByName("item");
var spanNode=document.getElementsByTagName("span")[0];
var sum=0;
for(var index=0;index<checkNodes.length;index++){
if(checkNodes[index].checked){
sum+=parseInt(checkNodes[index].value);
}
}
sum=(sum+"元").fontsize(20).fontcolor("red");
spanNode.innerHTML=sum;
}
复选框买笔记本OVER///
//style textTransform样式操作
function selectOne(){
var selectNode=event.srcElement;
var value = selectNode.options[selectNode.selectedIndex].value;
var echoNode=document.getElementById("echoid");
var cssNode=document.getElementById("cssid");
echoNode.style.textTransform=value;
cssNode.innerText="textTransform:"+value+";";
}
over///
/广告/
///关闭广告
function closeAd(){
var divNode=event.srcElement.parentNode.parentNode;
//divNode.innerHTML="";
//divNode.style.display="none";
//divNode.style.position=""; //不设置样式和inherit和static是把图片放到原先的地方
//position的样式有absolute fixed inherit relative static
divNode.style.position="";
document.getElementById("ad1").style.position="static";
}
function closeAd2(){
closeAd();
//clearInterval(timeId);//这句没问题跟over里东西一摸一样 在这里可以调用head里的timeId
over();
}
//换图片
var pos=22;
function changePic(){
var pics=new Array();
for(var index=0;index<35;index++){
pics[index]=index+1;
}
pos=pos>33?0:++pos;
var divNode=document.getElementById("ad");
//divNode.innerHTML="<a href='jpg\' οnclick='closeAd()'><img src='jpg/"+pics[pos]+".jpg' title='highschool-dxd_PSP_壁纸' /></a>"
divNode.childNodes[0].innerHTML="<img src='jpg/"+pics[pos]+".jpg' title=='highschool-dxd_PSP_壁纸' />";
}
function changePics(){
//alert(document.getElementsByTagName("table")[0].style.position);
clearInterval(interval);
changePic();
}
</script>
<!--/复选框买笔记本/-->
<input type="checkbox" name="item" value="3000" />笔记本3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本3000元<br />
<input type="checkbox" name="all" οnclick="check()" />全选
<input type="checkbox" name="reverse" οnclick="check()"/>反选<br />
<input type="button" name="ok" value="确认" οnclick="sure()" /> <span></span>
<p></p>
<div id="echoid">
Fack You! GO go go gave me maney!
</div>
<p></p>
<select οnchange="selectOne()">
<option value="none">---textTransform---</option>
<option value="uppercase">全部大写</option>
<option value="lowercase">全部小写</option>
</select>
<p></p>
<div id="cssid">
textTransform:none;
</div><br />
<!--复选框买笔记本over-->
<!--///广告//-->
<!--style样式里position能实现样式分层 让容器（标签）飘起来 position的样式有absolute fixed inherit relative static 不设置样式和inherit和static是把图片放到原先的地方-->
<div id="ad" style="position:absolute;left:0px;top:0px">
<a οnclick="closeAd()"><img src="jpg/23.jpg" title="highschool-dxd_PSP_壁纸" /></a>
</div><br />
<div id="ad1" style="position:absolute; left:0px; top:0px;">
<input type="button" name="queding" value="下一张" οnclick="changePics()" />
</div><br />
<div id="ad2" style="position:absolute; left:1px; top:1px">
<a href="#" οnclick="closeAd2()"><img src="jpg/9.jpg" title="highschool-dxd_PSP_壁纸" /></a>
</div><br />
<!--///广告over//-->
<!--///上传文件界面-->
<table id="uploadid">
<tr id="truploadid">
<td id="tduploadid" colspan="2" align="center"><a href="javascript:void(0)" οnclick="uploadFile()">上传文件</a></td>
</tr>
</table>
<script type="text/javascript">
function uploadFile(){
var trNode=event.srcElement.parentNode.parentNode;
var tbodyNode=trNode.parentNode;
var tdNode_upload,tdNode_delete;
//alert(trNode.nodeName);
trNode=tbodyNode.insertRow();
trNode.id="truploadid";
tdNode_upload=trNode.insertCell();
tdNode_delete=trNode.insertCell();
tdNode_upload.id="tduploadid";
tdNode_delete.id="tduploadid"
tdNode_upload.innerHTML="<input type='file' name='fileName'/>";
tdNode_delete.innerHTML="<img src='fe.jpg' οnclick='deleteNode()'/>";
}
function deleteNode(){
var trNode=event.srcElement.parentNode.parentNode;
trNode.parentNode.removeChild(trNode);
}
</script>
<!--//uploadFileOver///-->
<!--//城市选择/ -->
<fieldset>
<legend>城市选择</legend>
国家
<select name="country" οnchange="selectCountry()">
<option>---选择国家---</option>
</select>
省份
<select name="province" οnchange="selectProvince()">
<!--如果列表里的选项多了1条项目而这条项目又不是你添加的注意是不是option的闭合标签写成了头标签-->
<option>--选择省份--</option>
</select>
城市<select name="city">
<option>--选择城市--</option>
</select>
</fieldset>
<script type="text/javascript">
var countrySelectedIndex;
function countryLoad(){
var node=document.getElementsByName("country")[0];
//alert(node);
var countrys=["--选择国家--","中国","美国","英国"];
fill(countrys,node);
}
function selectCountry(){
countrySelectedIndex=event.srcElement.selectedIndex;
var provinceNode=document.getElementsByName("province")[0];
var provinces=[["--选择省份--"],["北京","湖南","上海"],["纽约","华盛顿"],["剑桥","牛津"]];
//alert(provinces[0][0]);
fill(provinces[countrySelectedIndex],provinceNode);
/*selectProvince();或document.getElementsByName("province")[0].onchange(); 如果selectProvince方法里的是用srcElement获取的事件
对象的话会出问题 因为用srcElement获取的为选择国家的select对象 而不是选择省份的select对象而selectProvince方法要的是选择省份的
select对象 在这里这样的后果是当你选择中国时 province对象里是["北京","湖南","上海"] 北京在选中状态 selectCount方法里直接调用
selectProvince方法 或调用名为province的select对象的onchange方法 onchane()方法会自动调用selectProvince方法
在selectProvince方法里的provinceSelectedIndex为1 而citys的[1][1]为["长沙","邵阳","岳阳"...] 所以国家显示的为中国 省份显示的为
北京 城市则显示的为长沙 而北京里则没有长沙这肯定是要不得的。。。如果你选的是美国或英国 省份里就是provinces[2]或provinces[3] 结果为
["纽约","华盛顿"]或["剑桥","牛津"]] 而城市里面citys[2][2]和citys[3][3] 那么就出问题了 因为没有citys[2][2]和[3][3] 只有citys[2][1] 和citys[3][1]你访问citys[2][2]就会创建一个citys[2][2]而值为undefined也就是null（空没有东西/值） 而fill方法里面访问该变量的length
属性 而该变量值为undefined 值为undefined的变量没有length属性会报错 而名为city的select对象里也没内容
*/
selectProvince();//如果网页提示错误时注意看下标点符号是不是用的中文标点符号 如果没这条选择城市的代码的话 按照程序逻辑是要清空
//城市对象里的内容的 省份对象里内容不用管因为方法里已经指定了省份内容
}
function selectProvince(){
/*
下面这条代码如果是被注册的事件自己触发调用事件方法的话是没问题的 但是通过别的方法调用该方法的话会出现问题 因为获取的对象并不是
被触发事件的对象 而是调用本方法的方法的对象 在所有的事件处理里这点要注意
var provinceSelectedIndex=event.srcElement.selectedIndex;
*/
//该方法被注册在对象的一个事件上 如果方法里面处理的永远是一个固定的对象的话最好不要通过event.srcElement获取对象 因为获取的对象
//不一定是你所要的对象 如调用本方法的不是对象的对应事件 而是别的不相干的方法调用的本方法 如果调用本方法的方法的对象是你通过
//srcElement获取的对象相同的话是没问题的。。。。
var provinceSelectedIndex=document.getElementsByName("province")[0].selectedIndex;
//alert("selectProvince "+provinceSelectedIndex+"..."+event.srcElement.name);
var cityNode=document.getElementsByName("city")[0];
var citys=
[
[
["--选择城市--"]
],
[
["东城","西城","崇文","宣武","朝阳","怀柔","海淀","石景山","丰台","门头沟","房山","通州","顺义","大兴","燕山"],
["长沙","邵阳","岳阳","武冈","吉首","衡阳","益阳","怀化","永州","衡阳","湘潭","株洲","娄底","郴州","张家界","郴州"],
["浦东新区","徐汇","长宁","普陀","闸北","虹口","杨浦","黄浦","卢湾","静安","宝山","闵行","嘉定","金山","松江","奉贤"]
],
[
["纽约1","纽约2","纽约3","纽约4"],
["华盛顿1","华盛顿2","华盛顿3","华盛顿4"]
],
[
["小剑桥","中剑桥","大剑桥"],
["小牛津","中牛津","大牛津"]
]
];
//alert(citys[countrySelectedIndex][provinceSelectedIndex]);
fill(citys[countrySelectedIndex][provinceSelectedIndex],cityNode);
}
function fill(data,node){
oldClear(node);
//alert("fill "+node.name+"..."+data);
for(var index=0;index<data.length;index++){
//node.appendChild(document.createElement("option").innerText=data[index]);这句是不OK的应为它添加的是option里面的文本对象
//并不是option对象本身
node.appendChild(getOption(data[index]));
}
}
function oldClear(node){
//注意当遍历一个数组中的元素的同时删除数组中的元素出现的下面的一些问题适用于所有的编程语言。。。当然可以修改代码逻辑解决
//在java中用迭代器迭代集合时删除元素不会出现这类问题
/*
这样是错误 会出现漏删问题和元素不存在问题
首先获取了options的长度赋给一变量length 当删除其中一个对象时 options的长度会减1
options里被删元素的后面的元素的角标会被减1 后面的第1个元素会等于你的当前的index 而你的index要加1 在执行到删除时 开始被删除的元素的后面的一个元素会被错过 从而漏删 这只是其中一个错误 当你的index不断增加时 options的l长度会不断减少
当index大于或等于options的长度 小于length时循环时不会被停止的 options[index]不存在 而被指为undefingde
而removeChild(undefined)是会报错而停止的。。。。 当然options的长度为1的时候是不会有问题的。。。
在这里导致的问题是你切换一个国家和城市时下面的对象显示的是没有删除完的上次的内容 只到删到只有1个时 在切换时下一个对象的
内容会正常显示 在切换时当长度不为1时删除元素时又会出现问题
var length=node.options.length;
for(var index=0;index<length;index++){
node.removeChild(node.options[index])
}*/
/*
这个只会出现漏删问题 不会出现元素不存在问题 漏掉的个数为num=options.length % 2==0?options.length/2:options.length/2+1
options里被删元素的后面的元素的角标会被减1 后面的第1个元素会等于你的当前的index 而你的index要加1 在执行到删除时 开始被删除的元素的后面的一个元素会被错过 从而漏删
因为条件为index<node.options.length 所以不会出现元素不存在问题
for(var index=0;index<node.options.length;index++){
node.removeChild(node.options[index])
}*/
/*
下面的代码是没有问题的 因为每次删除地一个元素时 后面的元素角标会-1 使得每次都能删除到元素 而options的长度会减1 当删完时条件
将不满足循环得意退出
但是得注意的是 当在循环里有满足某条件时将不执行删除语句 当条件满足时将会出现死循环 因为条件满足的时候不会删除数组里的元素
而数组的长度又不会变 从而条件将永远成立
for(var index=0;index<node.options.length;){
node.removeChild(node.options[index])
}*/
for(var index=0;index<node.options.length;index++){
//if(条件){
node.removeChild(node.options[index]);//removeChild()会返回被删除的对象
index--;
//}
//这段代码弥补了上面那段代码的不足 当你在循环里面加上判断语句也不会出现死循环
}
/*
var option=node.options[0];
alert(option.innerText);
可以通过上面方法直接获取option元素 那么是不是可以通过options[index]修改options里的元素呢？
var option=document.createElement("option");
option.innerText="1";
alert(option.nodeName+"..."+option.innerText);
node.options[0]=option;
alert(node.options[0]);
//通过上面的代码证明当一个option设置了nnerText时是不能赋值给options里的option的
var option1=document.createElement("option");
option1.name="22";
option1.id="11";
node.options[0]=option1;
node.options[0].innerText="1";
alert(node.options[0].id+"..."+node.options[0].name);
//通过上面的代码证明了当一个option没有设置innerText时是可以赋值给options里的option的
//通过这一特性可以把一个option赋值给opions.length 在通过options.[options.length-1].innerText修改期值 相当于
//select.appendChild(document.createElement("option"));
//那是否可以修改options里的option里的文本内容呢？
node.options[0].innerText="111";
alert(node.options[0].innerText);
通过上面的代码证明是可以修改options里的option元素内的文本内容的
*/
}
function clear(node){
//跟据修改options的长度为0清空options里德元素这一特性是否可以用在其他对象上了？
node.options.length=0;
}
function getOption(data){
var optionNode=document.createElement("option");
optionNode.innerText=data;
return optionNode;
}
</script>
<!--over///-->
</body>
</html>
邮件SHELL
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link rel="stylesheet" href="trColor.css" />
<script src="docTool.js"></script>
<script src="trColor.js"></script>
<style type="text/css">
table th{
background-color:#0000FF;
}
</style>
<script type="text/javascript">
οnlοad=function(){
createTabBody();
//首行和尾行没有高亮显示是因为 trColor.css里的样式是作用在tr上的 而在本文档里帮th设置了背景颜色覆盖了tr的背景颜色
//所以没效果 如果想让单行和双行2种不同颜色失效只需在本文档样式里设置td的背景颜色即可它将覆盖tr的背景颜色 在style里设置tr的背景颜色不起作用
//应为优先采用的是trColor.css文档里的tr样式 而不是本文档里的style区里的样式
trColor(doc.byTag("table")[0],true);
}
function createTabBody(){
var tabNode=doc.byTag("table")[0];
for(var index=0,num;index<11;index++){
var trNode=tabNode.insertRow(1);
var tdNode=trNode.insertCell();
tdNode.innerHTML="<input type='checkbox' name='checkMail' />";
tdNode=trNode.insertCell();
num=11-index;
if(num<10){
num=0+""+num;
}
tdNode.innerHTML="张三"+num;
tdNode=trNode.insertCell();
tdNode.innerHTML="新的邮件";
}
}
function check(num){
var checks=doc.byName("check");
var node=event.srcElement;
var nodes=doc.byName("checkMail");
if(num==1){
if(event.srcElement.name=="checkByBut"){
checks[1].checked^=1;
}
if(event.srcElement==checks[0]){
checks[1].checked=checks[0].checked;
}else{
checks[0].checked=checks[1].checked;
}
}
for(var index=0;index<nodes.length;index++){
if(num==2){
//nodes[index].checked^=1; 这个即可实现全局全反也可以实现局部取反
checks[0].checked=0;
checks[1].checked=0;
nodes[index].checked=!nodes[index].checked;
}else if(num==1){
nodes[index].checked=checks[0].checked;
}else{
checks[0].checked=0;
checks[1].checked=0;
nodes[index].checked=num;
}
}
}
function delMail(){
if(!confirm("是否删除所选邮件")){
return;
}
var checks=doc.byName("checkMail");
for(var index=0;index<checks.length;index++){
if(checks[index].checked){
trNode=checks[index].parentNode.parentNode;
trNode.parentNode.removeChild(trNode);
index--;
}
}
trColor(doc.byTag("table")[0]);
}
</script>
</head>
<body>
<table>
<tr>
<th><input type="checkbox" name="check" οnclick="check(1)" />全选</th>
<th>发件人</th>
<th>邮件内容</th>
</tr>
<tr>
<th><input type="checkbox" name="check" οnclick="check(1)" />全选</th>
<th colspan="2">
<input type="button" name="checkByBut" value="全选" οnclick="check(1)" />
<input type="button" value="取消全选" οnclick="check(0)" />
<input type="button" value="反选" οnclick="check(2)" />
<input type="button" name="delete" value="删除所选邮件" οnclick="delMail()" />
</th>
</tr>
</table>
</body>
</html>
高亮显示颜色CSS
/* CSS Document */
.one{
background-color:#009966;
}
.two{
background-color:#FFFF33;
}
.mouseover{
background-color:#00FF00;
}
table ,table td ,table th{
border-collapse:collapse;
padding:10px;
width:800px;
border:#0000FF 1px solid;
}
高亮显示颜色代码
// JavaScript Document
function trColor(tabNode,flag){
var trNodes=tabNode.getElementsByTagName("tr");
var index=0,length=trNodes.length;
if(flag){
index++;
length--;
}
for(;index<length;index++){
if(index%2==1){
trNodes[index].className="one";
}else{
trNodes[index].className="two";
}
addListener(trNodes[index]);
}
addListener(trNodes[0]);
addListener(trNodes[trNodes.length-1]);
}
function addListener(node){
node.οnmοuseοver=onmouseover;
node.οnmοuseοut=onmouseout
}
var className;
function onmouseover(){
className=this.className;
this.className="mouseover";
}
function onmouseout(){
this.className=className;
}document工具
// JavaScript document
var doc=document;
doc.byId=doc.getElementById;
doc.byName=doc.getElementsByName;
doc.byTag=doc.getElementsByTagName;
用户注册
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
form table,form table td ,form table th{
border:#0000FF 1px solid;
color:#000000;
border-collapse:collapse;
padding:15px;
width:800px;
}
form table th{
background-color:#33FF66;
}
form table td{
background-color:#66FFCC;
}
.err{
border:#FF0000 2px solid;
}
.norm{
border:#999999 1px solid;
}
.focus{
border:#00FF00 2px solid;
}
.errinfo{
color:#FF0000;
display:none;
}
#repwdtitle{
margin-left:120px;
}
</style>
<script type="text/javascript" src="docTool.js"></script>
<script type="text/javascript">
var form;
οnlοad=function(){
inputColor();
}
function inputColor(){
form=doc.forms[0];
//alert(form.user);
classSet(form.user,"norm");
classSet(form.pwd,"norm");
classSet(form.repwd,"norm");
classSet(form.mail,"norm");
}
function classSet(node,className){
node.className=className;
}
function formCheck(){
return userCheck() && pwdCheck() && repwdCheck() && mailCheck()?1:event.returnValue=0;
}
function getfocus(){
event.srcElement.className="focus";
}
function check(inputNode,regex,node){
//node.style.color="red";
//node.style.display=value.match(regex)?"none":"block";
node.style.display=regex.test(inputNode.value)?"none":"block";
return node.style.display=="none"?inputNode.className="norm":((inputNode.className="err")?0:1);
//((inputNode.className="err")?0:1)); inputNode.className="err"这个条件要用括号括起来不然是没有效果的
}
function userCheck(){
return check(form.user,/^\w{3,5}$/,doc.byId("userinfo"))?form.pwd.focus():(form.user.focus())?0:1;
}
function pwdCheck(){
return check(form.pwd,/^[a-z0-9]{3,5}$/i,doc.byId("pwdinfo"))?form.repwd.focus():(form.pwd.focus())?0:1;
}
function repwdCheck(){
var node=doc.byId("repwdinfo");
/*
node.style.display=form.pwd.value==form.repwd.value?"none":"block";
return node.style.display=="none"?1:0;
*/
return check(form.repwd,new RegExp("^"+form.pwd.value+"$"),node)?form.mail.focus():(form.repwd.focus())?0:1;
}
function mailCheck(){
return check(form.mail,/^\w+@\w+(\.\w+)+$/,doc.byId("mailinfo"))?form.submit.focus():(form.mail.focus())?0:1;
}
</script>
</head>
<body>
<form action="http://127.0.0.1:8080" method="post" οnsubmit="formCheck()">
<table>
<tr>
<th><div>用户注册</div></th>
</tr>
<tr>
<td>
<div>用户名</div>
<div><input type="text" name="user" οnfοcus="getfocus()" οnblur="userCheck()" /></div>
<div class="errinfo" id="userinfo">用户名错误,请按要求填写。</div>
<div>用户名必须是3-5位，由字母(a-z),数组(0-9),下划线(_)组成</div>
</td>
</tr>
<tr>
<td>
<div><span>密码</span><span id=repwdtitle>确认密码</span></div>
<div>
<span><input type="password" name="pwd" οnfοcus="getfocus()" οnblur="pwdCheck()" /></span>
<span><input type="password" name="repwd" οnfοcus="getfocus()" οnblur="repwdCheck()" /></span>
</div>
<div class="errinfo" id="pwdinfo">密码错误，请按要求填写。</div>
<div class="errinfo" id="repwdinfo">两次密码输入不一样，请重新输入</div>
<div>密码必须是3-5位，由字母(a-z)，数字(0-9)组成</div>
</td>
</tr>
<tr>
<td>
<div>邮箱</div>
<div><input type="text" name="mail" οnfοcus="getfocus()" οnblur="mailCheck()" /></div>
<div class="errinfo" id="mailinfo">邮箱地址错误，请按要求填写。</div>
</td>
</tr>
<tr>
<th><div><input type="submit" name="submit" value="提交数据"/></div></th>
</tr>
</table>
</form>
</body>
</html>
用户注册改良版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="docTool.js"></script>
<style type="text/css">
span{
display:none;
}
#ok{
width:100;
background-color:#33CCCC;
color:#0000ff;
}
#err{
width:100;
background-color:#FFFF66;
color:#ff0000;
}
</style>
<script type="text/javascript">
//div span没有属性name 有属性id 只有getElementsByTagName()方法
//alert(doc.byName("user")[0]);全局变量这里body还没加载
var form;
οnlοad=function(){
var pwdNode=doc.byName("pwd")[0];
var repwdNode=doc.byName("repwd")[0];
form=doc.forms[0];
repwdNode.style.width=146;
pwdNode.style.width=146;
}
//var flag;
function check(regex,value){
//var value=event.srcElement.value;value在这里获取的话点击提交时所有的检测是通不过的 因为点提交的因为onsubmit事件调用formCheck方法formCheck方法调用本方法而获取的对象
//为调用onsubmit方法的对象则是button对象获取的value为提交查询内容 导致cheack方法返回的肯定会是false 提交按钮失败
return flag=regex.test(value);
}
function echoInfo(node,info){
//info=check(regex,value)?(info+"正确").fontcolor("#00ff00"):(info+"错误").fontcolor("#ff0000");
node.innerHTML=info;
}
function echoInfo1(ok,err){
//alert(ok+"..."+err);
//alert(ok.nodaName+"..."+err.nodeName);
ok.style.display="inline"
err.style.display="none";
}
function userCheck(){
var inputNode=form.user;
var regex=/^[a-z]\w{4,7}$/i;
//var node=doc.byId("userid");
var flag=check(regex,inputNode.value);
//var info=flag?"用户名正确".fontcolor("#00ff00"):"用户名错误".fontcolor("#ff0000");
//echoInfo(node,info);
var ok=flag?doc.byId("userid").getElementsByTagName("span")[0]:doc.byId("userid").getElementsByTagName("span")[1];
var err=!flag?doc.byId("userid").getElementsByTagName("span")[0]:doc.byId("userid").getElementsByTagName("span")[1];
echoInfo1(ok,err);
if(flag){
form.pwd.focus();
}
return flag;
}
function pwdCheck(){
var inputNode=form.pwd;
var regex=/^\w{6,14}$/;
//var node=doc.byId("pwdid");
var flag=check(regex,inputNode.value);
//var info=flag?"密码正确".fontcolor("#00ff00"):"密码错误".fontcolor("#ff0000");
//echoInfo(node,info);
var ok=flag?doc.byId("pwdid").getElementsByTagName("span")[0]:doc.byId("pwdid").getElementsByTagName("span")[1];
var err=!flag?doc.byId("pwdid").getElementsByTagName("span")[0]:doc.byId("pwdid").getElementsByTagName("span")[1];
echoInfo1(ok,err);
if(flag){
form.repwd.focus();
}
return flag;
}
function repwdCheck(){
//var node=doc.byId("repwdid");
var pwd=form.pwd.value;
var repwd=form.repwd.value;
var flag=pwd==repwd;
//var info=flag?"确认密码正确".fontcolor("#00ff00"):"确认密码错误".fontcolor("ff0000");
//echoInfo(node,info);
var ok=flag?doc.byId("repwdid").getElementsByTagName("span")[0]:doc.byId("repwdid").getElementsByTagName("span")[1];
var err=!flag?doc.byId("repwdid").getElementsByTagName("span")[0]:doc.byId("repwdid").getElementsByTagName("span")[1];
echoInfo1(ok,err);
if(flag){
form.mail.focus();
}
return flag;
}
function mailCheck(){
var inputNode=form.mail;
var regex=/^\w+@\w+(\.\w+)+$/;
//var node=doc.byId("mailid");
var flag=check(regex,inputNode.value);
//var info=flag?"E-mail正确".fontcolor("#00ff00"):"E-mail错误".fontcolor("#ff0000");
//echoInfo(node,info);
var ok=flag?doc.byId("mailid").getElementsByTagName("span")[0]:doc.byId("mailid").getElementsByTagName("span")[1];
var err=!flag?doc.byId("mailid").getElementsByTagName("span")[0]:doc.byId("mailid").getElementsByTagName("span")[1];
echoInfo1(ok,err);
if(flag){
form.submit.focus();
}
return flag;
}
function formCheck(){
/*
当确认密码检测通过以后 在修改了密码是可以提交的 当把一项检测通过后 在修改其值让该值不合法 直接点提交是通不过的 因为点提交按钮的时候释放了焦点 会去check而把flag修改为 false 当flag为false时条件满足 提交按钮时没效果的 if(!flag && repwdCheck()){event.returnValue=false;}这样就不会出现这问题了
if(!flag){
event.returnValue=false;
}
*/
if(!(userCheck() && pwdCheck() && repwdCheck() && mailCheck())){
event.returnValue=false;
}
}
</script>
</head>
<body>
<!--
<form action="http://127.0.0.1:8080" οnsubmit="formCheck()">
用户名称<input type="text" name="user" οnblur="userCheck(this)" /><span id="userid"></span><br />
输入密码<input type="password" name="pwd" οnblur="pwdCheck(this)" /><span id="pwdid"></span><br />
确认密码<input type="password" name="repwd" οnblur="repwdCheck()" /><span id="repwdid"></span><br />
邮件地址<input type="text" name="mail" οnblur="mailCheck(this)" /><span id="mailid"></span><br />
<input type="submit" value="提交查询内容"/>
</form>
-->
<form action="http://127.0.0.1:8080" οnsubmit="formCheck()">
<div id="userid">用户名称<input type="text" name="user" οnblur="userCheck(this)" /><span id="ok"><font color="#00FF00">用户名正确</font></span>
<span id="err"><font color="FF0000">用户名错误</font></span></div>
<div id="pwdid">输入密码<input type="password" name="pwd" οnblur="pwdCheck(this)" /><span id="ok"><font color="#00FF00">密码正确</font>
</span><span id="err"><font color="#FF0000">密码错误</font></span></div>
<div id="repwdid">确认密码<input type="password" name="repwd" οnblur="repwdCheck()" /><span id="ok"><font color="#00FF00">确认密码正确</font></span>
<span id="err"><font color="#FF0000">确认密码错误</font></span></div>
<div id="mailid">邮件地址<input type="text" name="mail" οnblur="mailCheck(this)" /><span id="ok"><font color="#00FF00">E-mail正确</font>
</span><span id="err"><font color="#FF0000">E-mail错误</font></span></div>
<input type="submit" name="submit" value="提交查询内容"/>
</form>
</body>
</html>
---------------------- android培训、java培训、期待与您交流！ ----------------------详细请查看：http://edu.csdn.net/heima
15万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
