JavaScript之 ------ 综合应用
2015-10-24 16:36
537 查看
一、列表菜单
1、实现功能：点击菜单，显示菜单下的内容，再次点击，隐藏内容注：把height+overflow样式同时设在<d1>能够解决菜单块显示重叠问题
<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
<title>演示列表菜单</title>
<style type="text/css">
dd{
margin:0px;
}
dl{
height:16px;
overflow:hidden;
}
.open{
height:90px;
overflow:visible;
}
.close{
height:16px;
overflow:hidden;
}
</style>
<script type="text/javascript">
var flag = true;
function list(x){
//alert("aa");
var oDlNode = document.getElementsByTagName("dl")[x];
if(flag){
oDlNode.style.overflow="visible";//这种单独设置overflow样式，会出现菜单块重叠的问题
flag=false;
}else{
oDlNode.style.overflow="hidden";
flag=true;
}
}
</script>
</head>
<body>
<dl>
<dt onclick="list(0)">菜单条1</dt>
<dd>菜单项1</dd>
<dd>菜单项2</dd>
<dd>菜单项3</dd>
<dd>菜单项4</dd>
</dl>
<dl>
<dt onclick="list(1)">菜单条2</dt>
<dd>菜单项1</dd>
<dd>菜单项2</dd>
<dd>菜单项3</dd>
<dd>菜单项4</dd>
</dl>
<dl>
<dt onclick="list(2)">菜单条3</dt>
<dd>菜单项1</dd>
<dd>菜单项2</dd>
<dd>菜单项3</dd>
<dd>菜单项4</dd>
</dl>
<!-- ------------------------- -->
<script type="text/javascript">
function list2( oDtNode ){
//alert(oDlNode.className);
//alert(oDlNode.nodeName);
var oDlNode = oDtNode.parentNode;
if(oDlNode.className=="open"){
oDlNode.className = "close";//而这种high+overflow的方式可以解决菜单块重叠的问题
}else{
oDlNode.className = "open";
}
}
</script>
<hr/>
<dl>
<dt onclick="list2(this)">菜单条1</dt>
<dd>菜单项1</dd>
<dd>菜单项2</dd>
<dd>菜单项3</dd>
<dd>菜单项4</dd>
</dl>
<dl>
<dt onclick="list2(this)">菜单条2</dt>
<dd>菜单项1</dd>
<dd>菜单项2</dd>
<dd>菜单项3</dd>
<dd>菜单项4</dd>
</dl>
<dl>
<dt onclick="list2(this)">菜单条3</dt>
<dd>菜单项1</dd>
<dd>菜单项2</dd>
<dd>菜单项3</dd>
<dd>菜单项4</dd>
</dl>
</body>
</html>
</span>结果：
2、实现功能：在1的基础上，通过表格封装菜单，且同时只能打开一个菜单块
<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
<title>演示列表菜单</title>
<style type="text/css">
ul{
list-style:none;
margin:0px;
padding:0px;
display:none;
}
table{
border:#8080ff solid 1px;
width:80px;
}
table td a:link, table td a:visited{
text-decoration:none;
color:#8080FF;
}
.open{
display:block;
}
.close{
display:none;
}
</style>
<script type="text/javascript">
function list( node ){
var oTdNode = node.parentNode;
var oUlNode = oTdNode.getElementsByTagName("ul")[0];
//获取表格对象
var oTabelNode = document.getElementById("tableFriends");
var colUlNodes = oTabelNode.getElementsByTagName("ul");
for(var x=0; x<colUlNodes.length; x++){
/*
if(colUlNodes[x]==oUlNode){
if(oUlNode.className=="open"){
oUlNode.className="close";
}else{
oUlNode.className="open";
}
}else{
colUlNodes[x].className="close";
}
*/
if(colUlNodes[x]==oUlNode && oUlNode.className!="open" ){
oUlNode.className="open";
}else{
colUlNodes[x].className="close";
}
}
}
</script>
</head>
<body>
<table id="tableFriends">
<tr>
<td>
<a href="javascript:void(0)" onclick="list(this)">好友菜单</a>
<ul>
<li>一个好友1</li>
<li>一个好友2</li>
<li>一个好友3</li>
<li>一个好友4</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="list(this)">同事菜单</a>
<ul>
<li>一个同事1</li>
<li>一个同事2</li>
<li>一个同事3</li>
<li>一个同事4</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="list(this)">黑友菜单</a>
<ul>
<li>一个黑友1</li>
<li>一个黑友2</li>
<li>一个黑友3</li>
<li>一个黑友4</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="list(this)">黑友菜单</a>
<ul>
<li>一个黑友1</li>
<li>一个黑友2</li>
<li>一个黑友3</li>
<li>一个黑友4</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
</span>现象：
3、实现功能：鼠标放在菜单条上时，显示菜单块，离开菜单条和菜单块时，隐藏菜单块，且鼠标放的行有颜色变化
<span style="font-size:14px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>演示列表菜单</title>
<style type="text/css">
#newsid ul{
list-style:none;
}
#newslist li{
float:left;
width:180px;
}
#newslist li ul{
margin:0px;
padding:0px;
display:none;
}
#newslist li ul li{
line-height:25px;
}
#newslist li a{
display:block;
text-decoration:none;
color:#ffffff;
background-color:#0000ff;
line-height:25px;
text-align:center;
}
#newslist li a:hover{
color:#06c;
background-color:#cccccc;
}
</style>
<script type="text/javascript">
function list(node){
//var pNode=node;
var ulNode=node.getElementsByTagName("ul")[0];
with(ulNode.style){
display=(display=="block")?"none":"block";
}
}
</script>
</head>
<body>
<div id="newsid">
<ul id="newslist">
<li onmouseover="list(this)"; onmouseout="list(this)">
<a href="javascript:void(0)">csdn新闻</a>
<ul>
<li>
<a href="http://www.baidu.com">csdn新闻内容摘要</a>
</li>
<li>
<a href="http://www.baidu.com">csdn新闻内容摘要</a>
</li>
<li>
<a href="http://www.baidu.com">csdn新闻内容摘要</a>
</li>
<li>
<a href="http://www.baidu.com">csdn新闻内容摘要</a>
</li>
<li>
<a href="http://www.baidu.com">csdn新闻内容摘要</a>
</li>
</ul>
</li>
<li onmouseover="list(this)"; onmouseout="list(this)">
<a href="javascript:void(0)">大学新闻</a>
<ul>
<li>
<a href="http://www.baidu.com">大学新闻内容摘要</a>
</li>
<li>
<a href="http://www.baidu.com">大学新闻内容摘要</a>
</li>
<li>
<a href="http://www.baidu.com">大学新闻内容摘要</a>
</li>
<li>
<a href="http://www.baidu.com">大学新闻内容摘要</a>
</li>
<li>
<a href="http://www.baidu.com">大学新闻内容摘要</a>
</li>
</ul>
</li>
<li onmouseover="list(this)"; onmouseout="list(this)">
<a href="javascript:void(0)">社会新闻</a>
<ul>
<li>
<a href="http://www.baidu.com">社会新闻内容摘要</a>
</li>
<li>
<a href="http://www.baidu.com">社会新闻内容摘要</a>
</li>
<li>
<a href="http://www.baidu.com">社会新闻内容摘要</a>
</li>
<li>
<a href="http://www.baidu.com">社会新闻内容摘要</a>
</li>
<li>
<a href="http://www.baidu.com">社会新闻内容摘要</a>
</li>
</ul>
</li>
<li onmouseover="list(this)"; onmouseout="list(this)">
<a href="javascript:void(0)">就业新闻</a>
<ul>
<li>
<a href="http://www.baidu.com">就业新闻内容摘要</a>
</li>
<li>
<a href="http://www.baidu.com">就业新闻内容摘要</a>
</li>
<li>
<a href="http://www.baidu.com">就业新闻内容摘要</a>
</li>
<li>
<a href="http://www.baidu.com">就业新闻内容摘要</a>
</li>
<li>
<a href="http://www.baidu.com">就业新闻内容摘要</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
</span>现象：
二、快捷设置文本字体
实现功能：将文字设置为超链接，用来设置文本的字体1、通过获取文本的节点，单独设置样式中的字体和颜色
2、通过获取文本的节点，设置此节点的className，与导进的css样式中的通过className方式设置的样式对应起来，从而实现对文本的字体设置
<span style="font-size:14px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>News Font</title>
<style type="text/css">
div{
border:#ff8040 solid 1px;
width:800px;
padding:30px;
margin:10px;
}
</style>
<link rel=stylesheet href="div.css" type="text/css">
<script type="text/javascript">
function changeFont(size,textcolor){//1
var oNewstext = document.getElementById("newsText");
oNewstext.style.fontSize=size+"px";
oNewstext.style.color=textcolor;
}
function changeFont2(strClassName){//2
//alert("aa");
var oNewstext2 = document.getElementById("newsText");
oNewstext2.className=strClassName;
}
</script>
</head>
<body>
<h1>这是一个新闻标题</h1>
<hr/>
<a href="javascript:void(0)" onclick="changeFont(28,'red')">大字体</a>
<a href="javascript:void(0)" onclick="changeFont(24,'blue')">中字体</a>
<a href="javascript:void(0)" onclick="changeFont(20,'green')">小字体</a>
<a href="javascript:void(0)" onclick="changeFont2('max')">max</a>
<a href="javascript:void(0)" onclick="changeFont2('norm')">norm</a>
<a href="javascript:void(0)" onclick="changeFont2('min')">min</a>
<div id="newsText" class="max">
(本网讯) 9 月29 日 下午2点半，在教职工活动中心召开了学校教职工羽毛球队成立会，副校长、工会主席郑卫民、工会、教职工羽毛球队教练及全体队员参加会议。全校在职工会会员均可报名参加，本次共选拔男女队员各8名共16人组成教职工羽毛球队。
在宣布了队员名单及组织学习了《关于成立教职工羽毛球队的方案》后，现场颁发了羽毛球队教练、队长和副队长聘书。
</div>
</body>
</html>
</span>结果：
三、对表格的一些操作（创建，删除，设置颜色，排序等）
1、创建表格1）通过DOM树模型，一层一层的建立表格 ------ 最底层的创建方式，费劲，但功能很强
2）利用table中的现有的功能实现的
注：表格的,<table>标签和<tr>标签中间，其实还隐藏着一个<tbody>标签----表格体
<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
<title>演示列表菜单</title>
<style type="text/css">
table{
border: #249bdb 1px solid;
width:600px;
border-collapse:collapse;
}
td{
border: #249bdb 1px solid;
padding:5px;
}
</style>
<script type="text/javascript">
//方式1：最底层的创建方式，费劲，但功能很强
function createTable(){
//利用document.createElement()创建元素的形式来进行
//先创建各标签元素
var oTableNode = document.createElement("table"); //<table>
var oTbodyNode = document.createElement("tbody");//<tbody>
var oTrNode = document.createElement("tr");//<tr>
var oTdNode = document.createElement("td");//<td>
//把上面的这些标签元素组合成一棵对象树---table子树
oTrNode.appendChild(oTdNode);
oTbodyNode.appendChild(oTrNode);
oTableNode.appendChild(oTbodyNode);
document.getElementById("div0").appendChild(oTableNode);
}
//方式2：利用“table对象”中的现有功能来实现
//函数：createCaption、createTFoot、createTHead、deleteCaption、deleteRow、insertRow
//集合：cells，rows
function createTable2(){
var oTableNode = document.createElement("table");
var oTrNode = oTableNode.insertRow();
var oTdNode = oTrNode.insertCell();
oTdNode.innerHTML="一个新单元格";
document.getElementById("div0").appendChild(oTableNode);
}
//添加5行6列
function createTable3(){
var oTableNode = document.createElement("table");
for(var x=0;x<5;x++){
var oTrNode = oTableNode.insertRow();
for(var y=0;y<6;y++){
var oTdNode = oTrNode.insertCell();
oTdNode.innerHTML="单元格"+(x+1)+"-"+(y+1);
}
}
document.getElementById("div0").appendChild(oTableNode);
}
</script>
</head>
<body>
<input type="button" value="创建表格1" onclick="createTable()"/>
<br>
<input type="button" value="创建表格2" onclick="createTable2()"/>
<br>
<input type="button" value="创建表格:5行6列" onclick="createTable3()"/>
<hr/>
<div id="div0"> </div>
</body>
</html>
</span>结果：
2、灵活创建和删除（也就是按给定的行列进行创建和删除）
<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
<title>演示列表菜单</title>
<style type="text/css">
table{
border: #249bdb 1px solid;
width:600px;
border-collapse:collapse;
}
td{
border: #249bdb 1px solid;
padding:5px;
}
</style>
<script type="text/javascript">
//添加5行6列
function createTable3(){
var oTableNode = document.createElement("table");
for(var x=0;x<5;x++){
var oTrNode = oTableNode.insertRow();
for(var y=0;y<6;y++){
var oTdNode = oTrNode.insertCell();
oTdNode.innerHTML="单元格"+(x+1)+"-"+(y+1);
}
}
document.getElementById("div0").appendChild(oTableNode);
document.getElementById("crtBtn").disabled=true;
}
//10.6日开始的代码
function createTable4(){
var oTableNode = document.createElement("table");
//为动态创建的table设置id属性，为了方便后面对创建的table进行操作
//oTableNode.id = "tableid";//法1
oTableNode.setAttribute("id","tableid");//法2
var rowValue = parseInt( document.getElementsByName("rowNum")[0].value );
//特判，卫条件
if(isNaN(rowValue) || rowValue<=0 ){
alert("行号格式错误!");
return;
}
var colValue = parseInt( document.getElementsByName("colNum")[0].value );
if(isNaN(colValue) || colValue<=0){
alert("列号格式错误!");
return;
}
for(var x=0;x<rowValue;x++){
var oTrNode = oTableNode.insertRow();
for(var y=0;y<colValue;y++){
var oTdNode = oTrNode.insertCell();
oTdNode.innerHTML="单元格"+(x+1)+"-"+(y+1);
}
}
document.getElementById("div0").appendChild(oTableNode);
document.getElementById("crtBtn2").disabled=true;
}
function delRow(){
var oTableNode = document.getElementById("tableid");
if(oTableNode==null){
alert("表格不存在，无法进行删除操作!");
return;
}
var rowValue = parseInt( document.getElementsByName("rowNum2")[0].value );
//特判，卫条件
if( isNaN(rowValue) ){
alert("行号格式错误!");
return;
}
if(rowValue>=1 && rowValue<=oTableNode.rows.length){
oTableNode.deleteRow(rowValue-1);
}else{
alert("要删除的行不存在!")
}
}
function delCol(){
var oTableNode = document.getElementById("tableid");
if(oTableNode==null){
alert("表格不存在，无法进行删除操作!");
return;
}
var colValue = parseInt( document.getElementsByName("colNum2")[0].value );
//特判，卫条件
if( isNaN(colValue) ){
alert("列号格式错误!");
return;
}
if(!(colValue>=1 && colValue<=oTableNode.rows[0].cells.length) ){
alert("要删除的行不存在!")
return;
}
//真正的删除列动作
for(var x=0; x<oTableNode.rows.length; x++){
oTableNode.rows[x].deleteCell(colValue-1);
}
}
</script>
</head>
<body>
<input id="crtBtn" type="button" value="创建表格:5行6列" onclick="createTable3()"/>
<br/>
行:<input type="text" name="rowNum" /> 列:<input type="text" name="colNum"/>
<input id="crtBtn2" type="button" value="创建表格" onclick="createTable4()"/>
<br/>
行号:<input type="text" name="rowNum2" /> <input id="delBtn" type="button" value="删除行" onclick="delRow()"/><br>
列号:<input type="text" name="colNum2"/><input id="delBtn" type="button" value="删除列" onclick="delCol()"/><br>
<hr/>
<div id="div0"> </div>
</body>
</html>
</span>结果：
3、设置颜色和排序
1）颜色：通过奇偶行号，设置不同的两种颜色，且鼠标放上后变为第三种颜色，离开后恢复原来颜色
2）排序：通过点击表格中的年龄项，表格中的内容通过年龄的大小，进行排序，且年龄项做出相应的变化
<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
<title>演示表格排序</title>
<link rel="stylesheet" type="text/css" href="table.css">
<style type="text/css">
.one{
background-color:#00FF00;
}
.two{
background-color:#8080FF;
}
.over{
background-color:#FFFFFF;
font-size:16px; /*常识：网页当中默认字体大小是16px*/
}
th a:link, th a:visited{
color:#FF0000;
text-decoration:none;
}
</style>
<script type="text/javascript">
var name; //函数外面定义，才是全局的变量
function trColor(){
//alert("aa");
//1获得table对象
var oTableNode = document.getElementById("info");
//alert(oTableNode.nodeName);
//2获得table中的rows集合
var collTrs = oTableNode.rows;
//alert(collTrs.length);
//3遍历rows集合，为每一个元素(行对象)添加class属性
for(var x=1; x<collTrs.length; x++){
if(x%2==1){
collTrs[x].className = "one"; //属性
}else{
collTrs[x].className = "two";
}
//※为每一个<tr>对象注册事件
collTrs[x].onmouseover=function(){ //事件
//必须用 this 才能指代当前的行对象collTrs[x]
name = this.className; //备份高亮之前的样式
this.className = "over";
}
collTrs[x].onmouseout=function(){ //事件
//必须用 this 才能指代当前的行对象collTrs[x]
this.className = name;//用高亮之前备份的样式，进行恢复
}
}
}
//onload = trColor();//解析时就调用了，导致效果没出来！！！！！！---因为解析该语句时，body中的table还没有加载
//解析时并没有调用，要等到onload事件发生时才会调用里面的功能，此时body中的table已经加载完，因此有效
//该写法还有一个好处：在function()内部还可以调用其它函数或写其它执行语句
onload = function(){
trColor();
}
function over(trNode){
trNode.className="over";
}
//表格排序
var flag=true;
function sortTable(aNode){
var oTabeNode = document.getElementById("info");
var collTrs = oTabeNode.rows;
//定义一个临时容器，存储要排序的行对象。并且要从原集合中拷贝一份独立的数据出来，进行排序
var trArr =[];
for(var x=1;x<collTrs.length;x++ ){//注意，表表不需要排序，因此从1开始
trArr[x-1] = collTrs[x];
}
//排序
mySort(trArr);//trArr[]中的每个元素是一个行对象
if(flag){
for(var x=0;x<trArr.length;x++){
trArr[x].parentNode.appendChild(trArr[x]);
}
aNode.innerHTML = "年龄↑";
}else{
for(var x=trArr.length-1;x>=0;x--){
trArr[x].parentNode.appendChild(trArr[x]);
}
aNode.innerHTML = "年龄↓";
}
flag=!flag;
trColor();
}
function mySort( arr ){
for(var x=0; x<arr.length-1; x++){
for(var y=x+1;y<arr.length; y++){
if(parseInt(arr[x].cells[1].innerHTML) > parseInt(arr[y].cells[1].innerHTML) ){
//arr[x].swapNode(arr[y]);//没有成功
var temp=arr[x]; arr[x]=arr[y]; arr[y]=temp;
}
}
}
}
</script>
</head>
<body>
<table id="info">
<tr> <th>姓名</th>
<th> <a href="javascript:void(0)" onclick="sortTable(this)">年龄</a> </th>
<th>地址</th> </tr>
<tr> <td>张三</td> <td>25</td> <td>湖南长沙</td> </tr>
<tr> <td>张4</td> <td>26</td> <td>湖南长沙</td> </tr>
<tr> <td>张5</td> <td>23</td> <td>湖南益阳</td> </tr>
<tr> <td>李小</td> <td>24</td> <td>美国华盛顿</td> </tr>
<tr> <td>Jack</td> <td>28</td> <td>伦敦</td> </tr>
<tr> <td>张2222</td> <td>16</td> <td>湖南长沙</td> </tr>
<tr> <td>张3333</td> <td>13</td> <td>湖南益阳</td> </tr>
<tr> <td>李小222</td> <td>14</td> <td>美国华盛顿</td> </tr>
<tr> <td>Jack222</td> <td>18</td> <td>伦敦</td> </tr>
</table>
</body>
</html>
</span>结果：
四、选择框的应用（类似如邮件管理）
实现功能：类似如邮箱中对邮件的管理：选择邮件，删除邮件，全选，反选，取消全选等
<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
<title>演示复选框组件的操纵</title>
<link rel="stylesheet" type="text/css" href="table.css"/>
<style type="text/css">
.one{
background-color:#00FF00;
}
.two{
background-color:#FF8040;
}
.over{
background-color:#CCCCCC;
}
</style>
<script type="text/javascript">
function checkAll(node){
var collMailNodes = document.getElementsByName("mail");
for(var x=0; x<collMailNodes.length; x++){
collMailNodes[x].checked= node.checked;
}
var collMailNodes2 = document.getElementsByName("allMail");
for(var x=0; x<collMailNodes2.length; x++){
collMailNodes2[x].checked= node.checked;
}
}
function trColor(){
var oTableNode = document.getElementById("info");
var collTrs = oTableNode.rows;
for(var x=1; x<collTrs.length; x++){
if(x%2==1){
collTrs[x].className = "one";
}else{
collTrs[x].className = "two";
}
}
}
var name;
function trAddEvent(){
var oTableNode = document.getElementById("info");
var collTrs = oTableNode.rows;
for(var x=1; x<collTrs.length; x++){
//给每一个<tr>对象注册一下鼠标over和out事件
collTrs[x].onmouseover = function(){
name = this.className;
this.className = "over";
}
collTrs[x].onmouseout = function(){
this.className = name;
}
collTrs[x].getElementsByTagName("input")[0].onclick= function(){
//alert("aa");
document.getElementsByName("allMail")[0].indeterminate=true;
}
}
}
onload = function(){
trColor();
trAddEvent();
}
function checkAllByBtn(num){
var collMailNodes = document.getElementsByName("mail");
for(var x=0; x<collMailNodes.length; x++){
/*
if(num==1){
collMailNodes[x].checked = true; //非0
}else if(num==0){
collMailNodes[x].checked = false;//0
}else if(num==2){
collMailNodes[x].checked =!(collMailNodes[x].checked);
}
*/
if(num<2){
collMailNodes[x].checked = num;
}else{
collMailNodes[x].checked =!(collMailNodes[x].checked);
}
}
}
function deleteMail(){
var collMailNodes = document.getElementsByName("mail");
//如果倒着删，那么就不需要修正索引x了
for(var x=0; x<collMailNodes.length; x++){
if(collMailNodes[x].checked){
//我们现在手上拿的是 collMailNodes[x],它是一个checkbox对象。那么要删除该checkbox所在的行，必须通过它拿到相应的<tr>对象。然后才能进行删除
//获取<tr>对象
var oTrNode = collMailNodes[x].parentNode.parentNode;
//删除行节点
oTrNode.parentNode.removeChild(oTrNode);
//节点容器跟Java当中的集合一样，只要是remove()，长度就会变的。这里，需要进行x的复位
x--;
}
}
trColor();
}
</script>
</head>
<body>
<table id="info">
<tr> <th><input type="checkbox" name="allMail" onclick="checkAll(this)" /> 全选 </th> <th>发件人</th> <th>邮件标题</th> <th>邮件附属信息</th></tr>
<tr> <td><input type="checkbox" name="mail" /> </td> <td>张三</td> <td>国庆祝福</td> <td>邮件附属信息1....</td></tr>
<tr> <td><input type="checkbox" name="mail" /> </td> <td>Jack1</td> <td>假期堵车</td> <td>邮件附属信息2....</td></tr>
<tr> <td><input type="checkbox" name="mail" /> </td> <td>Jack2</td> <td>假期堵车</td> <td>邮件附属信息3....</td></tr>
<tr> <td><input type="checkbox" name="mail" /> </td> <td>Jack3</td> <td>假期堵车</td> <td>邮件附属信息4....</td></tr>
<tr> <td><input type="checkbox" name="mail" /> </td> <td>Jack4</td> <td>假期堵车</td> <td>邮件附属信息5....</td></tr>
<tr> <td><input type="checkbox" name="mail" /> </td> <td>Tom1</td> <td>一些广告</td> <td>邮件附属信息6....</td></tr>
<tr> <td><input type="checkbox" name="mail" /> </td> <td>Tom2</td> <td>一些广告</td> <td>邮件附属信息6....</td></tr>
<tr> <td><input type="checkbox" name="mail" /> </td> <td>Tom3</td> <td>一些广告</td> <td>邮件附属信息6....</td></tr>
<tr> <td><input type="checkbox" name="mail" /> </td> <td>Tom4</td> <td>一些广告</td> <td>邮件附属信息6....</td></tr>
<tr>
<th> <input type="checkbox" name="allMail" onclick="checkAll(this)"/> 全选 </th>
<th colspan="3">
<input type="button" value="全选" onclick="checkAllByBtn(1)"/>
<input type="button" value="取消全选" onclick="checkAllByBtn(0)"/>
<input type="button" value="反选" onclick="checkAllByBtn(2)" />
<input type="button" value="删除所选邮件" onclick="deleteMail()"/>
</th>
</tr>
</table>
<br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
</span>结果：
五、正则表达式的应用（用户注册）
通过正则表达式实现用户注册页面1、正则表达式定义法1
var reg = /^[0-9]{6}$/; //必须是6个数字，而且必须是6个。多了或少了都不行。
2、正则表达式定义法2
var reg = new RegExp("^[0-9]{6}$");
3、细节
var reg = new RegExp("[a-z]{4}","i");//带参数，只要包含连续4个字母就行，忽略大小写
var reg = new RegExp("^[a-z]{4}","i");//带参数，必须以连续4个字母开始，忽略大小写
var reg = new RegExp("^[a-z]{4}$","i");//带参数，有且只有连续4个字母，忽略大小写
var reg = / ^\d{6}$ /; //特殊符号不需要转义，外面也不用加引号
3、表单的提交
<span style="font-size:14px;">function mySubmit(){
var oFormNode = document.getElementById("userForm");
oFormNode.submit();//直接利用<form>对象当中的submit()方法进行手动提交
/* 以后开发时应该写成下面的框架，只有各组件的数据输入都合法，才手动提交
if( checkUser() ){
oFormNode.submit();
}
*/
} </span>5、源代码
<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
<title>演示用正则表达式来验证表单中的数据</title>
<style type="text/css">
</style>
<script type="text/javascript">
function check(name,reg,spanId,okInfo,erroInfo){
var oUserNode = document.getElementsByName(name)[0]; //※psw ----name
var name = oUserNode.value;
var oUserSpanNode = document.getElementById(spanId); //※pswspan -----spanId
if( reg.test(name) ){//验证
oUserSpanNode.innerHTML = okInfo.fontcolor("green"); //※"该密码安全度适中" ----okInfo
return true;
}else{
oUserSpanNode.innerHTML = erroInfo.fontcolor("red");//※"密码长度至少要6位数字！请重新输入" ----erroInfo
return false;
}
}
function checkUser(){
var reg = new RegExp("^[a-z]{4}","i");//带参数，必须以连续4个字母开始，忽略大小写
return check("user",reg,"userspan","恭喜，该用户名可以注册","抱歉，该用户名已经存在！请换一个名字");
}
function checkPsw(){
var reg = new RegExp("^[0-9]{6}"); //※正则表达式
return check("psw",reg,"pswspan","该密码安全度适中,可以使用","密码长度至少要6位数字！请重新输入");
}
function checkMail(){
var reg = /^\w+@\w+(\.\w+)+$/i;
return check("mail",reg,"mailspan","邮箱地址格式正确","邮箱地址错误!");
}
function checkPsw2(){ //验证psw1 和 psw2 当中的数据是否一致
var psw = document.getElementsByName ("psw")[0].value;
var psw2 = document.getElementsByName ("psw2")[0].value;
var oPsw2SpanNode = document.getElementById("psw2span");
//可以考虑先进行trim
if(psw==psw2){
oPsw2SpanNode.innerHTML = "两次密码一致!".fontcolor("green");
return true;
}else{
oPsw2SpanNode.innerHTML = "两次密码不一致，请重新输入!".fontcolor("red");
return false;
}
}
function checkForm(){
if(checkUser() && checkPsw() && checkPsw2() &&checkMail() ){
return true;
}
return false;
}
</script>
</head>
<body>
<h2>用户注册</h2>
<form id="userinfo" action="" 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="psw2" onblur="checkPsw2()">
<span id="psw2span"></span><br/>
邮箱地址:<input type="text" name="mail" onblur="checkMail()">
<span id="mailspan"></span><br/>
<input type="submit" value="注册">
</form>
<br/><br/><br/><br/><br/><br/>
</body>
</html>
</span>结果：
六、下拉框的应用（设置字体颜色、两个下拉框的对应）
1、设置字体颜色<!DOCTYPE html>
<html>
<head>
<title>演示下拉组合框组件的操纵</title>
<style type="text/css">
.clrClass{
height:50px;
width:50px;
margin-right:30px;
margin-bottom:30px;
float:left;
}
</style>
<script type="text/javascript">
function changeColor(node){
var colorValue = node.style.backgroundColor;
document.getElementById("text").style.color=colorValue;
}
function changeColor2(){
var oSelectNode= document.getElementsByName("selectColor")[0];
var colorValue = oSelectNode.value;
//alert(colorValue);
document.getElementById("text").style.color=colorValue;
//有关select组件的一些功能演示:手动获取组合框当中的相关信息
var collOptionNodes = oSelectNode.options;//所有的选项集合
/*
for(var x=0; x<collOptionNodes.length; x++){
alert(collOptionNodes[x].innerHTML);
}
*/
//可以通过select对象获得用户当前所选择的选项序号
//alert(oSelectNode.selectedIndex);
//alert(collOptionNodes[oSelectNode.selectedIndex].innerHTML);
}
</script>
</head>
<body>
<div id="clr1" class="clrClass" style="background-color:red" onclick="changeColor(this)"></div>
<div id="clr2" class="clrClass" style="background-color:green" onclick="changeColor(this)"></div>
<div id="clr3" class="clrClass" style="background-color:blue" onclick="changeColor(this)"></div>
<hr style="clear:left"/>
<div id="text">
显示效果文字<br/>
显示效果文字<br/>
显示效果文字<br/>
显示效果文字<br/>
</div>
<hr/>
<!--
<select name="selectColor" onclick="changeColor2()">
-->
<select name="selectColor" onchange="changeColor2()">
<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>
<br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
结果：
2、两个下拉框之间的对应
<!DOCTYPE html>
<html>
<head>
<title>演示下拉组合框组件的二级联动</title>
<style type="text/css">
</style>
<script type="text/javascript">
function selectCity(){
var collCites = [['选择城市'],
['东城区','西城区','海滨区','朝阳区'],
['益阳','长沙','娄底','株洲'],
['金华','杭州','温州','宁波'],
['南昌','九江','萍乡','上饶']
];
//获取两个组合框(下拉菜单)
var oSelNode = document.getElementById("selid");
var oSubSelNode = document.getElementById("subselid");
//要先清空组合框中原来的选项，才能再添加。否则新选项会一直追加到后面
/*法1
var len = oSubSelNode.options.length;
for(var x=1; x<len;x++){
oSubSelNode.removeChild(oSubSelNode.options[1]);
}
*/
//法2
oSubSelNode.length =1;
var index = oSelNode.selectedIndex;//获得用户在省份组合框所选的选项序号
var arrCities = collCites[index];
for(var x=0; x<arrCities.length; x++){
var oOptionNode = document.createElement("option");
oOptionNode.innerHTML=arrCities[x];
oSubSelNode.appendChild(oOptionNode);
}
}
</script>
</head>
<body>
<select id="selid" onchange="selectCity()">
<option>选择省市</option>
<option>北京</option>
<option>湖南</option>
<option>浙江</option>
<option>江西</option>
</select>
<select id="subselid">
<option>选择城市</option>
</select>
<br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
现象：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery1——基础（$对象，选择器，对象转换）
- Android学习笔记（二九）：嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制：7 行代码学会 co 模块
- ES6 走马观花（ECMAScript2015 新特性）
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- IE8开发人员工具教程（二）
- 访问控制列表概述
- 表格标签table深入了解
- 在flex中执行一个javascript方法的简单方式
- Flex结合JavaScript读取本地路径的方法
- 路由器访问列表的应用