标签：
DHTML技术使用的基本思路：
1. 用标签封装数据---html范畴
2. 定义样式---css范畴
3. 明确事件源、事件和要处理的节点---dom范畴
4. 明确具体的操作方式，其实就是事件的处理内容(过程)---js范畴
1、实现功能：点击菜单，显示菜单下的内容，再次点击，隐藏内容(允许和不允许同时打开多个菜单项)
<html>
<head>
<title>DHTML技术演示---菜单列表1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/*老版本的IE支持，新版本不支持了
dl{
height:18px;
overflow:hidden;
}*/
/*
ul{
//display:none;//不显示
display:block;//块显示
}
*/
table {
/*border:#ff80ff;*/
width:80px;
}
table ul{
list-style:none;
margin:0px;
padding:0px;
background-color:#ff8000;
display:none;
}
table td{
/*border:#0000ff 1px solid;*/
background:#80ff00;
}
table td a:link, table td a:visited{
color:#8080c0;
text-decoration:none;
}
table td a:hover{
color:#0000ff;;
}
.open{
display:block;
}
.close{
display:none;
}
</style>
<script type="text/javascript">
/*当前菜单的开关切换，当点开其他菜单时，此菜单不会关闭
function list(node){
var oTdNode = node.parentNode;
//alert( oTdNode.nodeName);//TD
var oUlNode = oTdNode.getElementsByTagName("ul")[0];
//alert( oUlNode.nodeName);//UL
if( oUlNode.className =="open"){
oUlNode.className ="close";
}else{
oUlNode.className ="open";
}
}
*/
//实现当前菜单开关切换的同时，把其它菜单全部关闭，即只能打开一个菜单
function list(node){
var oTdNode = node.parentNode;
var oUlNode = oTdNode.getElementsByTagName("ul")[0];
//获取菜单表格(tableMenu)对象 下的所有 菜单块(Ul)对象
var oTableNode = document.getElementById("tableMenu");
var arrUlNodes = oTableNode.getElementsByTagName("ul");
//遍历所有菜单块(Ul)对象，分别对它进行开关显示设置
for(var x=0; x<arrUlNodes.length; x++){
if(arrUlNodes[x]==oUlNode && oUlNode.className!="open"){
oUlNode.className ="open";//等价于：arrUlNodes[x].className ="open";
}else{
arrUlNodes[x].className="close";
}
}
}
</script>
</head>
<body>
<table id="tableMenu">
<tr>
<td>
<a href="javascript:void(0)" onclick="list(this)">文件菜单</a>
<ul>
<li>菜单项一</li>
<li>菜单项二</li>
<li>菜单项三</li>
<li>菜单项四</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="list(this)">编辑菜单</a>
<ul>
<li>菜单项一</li>
<li>菜单项二</li>
<li>菜单项三</li>
<li>菜单项四</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="list(this)">调试菜单</a>
<ul>
<li>菜单项一</li>
<li>菜单项二</li>
<li>菜单项三</li>
<li>菜单项四</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>列表菜单</title>
<style type="text/css">
#newsid ul{
list-style:none;
}
#newslist li{
float:left;
width:180px;
}
#newslist li ul{
margin:0px;
padding:0px;
}
#newslist li ul li{
line-height:25px;
}
#newslist li a{
display:block;
color:#ffffff;
background-color:#0066cc;
text-decoration:none;
line-height:25px;
text-align:center;
}
#newslist li a:hover{
color:#0066cc;
background-color:#999999;
}
#newslist li ul a{
color:#000000;
background-color:#0099ff;
}
#newslist li ul li a:hover{
color:#0066ff;
background-color:#999999;
}
#newslist li ul{
display:none;
}
</style>
<script type="text/javascript">
function list(liNode){
var ulNode = liNode.getElementsByTagName("ul")[0];
with(ulNode.style){
display = display=="block"?"none":"block";
}
}
</script>
</head>
<body background="bg-img.jpg">
<!-- 制作一个下拉菜单：1)封装数据 2)定义基本样式 -->
<div id="newsid">
<ul id="newslist">
<li onmouseover="list(this)"; onmouseout="list(this)" >
<a href="javascript:void(0)">城院新闻</a>
<ul style="display:none;">
<li><a href="http://www.hncu.net/">校园新闻内容摘要</a></li>
<li><a href="http://www.hncu.net/">校园新闻内容摘要</a></li>
<li><a href="http://www.hncu.net/">校园新闻内容摘要</a></li>
<li><a href="http://www.hncu.net/">校园新闻内容摘要</a></li>
</ul>
</li>
<li onmouseover="list(this)"; onmouseout="list(this)" >
<a href="javascript:void(0)">大学新闻</a>
<ul style="display:none;">
<li><a href="http://www.hncu.net/">大学新闻内容摘要</a></li>
<li><a href="http://www.hncu.net/">大学新闻内容摘要</a></li>
<li><a href="http://www.hncu.net/">大学新闻内容摘要</a></li>
<li><a href="http://www.hncu.net/">大学新闻内容摘要</a></li>
</ul>
</li>
<li onmouseover="list(this)"; onmouseout="list(this)" >
<a href="javascript:void(0)">社会新闻</a>
<ul style="display:none;">
<li><a href="http://www.hncu.net/">社会新闻内容摘要</a></li>
<li><a href="http://www.hncu.net/">社会新闻内容摘要</a></li>
<li><a href="http://www.hncu.net/">社会新闻内容摘要</a></li>
<li><a href="http://www.hncu.net/">社会新闻内容摘要</a></li>
</ul>
</li>
<li onmouseover="list(this)"; onmouseout="list(this)" >
<a href="javascript:void(0)">就业新闻</a>
<ul style="display:none;">
<li><a href="http://www.hncu.net/">就业新闻内容摘要</a></li>
<li><a href="http://www.hncu.net/">就业新闻内容摘要</a></li>
<li><a href="http://www.hncu.net/">就业新闻内容摘要</a></li>
<li><a href="http://www.hncu.net/">就业新闻内容摘要</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
实现功能：将文字设置为超链接，用来设置文本的字体
1、通过获取文本的节点，单独设置样式中的字体和颜色
2、通过获取文本的节点，设置此节点的className，与导进的css样式中的通过className方式设置的样式对应起来，从而实现对文本的字体设置
3、写超链接时href=""若为空，默认调本地文件地址，即弹出文件夹，若写成：href=“javascript:void(0)”则不会开新窗口，停在原处，若有其他操作也不会干扰他们进行；还有一种href=“#”不建议使用，会在地址后加上"#"号
<html>
<head>
<title>DHTML技术演示---新闻字体3--换套装</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="1.css" id="linkChgSuit">
<style type="text/css">
span:hover{
background-color:#ff0000;
cursor:hand;
}
</style>
<script type="text/javascript">
//更改类样式
function changeFont(sClass){
var oNewsDiv = document.getElementById("newsDiv") ;
//利用js+dom的方式来更改节点的样式---class属性
oNewsDiv.className = sClass;
}
//换套装
function changeSuit(sNum){
var oLink = document.getElementById("linkChgSuit");
oLink.href=sNum+".css";
}
</script>
</head>
<body>
<a href="javascript:void(0)" onclick="changeFont('max')"> 大字体</a>
<a href="javascript:void(0)" onclick="changeFont('norm')"> 中字体</a>
<a href="javascript:void(0)" onclick="changeFont('min')"> 小字体</a>
<br/>
<span onclick="changeSuit('1')">风格1</span>
<span onclick="changeSuit('2')">风格2</span>
<hr/>
<!--先用html的方式测试一下，然后再用js+dom
<div id="newsDiv" class="norm">
-->
<div id="newsDiv">
5月31日下午14：30，副校长在电信楼视频会议室，为学生处、团委、计划财务处、信息科学与工程学院和体育学院全体师生党员上了一堂题为“讲政治，有信念，做合格党员”的党课。
何振阐述了“讲政治，有信念”的重要性，并讲述了如何才能把握“讲政治，有信念”。他认为，党员应当从把握“讲政治，有信念”的深刻内涵、核心要义和方法路径这三个方面入手。他指出，践行“讲政治，有信念”，必须将其与高校管理、教学、科研相结合，运用到实践当中去，“办人民满意的大学”，并结合学校具体情况进行了深入的分析。<br/>
（信息科学与工程学院）
</div>
</body>
</html>css样式：1.css.max{
color:#808080;
font-size:28px;
background-color:#9ce9b4;
}
.norm{
color:#000000;
font-size:20px;
/*background-color:#cdd8d0;*/
}
.min{
color:#ff0000;
font-size:16px;
background-color:#f9fac2;
}css样式：2.css.max{
color:#808080;
font-size:28px;
background-image:url(img/back1.jpg);
}
.norm{
color:#000000;
font-size:20px;
background-image:url(img/back2.jpg);
}
.min{
color:#ff0000;
font-size:16px;
background-image:url(img/back3.jpg);
}
1、创建表格
1）通过DOM树模型，一层一层的建立表格 ------ 最底层的创建方式，费劲，但功能很强
2）利用table中的现有的功能实现的
注：
1、表格的,<table>标签和<tr>标签中间，其实还隐藏着一个<tbody>标签----表格体，<tbody>下面才是<tr>
2、如果<table>和<tr>之间有空格或换行(空格和换行看成文本节点)，则table的第一个孩子节点为文本节点，nodeName:"#text"第二个是tbody
3、<tbody>和#text节点是兄弟关系
只要有空白符出现，皆算一个节点
<html>
<head>
<title>DHTML技术演示---表格创建--用table对象和tr对象中现有的方法来操纵表格</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table {
border:#ff80ff;
width:600px;
border-collapse:collapse;
}
table td{
border:#0000ff 1px solid;
padding:5px;
}
</style>
<script type="text/javascript">
function createTable(){
var oTableNode = document.createElement("table");//创建表格对象
var oTrNode = oTableNode.insertRow();//往表格对象中插入一个tr对象(空行),并返回该tr对象
var oTdNode = oTrNode.insertCell();//往tr对象中插入一个Cell即td对象
oTdNode.innerHTML="单元格中的内容";
document.getElementsByTagName("div")[0].appendChild(oTableNode);
}
function createTable2(){
var oTableNode = document.createElement("table");//创建表格对象
//多行多列的表格,如5*6
for(var x=1;x<=5;x++){
var oTrNode = oTableNode.insertRow();//往表格对象中插入一个tr对象(空行),并返回该tr对象
for(var y=1;y<=8;y++){
var oTdNode = oTrNode.insertCell();//往tr对象中插入一个Cell即td对象
oTdNode.innerHTML="单元格"+x+"-"+y+"中的内容";
}
}
document.getElementsByTagName("div")[0].appendChild(oTableNode);
}
//用户自定义行号与列号的方式创建表格
function createTable3(){
var oTableNode = document.createElement("table");//创建表格对象
//给表格动态地添加属性(id)
//法1
//oTableNode.id = "tableId";//变量方式
//法2
oTableNode.setAttribute("id","tableId");//函数的方式
//由用户指定行数与列数的表格
//获取用户输入的行数与列数
var rowNum =parseInt(document.getElementsByName("rowNum")[0].value);
var colNum =parseInt( document.getElementsByName("colNum")[0].value);
//健壮性防护
if(isNaN(rowNum) || isNaN(colNum) || rowNum<=0 || colNum<=0 ){
alert("行号和列号必须是大于0的整数");
return;
}
for(var x=1;x<=rowNum;x++){
var oTrNode = oTableNode.insertRow();//往表格对象中插入一个tr对象(空行),并返回该tr对象
for(var y=1;y<=colNum;y++){
var oTdNode = oTrNode.insertCell();//往tr对象中插入一个Cell即td对象
oTdNode.innerHTML="单元格"+x+"-"+y+"中的内容";
}
}
document.getElementsByTagName("div")[0].appendChild(oTableNode);
}
//删除指定的行
function delRow(){
//由指定的id来获取该表格
var oTableNode = document.getElementById("tableId");
//alert(oTableNode.nodeName);
//alert(oTableNode);
//防护
if(oTableNode==null){
alert("表格不存在!");
return;
}
//删除行的处理代码
//获取用户输入的行号
var delRowNum = parseInt(document.getElementsByName("delRowNum")[0].value);
//alert(delRowNum);
//行号的健壮性防护
if(isNaN(delRowNum) ){
alert("行号必须是数字");
return;
}
if(!(delRowNum>0 && delRowNum<=oTableNode.rows.length)){
alert("该行不存在!");
return;
}
//删除行
oTableNode.deleteRow(delRowNum-1);
}
//删除指定的列
function delCol(){
//由指定的id来获取该表格
var oTableNode = document.getElementById("tableId");
//alert(oTableNode.nodeName);
//alert(oTableNode);
//防护
if(oTableNode==null){
alert("表格不存在!");
return;
}
//删除列的处理代码
//获取用户输入的列号
var delColNum = parseInt(document.getElementsByName("delColNum")[0].value);
//alert(delColNum);
//行号的健壮性防护
if(isNaN(delColNum) ){
alert("列号必须是数字");
return;
}
if(!(delColNum>0 && delColNum<=oTableNode.rows[0].cells.length)){
alert("该列不存在!");
return;
}
//删除列:※※表格中没有现成的删除列的函数，因此只能自己遍历行，然后通过tr对象中的deleteCell来实现
for(var x=0; x<oTableNode.rows.length;x++){
oTableNode.rows[x].deleteCell( delColNum-1 );
}
}
</script>
</head>
<body>
<input type="button" value="创建表格" onclick="createTable()" />
<input type="button" value="创建多行多列表格" onclick="createTable2()" />
<br/><br/><br/>
<!--添加-->
行数:<input type="text" name="rowNum"/>
列数:<input type="text" name="colNum"/>
<input type="button" value="创建表格" onclick="createTable3()" />
<br/><br/><br/>
<!--删除-->
<h3>删除前面由用户指定行列号方式创建的表格</h3> <br/>
行号:<input type="text" name="delRowNum"/>
<input type="button" value="删除行" onclick="delRow()" />
列号:<input type="text" name="delColNum"/>
<input type="button" value="删除列" onclick="delCol()" />
<hr/>
<div></div>
</body>
</html>效果：
3、设置颜色和排序
1）颜色：通过奇偶行号，设置不同的两种颜色，且鼠标放上后变为第三种颜色，离开后恢复原来颜色
2）排序：通过点击表格中的年龄项，表格中的内容通过年龄的大小，进行排序，且年龄项做出相应的变化
<html>
<head>
<title>DHTML技术演示---表格中页面中的显示操纵--行间隔高亮显示</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
@import url(table.css);
.one{
background:#80ff00;
}
.two{
background:rgb(210,0,0);
}
.over{
background-color:#ffff00;
}
a{
text-decoration:none;
}
</style>
<script type="text/javascript">
function trColor(){
var oTableNode = document.getElementById("dataTable");
var arrTrs = oTableNode.rows;
for(var x=1;x<arrTrs.length; x++){
if(x%2==1){
arrTrs[x].className="one";
}else{
arrTrs[x].className="two";
}
//为每一行动态注册事件处理方法
var oldClassName;
arrTrs[x].onmouseover=function(){
oldClassName=this.className;
this.className="over";
};
arrTrs[x].onmouseout=function(){
this.className=oldClassName;
};
}
}
//onload = trColor();//这种方式赋值就是执行(本例中，这一句没有效果，因为table对象还没出来。但如果把该段代码放在<table>之后则有效果，放表格内也可以，<span style="font-family: Arial, Helvetica, sans-serif;">但<script>标签要包裹其一起放过去</span><span style="font-family: Arial, Helvetica, sans-serif;">)，而且只能执行这一个方法</span>
onload = function(){
trColor();
//还可以在这里写其它代码，甚至调用其它函数
};//这种方式只是给onload事件注册响应函数，解析该句代码时函数并没有执行，而是在该事件发生时才会调用。并且可以在function()中调用多个函数.
</script>
<script type="text/javascript">
/*
function over(trNode){
trNode.className="over";
}
*/
var flag = true;
function sortTable(aNode){
var oTableNode = document.getElementById("dataTable");
var arrTrs = oTableNode.rows;
//思路：用一个新的容器来存放表格的行对象数组，并在新数组中进行排序,把排序后的每个元素(行对象)依次添加到表格对象中
//放到新容器arrTrs2中
var arrTrs2=[];
for(var x=1;x<arrTrs.length;x++){
arrTrs2[x-1] = arrTrs[x];
}
//对容器arrTrs2中的元素进行排序
mySort(arrTrs2);
//把排序后的行对象重新加到表格中
if(flag){
for(var x=0;x<arrTrs2.length;x++){
arrTrs2[x].parentNode.appendChild(arrTrs2[x]);
}
aNode.innerHTML="年龄↓";
}else{
for(var x=arrTrs2.length-1;x>=0;x--){
arrTrs2[x].parentNode.appendChild(arrTrs2[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].innerText) > parseInt(arr[y].cells[1].innerText)){
var temp = arr[x];
arr[x] = arr[y];
arr[y] = temp;
}
}
}
}
</script>
</head>
<body>
<table id="dataTable">
<tr>
<th>姓名</th> <th><a href="javascript:void(0)" onclick="sortTable(this)">年龄</a></th> <th>地址</th>
</tr>
<tr>
<td>张三</td> <td>22</td> <td>湖南长沙</td>
</tr>
<tr>
<td>李四</td> <td>33</td> <td>湖南长沙</td>
</tr>
<tr>
<td>王五</td> <td>21</td> <td>湖南长沙</td>
</tr>
<tr>
<td>Jack</td> <td>20</td> <td>湖南长沙</td>
</tr>
<tr>
<td>Rose</td> <td>43</td> <td>湖南长沙</td>
</tr>
<tr>
<td>Jack</td> <td>53</td> <td>湖南长沙</td>
</tr>
<tr>
<td>Rose</td> <td>35</td> <td>湖南长沙</td>
</tr>
<tr>
<td>Jack</td> <td>13</td> <td>湖南长沙</td>
</tr>
<tr>
<td>Rose</td> <td>30</td> <td>湖南长沙</td>
</tr>
</table>
</body>
</html>
实现功能：类似如邮箱中对邮件的管理：
选择邮件，删除邮件，全选，反选，取消全选等
<html>
<head>
<title>DHTML技术演示---checkbox的使用2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
@import url(table.css)/*这个css样式要自己写一个文件导入进来*/
</style>
<script type="text/javascript">
var name;
function trColor(){
var oTableNode = document.getElementById("mailTable");
var collTrNodes = oTableNode.rows;
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";
/*下面这种注册事件的方式也可以
this.onmouseout=function(){
this.className=name;
}
*/
}
collTrNodes[x].onmouseout=function(){
this.className=name;
}
}
}
onload = function(){
trColor();
}
function checkAll(aChkboxNode){
var collMailNodes = document.getElementsByName("mail");
for(var x=0;x<collMailNodes.length;x++){
collMailNodes[x].checked = aChkboxNode.checked;
}
var collChkboxAllNodes = document.getElementsByName("all");
collChkboxAllNodes[0].checked = aChkboxNode.checked;
collChkboxAllNodes[1].checked = aChkboxNode.checked;
}
function checkAllByBtn1(flag){
var collMailNodes = document.getElementsByName("mail");
for(var x=0;x<collMailNodes.length;x++){
collMailNodes[x].checked = flag;
}
var collChkboxAllNodes = document.getElementsByName("all");
collChkboxAllNodes[0].checked = flag;
collChkboxAllNodes[1].checked = flag;
//取消部分选中时的显示样式
collChkboxAllNodes[0].indeterminate=false;
collChkboxAllNodes[1].indeterminate=false;
}
function checkAllByBtn2(){
var collMailNodes = document.getElementsByName("mail");
var n=0;
for(var x=0;x<collMailNodes.length;x++){
collMailNodes[x].checked = !collMailNodes[x].checked;
if( collMailNodes[x].checked ){
n++;
}
}
var collChkboxAllNodes = document.getElementsByName("all");
collChkboxAllNodes[0].indeterminate=false;
collChkboxAllNodes[1].indeterminate=false;
if(n==0){
collChkboxAllNodes[0].checked = false;
collChkboxAllNodes[1].checked = false;
}else if(n==collMailNodes.length){
collChkboxAllNodes[0].checked = true;
collChkboxAllNodes[1].checked = true;
}else{//部分选中时的显示样式
collChkboxAllNodes[0].indeterminate=true;
collChkboxAllNodes[1].indeterminate=true;
}
}
//把上面两个函数合在一起
function checkAllByBtn(num){
var collMailNodes = document.getElementsByName("mail");
//取消部分选中时的显示样式
var collChkboxAllNodes = document.getElementsByName("all");
collChkboxAllNodes[0].indeterminate=false;
collChkboxAllNodes[1].indeterminate=false;
var n=0;
for(var x=0;x<collMailNodes.length;x++){
if(num>1){
collMailNodes[x].checked = !collMailNodes[x].checked;
}else{
collMailNodes[x].checked = num;
}
if(collMailNodes[x].checked){
n++;
}
}
if(n==0){
collChkboxAllNodes[0].checked = false;
collChkboxAllNodes[1].checked = false;
}else if(n==collMailNodes.length){
collChkboxAllNodes[0].checked = true;
collChkboxAllNodes[1].checked = true;
}else{//部分选中时的显示样式
collChkboxAllNodes[0].indeterminate=true;
collChkboxAllNodes[1].indeterminate=true;
}
}
function deleteMail(){
if(!confirm("你真的要删除所选邮件吗?")){
return;
}
//获取所有选中的邮件
var collMailChkNodes = document.getElementsByName("mail");
for(var x=0;x<collMailChkNodes.length;x++){
if(collMailChkNodes[x].checked){//选中，则删除
//先拿到tr对象
var oTrNode = collMailChkNodes[x].parentNode.parentNode;
oTrNode.parentNode.removeChild(oTrNode);
//bug:节点容器中，remove之后，长度会变。
x--;//长度修正--还有一种解决方案是：从后往前删
}
}
trColor();
}
</script>
</head>
<body>
<h2>邮件列表</h2>
<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>张三</td> <td>邮件标题11</td> <td>2016年6月16日</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>李四</td> <td>邮件标题22</td> <td>2016年6月15日</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张四</td> <td>邮件标题33</td> <td>2016年6月14日</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>Jack</td> <td>邮件标题44</td> <td>2016年6月18日</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>Rose</td> <td>邮件标题55</td> <td>2016年6月25日</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张六</td> <td>邮件标题66</td> <td>2016年6月16日</td>
</tr>
<tr>
<td><input type="checkbox" name="all" onclick="checkAll(this)"/>全选</td>
<td colspan="3">
<!--
<input type="button" value="全选" onclick="checkAllByBtn1(true)">
<input type="button" value="取消全选" onclick="checkAllByBtn1(false)">
<input type="button" value="反选" onclick="checkAllByBtn2()">
-->
<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()">
</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>DHTML技术演示---radio的使用</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#contentId{
display:none;
}
ul{
list-style:none;
margin:0px;
}
.open{
display:block;
}
.close{
display:none;
}
</style>
<script type="text/javascript">
function showContent(oNode){
var showDivContent=document.getElementById("contentId");
/*
if (oNode.value=="yes"){
showDivContent.style.display="block";
} else {
showDivContent.style.display="none";
}
*/
with(showDivContent.style){
if (oNode.value=="yes"){
display="block";
} else {
display="none";
}
}
}
function showResult(){
var value=0;
var topicOneRadioNodes=document.getElementsByName("topicOne");
for (var x=0;x<topicOneRadioNodes.length;x++){
if (topicOneRadioNodes[x].checked){
value=parseInt(topicOneRadioNodes[x].value);
break;
}
}
if (!value){
document.getElementById("topicOneErrorInfo").innerHTML="No selection was selected.".fontcolor("red");
return;
}
document.getElementById("topicOneErrorInfo").innerHTML="";
if (value>0&&value<4){
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>
<div>
Do you want to take part in the questionnaire research?<br/>
<input type="radio" name="questionnaire" value="yes" onclick="showContent(this)">yes
<input type="radio" name="questionnaire" value="no" onclick="showContent(this)">no<br/>
</div>
<div id="contentId">
The content of the questionnaire.<br/>
name: <input type="text" name="name"><br/>
telephone: <input type="text" name="telephone">
</div>
<hr/>
<h2>Welcome to character test</h2>
<h3>Topic one</h3>
<span>Which fruit below do you like best.</span>
<ul id="topicOne">
<li><input type="radio" name="topicOne" value="1">Grape</li>
<li><input type="radio" name="topicOne" value="2">Watermelon</li>
<li><input type="radio" name="topicOne" value="3">Apple</li>
<li><input type="radio" name="topicOne" value="4">Mango</li>
<li><input type="radio" name="topicOne" value="5">Cherry</li>
</ul>
<div>
<input type="button" value="Show the result" onclick="showResult()">
<div id="res_1" class="close">1 to 3 scores: you are introversion</div>
<div id="res_2" class="close">more than 4 scores: you are outgoing</div>
</div>
<span id="topicOneErrorInfo"></span>
</body>
</html>1、设置字体颜色
<html>
<head>
<title>DHTML技术演示---selcet的使用</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.clrClass{
height:50px;
width:50px;
float:left;
margin-right:30px;
margin-bottom:20px;
}
#text{
clear:left;
}
</style>
<script type="text/javascript">
function changeColor(oDivClrNode){
var colorVal=oDivClrNode.style.backgroundColor;
document.getElementById("text").style.color=colorVal;
}
function changeColor2(){
var oSelectNode=document.getElementsByName("selectColor1")[0];
var oCollOptions=oSelectNode.options;
var colorValue=oCollOptions[oSelectNode.selectedIndex].value;
document.getElementById("text").style.color=colorValue;
}
function changeColor3(){
var oSelectNode=document.getElementsByName("selectColor2")[0];
var oCollOptions=oSelectNode.options;
var colorValue=oCollOptions[oSelectNode.selectedIndex].value;
document.getElementById("text").style.color=colorValue;
}
</script>
</head>
<body>
<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">
显示效果文字1<br/>
显示效果文字2<br/>
显示效果文字3<br/>
显示效果文字4<br/>
</div>
<hr/>
<select name="selectColor1" onchange="changeColor2()">
<option value="black">--请选择颜色--</option>
<option value="red">红色</option>
<option value="green">绿色</option>
<option value="blue">蓝色</option>
</select>
<hr/>
<select name="selectColor2" onchange="changeColor3()">
<option value="black" style="background-color:black">--请选择颜色--</option>
<option value="red" style="background-color:red"></option>
<option value="green" style="background-color:green"></option>
<option value="blue" style="background-color:blue"></option>
</select>
</body>
</html>
结果：
<html>
<head>
<title>DHTML技术演示---selcet的使用</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function selectCity(){
var collProvinces ={
"beijing" : ['海淀区','东城区','西城区','朝阳区'],
"zhejiang" : ['杭州','宁波','金华','温州'],
"hunan" : ['益阳','长沙','株洲','湘潭'],
"jiangxi" : ['南昌','九江','萍乡','上饶']
};
var selNode=document.getElementById("provincesId");
var index=selNode.selectedIndex;
var provinceName=selNode.options[index].value;
var arrCities=collProvinces[provinceName];
var cityNode=document.getElementById("citiesId");
cityNode.options.selectedIndex=0;
//把下拉菜单"subselid"中原有的内容清空
//法1
/*
for (var x=1;x<cityNode.length;){//注意，数组删除之后，长度是自动更新的，因此for最后不要用"x++"修正
cityNode.removeChild(cityNode.options[x]);
}
*/
//法2
/*
for (var x=cityNode.length-1;x>0;x--){
cityNode.removeChild(cityNode.options[x]);
}
*/
//法3
cityNode.options.length=1;//长度设置为1 ，那么剩余的选项自动被删掉
for (var x=0;x<arrCities.length;x++){
var optionNode=document.createElement("option");
optionNode.innerHTML=arrCities[x];
cityNode.appendChild(optionNode);
}
}
</script>
</head>
<body>
<select id="provincesId" onchange="selectCity()">
<option>select province</option>
<option value="beijing">北京</option>
<option value="hunan">湖南</option>
<option value="zhejiang">浙江</option>
<option value="jiangxi">江西</option>
</select>
<select id="citiesId">
<option>--select city--</option>
</select>
</body>
</html>结果：
3、文件添加和删除
<html>
<head>
<title>DHTML技术演示--file组件--添加与删除附件</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table a:link,table a:visited{
text-decoration:none;
color:#ff0000;
}
table a:hover{
color:#0080ff;
}
</style>
<script type="text/javascript">
function addFile(){
var oTableNode=document.getElementById("fileTableId");
var trNode=oTableNode.insertRow();
var tdNode=trNode.insertCell();
tdNode.innerHTML="<input type='file'>";
var tdNodeDel=trNode.insertCell();
//tdNodeDel.innerHTML="<a href='javascript:void(0)' onclick='deleteFile(this)'>deleteFile</a>";
tdNodeDel.innerHTML="<img src='123.jpg' alt='删除附件' onclick='deleteFile(this)'>";
}
function deleteFile(oANode){
var trNode=oANode.parentNode.parentNode;
trNode.parentNode.removeChild(trNode);
}
</script>
</head>
<body>
<table id="fileTableId">
<tr>
<th><a href="javascript:void(0)" onclick="addFile()">addFile</a></th>
</tr>
<!--
<tr>
<td><input type="file"></td>
<td><a href="javascript:void(0)" onclick="deleteFile(this)">deleteFile</a></td>
</tr>
-->
</table>
</body>
</html>
通过正则表达式实现用户注册页面
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}$ /; //特殊符号不需要转义，外面也不用加引号
var reg = /^[\d\w]{6,9}$/; //只包含6到9个数字或字符，这里不需要转义
3、表单的提交
例：(手动提交，不依赖于form中的submit)<script type="text/javascript">
function mySubmit(){
var oFormNode=document.getElementById("submitInfo");
if (checkUser()){
oFormNode.submit();
}
}
</script><html>
<head>
<title>DHTML技术演示---注册表单的验证且控制提交--前端校验--最终版本</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function check(name,reg,spanId,okInfo,errInfo){
var value = document.getElementsByName(name)[0].value;
//用正则检验
var oSpanNode = document.getElementById(spanId);
if(reg.test(value)){
oSpanNode.innerHTML=okInfo.fontcolor("green");
return true;
}else{
oSpanNode.innerHTML=errInfo.fontcolor("red");
return false;
}
}
function checkUserName(){
var reg =new RegExp("[a-z]{4}","i") ;//包含4个连续的字母,注意"i"中的双引号不能省略
return check("userName",reg,"userNameSpan","用户名格式正确","用户名格式错误");
}
function checkPwd(){
var reg = new RegExp("^[\\w\\d]{6,9}$");
return check("pwd",reg,"userPwdSpan","密码格式符合要求","密码长度必须是6-9位");
}
function checkPwd2(){//判断第2个密码和第1个是否相同
var flag;
var pwd = document.getElementsByName("pwd")[0].value;
var pwd2 = document.getElementsByName("pwd2")[0].value;
var oSpanNode = document.getElementById("userPwd2Span");
if(pwd==pwd2){
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,"userMailSpan","","邮箱格式不正确");
}
function checkUser( ){//控制表单的提交
if(checkUserName() && checkPwd() && checkPwd2() && checkMail() ){
return true;
}else{
return false;
}
}
</script>
</head>
<body>
<form action="/dhtmlProj/servlet/RegServlet" onsubmit="return checkUser();">
用户名: <input type="text" name="userName" onblur="checkUserName()"/>
<span id="userNameSpan"></span>
<br/>
输入密码:<input type="text" name="pwd" onblur="checkPwd()"/>
<span id="userPwdSpan"></span>
<br/>
确认密码:<input type="text" name="pwd2" onblur="checkPwd2()"/>
<span id="userPwd2Span"></span>
<br/>
邮件地址:<input type="text" name="mail" onblur="checkMail()"/>
<span id="userMailSpan"></span>
<br/>
<input type="submit" value="注册">
</form>
</body>
</html>结果：
标签：
原文地址：http://blog.csdn.net/x121850182/article/details/51702347
