邮件列表
<head>
<link rel="stylesheet" type="text/css" href="tableT.css" />
<style type="text/css">
.one{
background-color:#9bf7d5;
}
.two{
background-color:#f3e99a;
}
.over{
background-color:#ef7125;
}
</style>
<script type="text/javascript">
//行颜色间隔显示功能。
var name;
function trColor(){
//1,获取表格对象。
var oTabNode = document.getElementById("mailtable");
//2,获取行对象。
var collTrNodes = oTabNode.rows;
//3,对所有需要设置背景的行对象进行遍历。
for(var x=1; x<collTrNodes.length-1; x++){
if(x%2==1){
collTrNodes[x].className = "one";
}else{
collTrNodes[x].className = "two";
}
collTrNodes[x].onmouseover = function(){
name = this.className;
this.className = "over";
}
collTrNodes[x].onmouseout = function(){
this.className = name;
}
}
}
onload = function(){
trColor();
}
//复选框的全选动作。
function checkAll(node){
//获取所有的mail复选框。
var collMailNodes = document.getElementsByName("mail");
for(var x=0; x<collMailNodes.length; x++){
collMailNodes[x].checked = node.checked;
}
}
//定义操作复选框按钮的方法。
function checkAllByBut(num){
var collMailNodes = document.getElementsByName("mail");
for(var x=0; x<collMailNodes.length; x++){
if(num>1)
collMailNodes[x].checked = !collMailNodes[x].checked;
else
collMailNodes[x].checked = num;
}
}
//删除所选邮件。
function deleteMail(){
if(!confirm("你真的要删除所选的邮件吗？")){
return;
}
//获取所有的mail节点。
var collMailNodes = document.getElementsByName("mail");
for(var x=0; x<collMailNodes.length; x++){
if(collMailNodes[x].checked){
var oTrNode = collMailNodes[x].parentNode.parentNode;
oTrNode.parentNode.removeChild(oTrNode);
x--;
}
}
trColor();
}
</script>
</head>
<body>
<table id="mailtable">
<tr>
<th>
<input type="checkbox" name="all" onclick="checkAll(this)" />全选
</th>
<th>
发件人
</th>
<th>
邮件名称
</th>
<th>
邮件附属信息
</th>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三11
</td>
<td>
我是邮件11
</td>
<td>
我是附属信息11
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三12
</td>
<td>
我是邮件12
</td>
<td>
我是附属信息12
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三13
</td>
<td>
我是邮件13
</td>
<td>
我是附属信息13
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三14
</td>
<td>
我是邮件14
</td>
<td>
我是附属信息14
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三15
</td>
<td>
我是邮件15
</td>
<td>
我是附属信息15
</td>
</tr>
<tr>
<th>
<input type="checkbox" name="all" onclick="checkAll(this)" />全选
</th>
<th colspan="3">
<input type="button" value="全选" onclick="checkAllByBut(1)" />
<input type="button" value="取消全选" onclick="checkAllByBut(0)" />
<input type="button" value="反选" onclick="checkAllByBut(2)" />
<input type="button" value="删除所选附件" onclick="deleteMail()" />
</th>
</tr>
</table>
</body>
---------------------------------------------------------------------------------------------------------------
调查问卷与性格测试
<head>
<style type="text/css">
#contentid{
display:none;
}
#no1ul{
list-style:none;
margin:0px;
}
.close{
display:none;
}
.open{
display:block;
}
</style>
<script type="text/javascript">
function showResult(){
//1,判断是否有答案被选中。
//获取所有no1的radio并遍历判断checked状态。
var oNo1Nodes = document.getElementsByName("no1");
var flag = false;
var val;
for(var x=0; x<oNo1Nodes.length; x++){
if(oNo1Nodes[x].checked){
flag = true;
val = oNo1Nodes[x].value;
break;
}
}
if(!flag){
// alert("");
document.getElementById("errinfo").innerHTML = "没有任何答案被选中".fontcolor("red");
return;
}
if(val>=1 && val<=3){
document.getElementById("res_1").className = "open";
document.getElementById("res_2").className = "close";
}else{
document.getElementById("res_1").className = "close";
document.getElementById("res_2").className = "open";
}
}
</script>
</head>
<body>
<!--性格测试-->
<h2>欢迎您参与性格测试：</h2>
<div>
<h3>第一题：</h3>
<span>您喜欢的水果是什么？</span>
<ul id="no1ul">
<li><input type="radio" name="no1" value="1" />葡萄</li>
<li><input type="radio" name="no1" value="2" />西瓜</li>
<li><input type="radio" name="no1" value="3" />苹果</li>
<li><input type="radio" name="no1" value="4" />芒果</li>
<li><input type="radio" name="no1" value="5" />樱桃</li>
</ul>
</div>
<div>
<input type="button" value="查看测试结果" onclick="showResult()" />
<span id="errinfo"></span>
<div id="res_1" class="close">1-3分：你的性格内向并扭曲：建议...</div>
<div id="res_2" class="close">4分以上：你的性格外向并分裂，建议...</div>
</div>
<hr/>
<script type="text/javascript">
function showContent(node){
var oDivNode = document.getElementById("contentid");
with(oDivNode.style){
if(node.value=='yes'){
display = "block";
}else{
display = "none";
}
}
}
</script>
<!--问卷调查-->
<div>
您要参与问卷调查吗：
<input type="radio" name="wenjuan" value="yes" onclick="showContent(this)" />是
<input type="radio" name="wenjuan" value="no" checked="checked" onclick="showContent(this)" />否
</div>
<div id="contentid">
问卷调查内容：<br/>
您的姓名：<input type="text" /><br/>
您的邮箱：<input type="text" />
</div>
</body>
---------------------------------------------------------------------------------------------------------------
下拉菜单-选择颜色
<head>
<style type="text/css">
.clrclass{
height:50px;
width:50px;
float:left;
margin-right:30px;
}
#text{
clear:left;
margin-top:20px;
}
.selClass{
width:100px;
}
</style>
</head>
<body>
<script type="text/javascript">
function changeColor(node){
var colorVal = node.style.backgroundColor;
document.getElementById("text").style.color = colorVal;
}
</script>
<div class="clrclass" id="clr1" style="background-color:red" onclick="changeColor(this)"></div>
<div class="clrclass" id="clr2" style="background-color:green" onclick="changeColor(this)"></div>
<div class="clrclass" id="clr3" style="background-color:blue" onclick="changeColor(this)"></div>
<div id="text">
需要显示效果的文字<br/>
需要显示效果的文字<br/>
需要显示效果的文字<br/>
需要显示效果的文字<br/>
</div>
<hr/>
<script type="text/javascript">
function changeColor2(){
var oSelectNode = document.getElementsByName("selectColor")[0];
//获取所有的option
/*with(oSelectNode){
var collOptionNodes = options;
alert(options[selectedIndex].innerHTML);
}*/
var colorVal = oSelectNode.options[oSelectNode.selectedIndex].value;
document.getElementById("text").style.color = colorVal;
// for(var x=0; x<collOptionNodes.length; x++){
// alert(collOptionNodes[x].innerHTML);
// }
}
</script>
</select name="selectColor" onchange="changeColor2()">
<option value="black">选择颜色<option>
<option value="red">红色</option>
<option value="green">绿色</option>
<option value="blue">蓝色</option>
</select>
<select name="selectColor2" onchange="changeColor3()" class="selClass">
<option style="background-color:black" value="black">选择颜色</option>
<option style="background-color:red" value="red">红色</option>
<option style="background-color:green" value="green">绿色</option>
<option style="background-color:blue" value="blue">蓝色</option>
</select>
</body>
---------------------------------------------------------------------------------------------------------------
下拉菜单-选择城市
<head>
<style type="text/css">
select{
width:100px;
}
</style>
</head>
<body>
<script type="text/javascript">
function selectCity(){
var collCities = [['选择城市']
,['海淀区','朝阳区','东城区','西城区']
,['济南','青岛','烟台','威海']
,['沈阳','大连','鞍山','抚顺']
,['石家庄','保定','邯郸','廊坊']];
// var arr = {"beijing":['海淀区','朝阳区','东城区','西城区']};
//获取两个下拉菜单对象。
var oSelNode = document.getElementById("selid");
var oSubSelNode = document.getElementById("subselid");
//获取到底选择的是哪个省。
var index = oSelNode.selectedIndex;
//通过角标到容器去获取对应的城市数组。
var arrCities = collCities[index];
//将子菜单中的内容清空一下。
// for(var x=0; x<oSubSelNode.options.length;){
// oSubSelNode.removeChild(oSubSelNode.options[x]);
// }
//清除动作
oSubSelNode.length = 0;
//遍历这个数组。并将这个数组的元素封装成option对象，添加到子菜单中
for(var x=0; x<arrCities.length; x++){
var oOptNode = document.createElement("option");
oOptNode.innerHTML = arrCities[x];
oSubSelNode.appendChild(oOptNode);
}
}
</script>
<select id="selid" onchange="selectCity()">
<option>选择省市</option>
<option>山东</option>
<option>辽宁</option>
<option>河北</option>
</select>
<select id="subselid">
<option>选择城市</option>
</select>
</body>
---------------------------------------------------------------------------------------------------------------
添加删除附件
<head>
<style type="text/css">
table a:link, table a:visited{
color:#179ed9;
text-decoration:none;
}
table a:hover{
color:#f36021;
}
</style>
<script type="text/javascript">
function addFile(){
/*
因为文件选取框定义在行对象中。
所以只要给表格创建新的行和单元格即可。
*/
var oTabNode = document.getElementById("fileid");
var oTrNode = oTabNode.insertRow();
var oTdNode_file = oTrNode.insertCell();
var oTdNode_del = oTrNode.insertCell();
oTdNode_file.innerHTML = "<input type='file' />";
// oTdNode_del.innerHTML = "<a href='javascript:void(0)' onclick='deleteFile(this)'>删除附件</a>";
oTdNode_del.innerHTML = "<img src='1.jpg' alt='删除附件' onclick='deleteFile(this)' />";
}
function deleteFile(node){
var oTrNode = node.parentNode.parentNode;
oTrNode.parentNode.removeChild(oTrNode);
}
</script>
</head>
<body>
<table id="fileid">
<tr>
<td><a href="javascript:void(0)" onclick="addFile()">添加附件</a></td>
</tr>
<!--tr>
<td><input type="file" /></td>
<td>a href="javascript:void(0)">删除附件</a></td>
</tr-->
</table>
</body>
---------------------------------------------------------------------------------------------------------------
表单校验
<body>
<script type="text/javascript">
function checkUser(){
var userNode = document.getElementsByName("user")[0];
var name = userNode.value;
var userspanNode = document.getElementById("userspan");
if(name=="abc"){
userspanNode.innerHTML = "用户名正确".fontcolor("green");
}else{
userspanNode.innerHTML = "用户名错误".fontcolor("red");
}
}
</script>
<form>
用户名称：<input type="text" name="user" onblur="checkUser()" /><!--onblur:失去焦点事件-->
<span id="userspan"></span>
<br/>
输入密码：<input type="text" name="psw" onblur="checkPsw()" />
<span id="pswspan"></span>
<br/>
确认密码：<input type="text" name="repsw" onblur="checkRepsw" />
<span id="repswspan"></span>
<br/>
邮件地址：<input type="text" name="mail" onblur="checkMail" />
<span id="mailspan"></span>
<br/>
<input type="submit" value="提交数据" />
</from>
</body>
---------------------------------------------------------------------------------------------------------------
表单校验
<body>
<script type="text/javascript">
/*
//校验用户名
function checkUser(){
var flag;
var oUserNode = document.getElementsByName("user")[0];
var name = oUserNode.value;
//定义正则表达式8
var reg = new RegExp("^[a-z]{4}$","i");//必须是四个字母。
// reg = new RegExp("^\\d{4}$");// 必须是四个数字。
// reg = /^\d{4}$/;
var oSpanNode = document.getElementById("userspan");
// if(name=="abc"){
if(reg.test(name)){
oSpanNode.innerHTML = "用户名正确".fontcolor("green");
flag = true;
}else{
oSpanNode.innerHTML = "用户名错误".fontcolor("red");
flag = false;
}
return flag;
}
*/
/*
* 发现很多框的校验除了几个内容不同外，校验的过程是一样的。
* 所以进行了代码的提取。
*
*/
function check(name,reg,spanId,okinfo,errinfo){
var flag;
var val = document.getElementsByName(name)[0].value;
var oSpanNode = document.getElementById(spanId);
if(reg.test(val)){
oSpanNode.innerHTML = okinfo.fontcolor("green");
flag = true;
}else{
oSpanNode.innerHTML = errinfo.fontcolor("red");
flag = false;
}
return flag;
}
//校验用户名。
function checkUser(){
var reg = /^[a-z]{4}$/i;
return check("user",reg,"userspan","用户名正确","用户名错误");
}
//校验密码；
function checkPsw(){
var reg = /^\d{4}$/;
return check("psw",reg,"pswspan","密码格式正确","密码格式错误");
}
//校验确定密码。只要和密码一致即可。
function checkRepsw(){
var flag;
//获取密码框内容。
var pass = document.getElementsByName("psw")[0].value;
//获取确认密码框内容。
var repass = document.getElementsByName("repsw")[0].value;
//获取确认密码的span区域。
var oSpanNode = document.getElementById("repswspan");
if(pass==repass){
oSpanNode.innerHTML = "两次密码一致".fontcolor("green");
flag = true;
}else{
oSpanNode.innerHTML = "两次密码不一致".fontcolor("red");
flag = false;
}
return flag;
}
//校验邮件
function checkMail(){
var reg = /^\w+@\w+(\.\w+)+$/i;
return check("mail",reg,"mailspan","邮件地址正确","邮件地址错误");
}
// 提交事件处理。
function checkForm(){
// alert(checkUser() +"--"+ checkPsw() +"--"+ checkRepsw() +"--"+ checkMail());
if(checkUser() && checkPsw() && checkRepsw() && checkMail())
return true;
return false;
}
function mySubmit(){
var oFormNode = document.getElementById("userinfo");
oFormNode.submit();
}
</script>
<form id="userinfo" onsubmit="return checkForm()">
用户名称：<input type="text" name="user" onblur="checkUser()" />
<span id="userspan"></span>
<br/>
输入密码：<input type="text" name="psw" onblur="checkPsw()" />
<span id="pswspan"></span>
<br/>
确定密码：<input type="text" name="repsw" onblur="checkRepsw()" />
<span id="repswspan"></span>
<br/>
邮件地址：<input type="text" name="mail" onblur="checkMail()" />
<span id="mailspan"></span>
<br/>
<input type="submit" value="提交数据" />
</form>
<hr/>
<!--自定提交按钮-->
<input type="button" value="我的提交" onclick="mySubmit()" />
</body>
