级联菜单:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>级联菜单</title>
<script type="text/javascript">
function selCity()
{
var arr=[[""],["海淀区","朝阳区","东城区","西城区"]
,["武汉","荆州","宜昌","襄樊"]
,["济南","青岛","烟台","威海"]
,["沈阳","大连","鞍山","抚顺"]];
var cityNode=document.getElementById("selid");
var index=cityNode.selectedIndex;
//alert(cityNode.options[index].innerText);
var citys=arr[index];
var selsubNode=document.getElementById("selsubid");
selsubNode.options.length=0;
for(var x=0;x<citys.length;x++)
{
var optionNode=document.createElement("option");
optionNode.innerText=citys[x];
selsubNode.appendChild(optionNode);
}
}
</script>
</head>
<body>
<select id="selid" onChange="selCity()">
<option>--选择城市--</option>
<option>北京</option>
<option>湖北</option>
<option>山东</option>
<option>辽宁</option>
</select>
<select id="selsubid">
<option>--选择地区--</option>
</select>
</body>
</html>
添加删除指定附件:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>添加删除</title>
<style type="text/css">
table td a:link,table td a:visited
{
text-decoration:none;
color:#00CCFF;
}
table,table td
{
border:#0099CC 1px solid;
}
</style>
<script type="text/javascript">
var count=1;
function addFile()
{
var tabNode=document.getElementsByTagName("table")[0];
var trNode=tabNode.insertRow();
trNode.id="tr_"+count;
var tdNode_file=trNode.insertCell();
var tdNode_del=trNode.insertCell();
tdNode_file.innerHTML="<input type='file'/>";
tdNode_del.innerHTML="<a href='javascript:void(0)' οnclick='delfile("+count+")'>删除附件</a>"
count++;
}
function delfile(num)
{
var trNode=document.getElementById("tr_"+num);
trNode.parentNode.removeChild(trNode);
}
</script>
</head>
<body>
<table>
<tr>
<td>
<a href="javascript:void(0)" onClick="addFile()">添加附件</a>
</td>
</tr>
</table>
</body>
</html>
模拟邮件全选、反选、取消全选、删除所选、颜色间隔、高亮显示:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
table
{
width:70%;
border:#0000CC 1px solid;
}
table th,table td
{
border:#0066CC 1px solid;
}
table th
{
background-color:#33CC00;
}
.one
{
background-color:#FFCC00;
}
.two
{
background-color:#99FF33;
}
.over
{
background-color:#9900FF;
}
</style>
<script type="text/javascript">
var name;
window.οnlοad=function trColor()
{
var tabNode=document.getElementsByTagName("table")[0];
var trs=tabNode.rows;
for(var x=1;x<trs.length;x++)
{
if(x%2==1)
{
trs[x].className="one";
}
else
trs[x].className="two";
trs[x].οnmοuseοver=function()
{
name=this.className;
this.className="over";
}
trs[x].οnmοuseοut=function()
{
this.className=name;
}
}
}
function checkAll(index)
{
var allNode=document.getElementsByName("all")[index];
var mails=document.getElementsByName("mail");
for(var x=0;x<mails.length;x++)
{
mails[x].checked=allNode.checked;
}
}
//完成按钮的全选、反选、取消全选的功能
function checkButton(num)
{
var mails=document.getElementsByName("mail");
for(var x=0;x<mails.length;x++)
{
if(num>1)
mails[x].checked=!mails[x].checked;
else
mails[x].checked=num;//利用javascript特性,0、null为假,非0、非null为真
}
}
//完成删除邮件的功能
var arr=new Array();
var pos=0;//定义指针,记录位置
function delMail()
{
var mails=document.getElementsByName("mail");
for(var x=0;x<mails.length;x++)
{
if(mails[x].checked)
arr[pos++]=mails[x];
}
for(var x=0;x<arr.length;x++)
{
var trNode=arr[x].parentNode.parentNode;
trNode.parentNode.removeChild(trNode);
}
trColor();
}
</script>
</head>
<body>
<table>
<tr>
<th><input type="checkbox" name="all" οnclick="checkAll(0)"/>全选</th>
<th>发件人</th>
<th>邮件名称</th>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>张三00</td>
<td>新的邮件</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>张三11</td>
<td>新的邮件</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>张三22</td>
<td>新的邮件</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>张三33</td>
<td>新的邮件</td>
</tr>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>张三44</td>
<td>新的邮件</td>
</tr>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>张三55</td>
<td>新的邮件</td>
</tr>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>张三66</td>
<td>新的邮件</td>
</tr>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>张三77</td>
<td>新的邮件</td>
</tr>
<tr>
<th><input type="checkbox" name="all" onClick="checkAll(1)"/>全选</th>
<th colspan="2">
<input type="button" value="全选" onClick="checkButton(1)"/>
<input type="button" value="取消全选" onClick="checkButton(0)"/>
<input type="button" value="反选" onClick="checkButton(2)"/>
<input type="button" value="删除所选邮件" onClick="delMail()"/>
</th>
</tr>
</table>
</body>
</html>
表单校验:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>表单校验</title>
<style type="text/css">
form
{
background-color:#66CCFF;
border:#0033CC 1px solid;
width:350px;
}
</style>
<script>
function checkUser(userNode)
{
var user=userNode.value;
var userSpanNode=document.getElementById("userid");
var userReg=/^[a-z]{5}$/i;//只能是五位的字母,不区分大小写
if(user.match(userReg))
userSpanNode.innerHTML="用户名正确".fontcolor("green");
else
userSpanNode.innerHTML="用户名错误".fontcolor("red");
}
var password;
function checkPassword(passwordNode)
{
password=passwordNode.value;
var passwordSpanNode=document.getElementById("pswid");
var passwordReg=/^\w{5,15}$/;//密码能是5-15位的数字或者字母
if(password.match(passwordReg))
passwordSpanNode.innerHTML="密码正确".fontcolor("green");
else
passwordSpanNode.innerHTML="密码错误".fontcolor("red");
}
function checkRepsw(repasswordNode)
{
var repassword=repasswordNode.value;
var repasswordNode=document.getElementById("repswid");
if(repassword==password)
repasswordNode.innerHTML="输入正确".fontcolor("green");
else
repasswordNode.innerHTML="输入错误".fontcolor("red");
}
function checkMail(mailNode)
{
var mail=mailNode.value;
var mailSpanNode=document.getElementById("mailid");
var mailReg=/^\w+@\w+(\.\w+)+$/;
if(mail.match(mailReg))
mailSpanNode.innerHTML="邮箱格式正确".fontcolor("green");
else
mailSpanNode.innerHTML="邮箱格式错误".fontcolor("red");
}
</script>
</head>
<body>
<form>
用户名称:<input type="text"name="user" onBlur="checkUser(this)"/>
<span id="userid"></span><br/>
输入密码:<input type="text"name="psw" onBlur="checkPassword(this)"/>
<span id="pswid"></span>
<br/>
确认密码:<input type="text"name="repsw" onBlur="checkRepsw(this)"/>
<span id="repswid"></span><br/>
邮件地址:<input type="text"name="mail" onBlur="checkMail(this)"/>
<span id="mailid"></span>
<br/>
<input type="submit"value="提交数据"/>
</form>
</body>
</html>