<a href="http://edu.csdn.net"target="blank">ASP.Net+Android+IO开发S</a>、<a href="http://edu.csdn.net"target="blank">.Net培训</a>、期待与您交流!
程序一、
利用<input>标签的onclick事件演示documen.getElementById( )方法
<html>*************************************************************************
<head>
<title>无标题文档</title>
<script type="text/javascript">
function demo()
{
var divobj = document.getElementById("divid");
divobj.style.backgroundColor = "red";
}
</script>
</head>
<body>
<input type="button" value="演示" οnclick="demo()" />
<div id="divid">
abdjiefjeifjei
</div>
</body>
</html>************************************************************************
程序二、
演示documen对象的各方法和属性的使用document.getElementById()、parentNode、childNodes等。并将HTML文档中的各标签以树形结构列出来,和列出指定文件目录中的文件操作类似。
<html>**********************************
<head>
<title>无标题文档</title>
<script type="text/javascript">
function demo()
{
var divobj = document.getElementById("divid");
//获取父节点
var parent = divobj.parentNode;
//getNodeInfo(parent);
//获取子节点
var childs = divobj.childNodes;
//alert(childs.length);
//getNodeInfo(childs[0]);//div中的文本节点
//获取兄弟节点
//1、获取上一个兄弟节点
var preNode = divobj.previousSibling.previousSibling;
//getNodeInfo(preNode);
//2、获取下一个兄弟节点
var nextNode = divobj.nextSibling;
//getNodeInfo(nextNode);
//需求:获取a标签的文本
var aNode = divobj.nextSibling.nextSibling;
var aText = aNode.childNodes[0];
//getNodeInfo(aText);
//需求:获取单元格一文本
//先获取表格节点
var tabNode = divobj.nextSibling;
//getNodeInfo(tabNode.childNodes[0].childNodes[0].childNodes[0].childNodes[0]);
var tdNodes = tabNode.getElementsByTagName("td");
//getNodeInfo(tdNodes[0].childNodes[0]);
}
var info="";
function getDocAll()
{
var nodes = document.all;
for(var x=0;x<nodes.length;x++)
{
info += nodes[x].nodeName+"..."+nodes[x].nodeType+"<br/>";
}
/*getNodeInfo(nodes[x]);*/
//var node = document.all(7);
//getNodeInfo(node);
document.write(info);
}
function getNodeInfo(node)
{
alert("name:"+node.nodeName+"....type:"+node.nodeType+"....value:"+node.nodeValue+"<br>");
}
/*
puvlic void listFile(File dir)
{
System.out.println(dir.getName());
File[] files = dir.listFiles();
for(int x= 0;x<files.length;x++)
{
if(files[x].isDirectory())
listFile(files[x]);
else
System.out.println(files[x].getName());
}
}
public String getSpace(int level)
{
StringBuilder sb = new StringBuilder();
for(int x=0;x<level;x++)
{
sb.append("|--");
}
return sb.toString();
}
*/
//通过递归获取节点的层次关系
var str = "";
function listNode(node,level)
{
printInfo(node,level);
level++;
var nodes = node.childNodes;
for(var x=0;x<nodes.length;x++)
{
if(nodes[x].hasChildNodes())
listNode(nodes[x],level);
else
printInfo(nodes[x],level);
}
}
function getSpace(level)
{
var s = "";
for(var x=0;x<level;x++)
{
s+="|---";
}
return s;
}
function printInfo(node,level)
{
str+=getSpace(level)+"name:"+node.nodeName+"......type:"+node.nodeType+"......value:"+node.nodeValue+"<br/>";
}
function getNodes()
{
listNode(document,0);
document.write(str);
}
</script>
</head>
<body>
<input type="button" value="演示" οnclick="getNodes()" />
<div id="divid">
abdjiefjeifjei
</div>
<table>
<tr>
<td>单元格一</td>
<td>单元格二</td>
</tr>
<tr>
<td>单元格三</td>
<td>单元格四</td>
</tr>
</table>
<a href="http://ww.isna.com">非新浪网站</a>
<!--我是注释-->
<span>这是一个审判区域</span>
</body>
</html>************************************************************************
程序三、
<!--
1、定义数据封装的标签。(定义界面)
2、确定事件源。
3、注册事件
4、处理事件
需求:
页面中有一个新闻区域。
通过超链接:大 中 小。
可以让用户改变区域的大小
"javascript:void(0)":表示启动javaScript引擎解析一个一个函数。-->
<html>*************************************************************************
<head>
<title>无标题文档</title>
<script type="text/javascript" src="doctool.js"></script>
<script type="text/javascript">
/*
第一种方法实现:分别定义三个方法changeMax、changeNorm、和changeMin
function changeMax()
{
var divNode = document.getElementById("newsid");
divNode.style.fontSize = "24px";
}
function changeNorm()
{
var divNode = document.getElementById("newsid");
divNode.style.fontSize = "16px";
}
function changeMin()
{
var divNode = document.getElementById("newsid");
divNode.style.fontSize = "9px";
}
*/
/*第二种实现方法:用一个方法实现,字体大小作为参数传递。
function changeSize(size)
{
var divNode = document.getElementById("newsid");
divNode.style.fontSize = size;
}
*/
/*
第三种方法:发现document、getElementById代码过长,可封装成doctool.js文件
通过<script type="text/javascript" src="doctool.js"></script>将文件导入。
doctool.js文件内容:
var doc = document;
function byId(id)
{
Return doc.getElementById(id);
}
function changeSize(size)
{
var divNode = byId("newsid");
divNode.style.fontSize = size;
}
第四种方法:发现每次只能对字体大小进行设置,如果进行其他设置,非常麻烦,可以封装样式。样式封装要单独写在<head></head>中,不能写在<script></script>中
<style type="text/css">
function changeSize(className)
{
divNode = byid("newsid");
divNode.className = className;
}
.norm{
background-color:#CC9933;
color:#99FF66;
font-size:36px;
width:300px;
}
.max{
background-color:#330099;
color:#993300;
font-size:24px;
width:500px;
}
.min{
background-color:#66FF66;
color:#FF99FF;
font-size:10px;
width:200px;
}
</style>
*/
</script>
</head>
<body>
<div id="newsid" >
<h2>唐诗三百首</h2>
<!-- 第一种实现方法使用
<a href="javascript:void(0)" οnclick="changeMax()">大</a>
<a href="javascript:void(0)" οnclick="changeNorm()">中</a>
<a href="javascript:void(0)" οnclick="changeMin()">小</a><br />
-->
<!--
<a href="javascript:void(0)" οnclick="changeSize('36px')">大</a>
<a href="javascript:void(0)" οnclick="changeSize('16px')">中</a>
<a href="javascript:void(0)" οnclick="changeSize('9px')">小</a><br />
-->
<a href="javascript:void(0)" οnclick="changeSize('max')">大</a>
<a href="javascript:void(0)" οnclick="changeSize('norm')">中</a>
<a href="javascript:void(0)" οnclick="changeSize('min')">小</a><br />
床前明月光,<br/>
疑是地上霜。<br />
举头望明月,<br />
低头思故乡。<br />
</div>
</div>
</body></html>
程序四、
需求:通过点击实现一个展开闭合效果
<html >************************************************************************
<head>
<title>无标题文档</title>
<script type="text/javascript" src="doctool.js"></script>
<script type="text/javascript">
//var b = true;
function change1()
{
var divNode = document.getElementsByTagName("div")[0];
//alert(divNode.nodeName);
if(b)
{
divNode.style.height = "8px";
divNode.style.overflow = "hidden";
b = false;
}
else
{
divNode.style.height = "8px";
divNode.style.overflow = "visible";
b = true;
}
}
function change2()//通过样式实现
{
var divNode = byTag("div")[0];
if(divNode.className=="close")
{
divNode.className = "open";
}
else
{
divNode.className = "close";
}
}
</script>
<style type="text/css">
.open{
height:8px;
overflow:visible;
}
.close{
height:8px;
overflow:hidden;
}
</style>
</head>
<body>
<div οnclick="change()">
静夜思
</div>
</body>
</html>************************************************************************
程序五、
需求:通过点击实现一个展开闭合效果(对程序五的扩展)
<html>***************************************************************
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="doctool.js"></script>
<script type="text/javascript">
//var b = true;
//只有一个dl时
function list_1()
{
var dtNode = byTag("dt")[0];
alert(dtNode.nodeName);
var dlNode = byTag("dl")[0];
//alert(dtNode.nodeName+"..."+dlNode.nodeName);
if(dlNode.className == "open")
{
dlNode.className = "close";
}
else
{
dlNode.className = "open";
}
}
/*
获取事件源对象的两种方式
1、通过event对象的srcElement属性
2、将事件源对象通过this传入
*/
//有多个dl,可以同时展开
function list_2(dtNode)
{
//var dtNode = event.srcElement;
var dlNode = dtNode.parentNode;
//alert(dtNode.nodeName);
//var dlNode = byTag("dl")[0];
//alert(dtNode.nodeName+"..."+dlNode.nodeName);
if(dlNode.className == "open")
{
dlNode.className = "close";
}
else
{
dlNode.className = "open";
}
}
//有多个dl只能展开一个
function list(dtNode)
{
var dlNode = dtNode.parentNode;
var dlNodes = byTag("dl");
for(var x=0;x<dlNodes.length;x++)
{
if(dlNodes[x]==dlNode)
{
if(dlNode.className == "open")
{
dlNode.className = "close";
}
else
{
dlNode.className = "open";
}
}
else
dlNodes[x].className = "close";
}
}
</script>
<style type="text/css">
.open{
overflow:visible;
}
.close{
overflow:hidden;
}
dl{
overflow:hidden;
height:16px;
}
</style>
</head>
<body>
<dl>
<dt οnclick="list(this)">静夜思</dt>
<dd>床前明月光,</dd>
<dd>疑是地上霜。</dd>
<dd>举头望明月,</dd>
<dd>低头思故乡。</dd>
</dl>
<dl>
<dt οnclick="list(this)">静夜思</dt>
<dd>床前明月光,</dd>
<dd>疑是地上霜。</dd>
<dd>举头望明月,</dd>
<dd>低头思故乡。</dd>
</dl>
<dl>
<dt οnclick="list(this)">静夜思</dt>
<dd>床前明月光,</dd>
<dd>疑是地上霜。</dd>
<dd>举头望明月,</dd>
<dd>低头思故乡。</dd>
</dl>
<dl>
<dt οnclick="list(this)">静夜思</dt>
<dd>床前明月光,</dd>
<dd>疑是地上霜。</dd>
<dd>举头望明月,</dd>
<dd>低头思故乡。</dd>
</dl>
</body>
</html>************************************************************************
程序六、
实现如下图所示的功能:
1、 实现图一的菜单列表
2、 当单击菜单中的一个列表项时会自动展开,同时前面展开的要关闭。
3、 保证只展开一个列表项
<html>***************************************************************
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
table{
border:#000066 1px solid;
}
table td{
border:#00CC33 1px solid;
background-color:#FF6633;
}
table td div{
background-color:#99FFCC;
display:none;
}
table td a:link,table td a:visited{
text-decoration:none;
color:#990000;
}
.open{
display:block;
}
.close{
display:none;
}
</style>
<script type="text/javascript">
function list2()
{
var aNode = event.srcElement;
var tdNode = aNode.parentNode;
var divNode = tdNode.getElementsByTagName("div")[0];
//alert(divNode.nodeName);
var tabNode = document.getElementsByTagName("table")[0];
var divNodes = tabNode.getElementsByTagName("div");
for(var x=0;x<divNodes.length;x++)
{
if(divNodes[x] == divNode)
{
if(divNode.className =="open")
{
divNode.className = "close";
}
else
{
divNode.className = "open";
}
}
else
{
divNodes[x].className = "close";
}
}
}
</script>
</head>
<body>
<table>
<tr>
<td>
<a href="javascript:void(0)" οnclick="list2()">好友菜单列表</a>
<div>
床前明月光,<br />
疑是地上霜。<br />
举头望明月,<br />
低头思故乡。<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" οnclick="list2()">好友菜单列表</a>
<div>
床前明月光,<br />
疑是地上霜。<br />
举头望明月,<br />
低头思故乡。<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" οnclick="list2()">好友菜单列表</a>
<div>
床前明月光,<br />
疑是地上霜。<br />
举头望明月,<br />
低头思故乡。<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" οnclick="list2()">好友菜单列表</a>
<div>
床前明月光,<br />
疑是地上霜。<br />
举头望明月,<br />
低头思故乡。<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" οnclick="list2()">好友菜单列表</a>
<div>
床前明月光,<br />
疑是地上霜。<br />
举头望明月,<br />
低头思故乡。<br />
</div>
</td>
</tr>
</table>
</body>
</html>************************************************************************
程序七、
实现如下图所示功能,输入行数和列数后单击“创建表格”,会自动生成对应的表格。
删除行和删除列可以完成删除输入的指定的行和列。
DOM编程:
1、定义界面
通过html的标签将数据进行封装。
2、定义一些静态的样式。
通过css
3、需要动态的完成和用户的交互
a)先明确事件源
b)明确事件将事件注册到事件源上、
c)通过javascript的函数对象事件进行处理。
d)在处理过程需要明确被处理的区域。
思路:
1、在页面上通过按钮创建一个表格
思路:
1、 创建一个table节点。Document.createElement(“table”);
2、 通过table节点的insertRow()方法创建表格的行对象并添加到rows集合中。
3、 通过行对象的inertCell()方法创建单元格对象,并添加到cell是集合中。
4、 给单元格中添加数据:
a) 创建一个节点如文本节点,document.createTextNode(“文本内容”)
通过单元格对象appendChild方法将文本节点添加到单元格的尾部。
b) 可以通过单元格的innerHTML,添加单元格中的元素
5、 建立好表格节点,添加到Dom树中,也就是页面的指定位置上。
2、如何删除表格中的行或列
思路:
1、 删除行:获取表格对象,通过表格对象中的deleteRow方法将指定的行索引传入deleteRow方法中。
2、 删除列:表格没有直接删除列的方法,要通过删除每一行中指定的单元格来完成删除列的动作,获取所有的行对象,并进行遍历,通过行对象的deleteCell方法将指定单元格删除。
3、对表格中的数据进行排序。
思路:
1、 获取表格中的所有元素。
2、 定义临时存储,将需要进行排序的行对象存入到数组中。
3、 对数组进行排序。通过比较每一个行对象中指定单元格中的数据如果是整数需要用parseInt转换
4、 将排序后的数组通过遍历,将每一格行对象重新添加回表格,通过tbody节点的appendChild方法
5、 其实排序就是每一行对象的引用取出。
4、表格的行颜色间隔显示,并在鼠标指定的行上高亮显示。
思路:
1、 获取所有的行对象,将需要间隔颜色显示的行对象进行动态的className属性的制定,那么前提是:先定义好类选择器。
2、 为了完成高亮显示,需要用到两个事件,onmouseover(鼠标进入)onmouseout(鼠标移出)
3、 为了方便可以在便利行对象时,将每一个行对象都进行两个事件属性的指定。并通过匿名函数完成该事件的处理。这样在鼠标离开时,可以将原样式还原。
4、 该样式需要在页面加载完成后直接显示,所以使用的window.onload事件完成。
5、完成一个与css手册中一样的示例。
通过下拉菜单选择显示指定样式属性的使用效果
6、表单中的组件。
单选框、复选框。
这两个组件都有一个属性来表示其选中与否的状态(checked)
完成一个对多个复选框进行全选的操作。
思路:将全选的那个复选框的checked状态付给所有的其他checkbox即可。
7、获取鼠标的坐标,让指定的区域随着鼠标移动。
获取鼠标坐标:event.x,event.y;
指定区域随鼠标移动其实就是改变了指定区域的left、top的值。
这里需要用到的事件:body对象的onmousemove事件。
还需要用到一个css样式。直接定义页面,所有的区域都在同一层次。
为了对某一个区域进行定位。将该区域分离出来,分离到另一个层次,
用到了css中的position属性。
其中两个相关文件:
1、 tab.css
@charset "utf-8";
/* CSS Document */
table{
border:#009933 1px solid;
width:60%;
}
table th{
border:#00FF66 1px solid;
background-color:#009999;
}
table td{
border:#660099 1px solid;
}
2、 doctool.js
// JavaScript Document
var doc = document;
function byId(id)
{
return doc.getElementById(id);
}
function byTag(tag)
{
return doc.getElementsByTagName(tag);
}
function byName(name)
{
return doc.getElementsByName(name);
}
编写程序如下:
<html>*************************************************************************
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="tab.css" />
<script type="text/javascript" src="doctool.js"></script>
<script type="text/javascript">
function createTab1()
{
var tabNode = doc.createElement("table");
var tbdNode = doc.createElement("tbody");
var trNode = doc.createElement("tr");
var tdNode = doc.createElement("td");
var textNode = doc.createTextNode("单元格一");
tdNode.appendChild(textNode);
trNode.appendChild(tdNode);
tbdNode.appendChild(trNode);
tabNode.appendChild(tbdNode);
byTag("div")[0].appendChild(tabNode);
}
function createTab2()
{
var tabNode = doc.createElement("table");
var trNode = tabNode.insertRow();
var tdNode = trNode.insertCell();
tdNode.innerHTML = "hahah";
byTag("div")[0].appendChild(tabNode);
}
function createTab()
{
var tabNode = doc.createElement("table");
tabNode.setAttribute("id","tabid");
var row = byName("rownum")[0].value;//byNme:getElementsByName()
var col = byName("colnum")[0].value;
for(var x=1;x<=row;x++)
{
var trNode = tabNode.insertRow();
for(var y=1;y<=col;y++)
{
var tdNode = trNode.insertCell();
tdNode.innerHTML = x+"..."+y;
}
}
byTag("div")[0].appendChild(tabNode);
event.srcElement.disabled = true;//作用:控制只创建一次
}
function delRow()
{
var tabNode = byId("tabid");
if(tabNode == null)
{
alert("表格不存在");
return;
}
var rownum = byName("delrow")[0].value;
if(rownum>0 && rownum<=tabNode.rows.length)
{
tabNode.deleteRow(rownum-1);
}
else
{
alert("删除的行不存在,学习数数很重要!");
}
}
function delCol()
{
var tabNode = byId("tabid");
if(tabNode == null)
{
alert("表格不存在");
return;
}
var colnum = byName("delcol")[0].value;
if(colnum>0 && colnum<=tabNode.rows[0].cells.length)
{
for(var x=0;x<tabNode.rows.length;x++)
{
tabNode.rows[x].deleteCell(colnum-1);
}
}
else
{
alert("删除的列不存在");
}
}
</script>
</head>
<!--
通过页面的按钮动态的创建一个表格
-->
<body>
行: <input type="text" name="rownum" /><br />
列: <input type="text" name="colnum" /><br />
<input type="button" value="创建表格" οnclick="createTab()" /><br />
<input type="text" name="delrow" />
<input type="button" value="删除行" οnclick="delRow()"><br />
<input type="text" name="delcol" />
<input type="button" value="删除列" οnclick="delCol()" />
<div>
</div>
</body>
</html>************************************************************************
程序八、
创建如下表格,实现功能:单击年龄后按升序排列,再单击后按降序排列
<html>*************************************************************************
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="tab.css" />
<script type="text/javascript" src="doctool.js"></script>
<script type="text/javascript">
/*
表格中按照年龄的顺序进行排序。
思路:
1、每一个人的信息是一行。
那么先将行都取出,临时存入到数组中,
2、并对数组中行对象的其中一个单元格中的数据进行排序
3、将排序后的行对象重新添加到表格对象中。
*/
var b=true;
function sorttab()
{
//1、获取表格中的所有行对象。
var tabNode = byTag("table")[0];
var trs = tabNode.rows;
//alert(trs.length);
//2、定义临时容器,将表格中需要参与排序的行对象临时存储。
var arr = new Array();//临时容器中存入的都是表格行对象引用
for(var x=1;x<trs.length;x++)
{
arr[x-1]=trs[x];
}
//alert(arr.length);
sortt(arr);
var tbdNode = tabNode.childNodes[0];
//alert(tbdNode.nodeName);
if(b)
{
for(var x=0;x<arr.length;x++)
{
//alert(arr[x].cells[1].innerText);
tbdNode.appendChild(arr[x]);
}
b = false;
}
else
{
for(var x=arr.length-1;x>=0;x--)
{
//alert(arr[x].cells[1].innerText);
tbdNode.appendChild(arr[x]);
}
b = true;
}
}
function sortt(arr)
{
for(var x=0;x<arr.length;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>
<tr>
<th>姓名</th>
<th><a href="javascript:void()" οnclick="sorttab()">年龄</a></th>
<th>地址</th>
</tr>
<tr>
<td>张三</td>
<td>3</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>34</td>
<td>上海</td>
</tr>
<tr>
<td>王武</td>
<td>30</td>
<td>广州</td>
</tr>
<tr>
<td>刘德华</td>
<td>32</td>
<td>江苏</td>
</tr>
<tr>
<td>张惠妹</td>
<td>28</td>
<td>山东</td>
</tr>
</table>
</body>
</html>************************************************************************
程序九、
表格颜色隔行显示为彩色,要求鼠标指向某行时变成高亮显示,鼠标离开时变回原来颜色。
<html>****************************************************************
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="tab.css" />
<style type="text/css">
.one{
background-color:#3366FF;
}
.two{
background-color:#FFFF66;
}
.over{
background-color:#00FF00;
}
</style>
<script type="text/javascript" src="doctool.js"></script>
<script type="text/javascript">
function trcolor()
{
var tabNode = byTag("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].onmouseover = function()
{
name = this.className;
this.className = "over";
}
trs[x].onmouseout = function()
{
this.className = name;
}
}
}
var name;
/*
function over(trNode)
{
name = trNode.className;
trNode.className = "over";
}
function out(trNode)
{
trNode.className = name;
}
*/
window.onload = trcolor;
</script>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th><a href="javascript:void()" οnclick="sorttab()">年龄</a></th>
<th>地址</th>
</tr>
<tr>
<td>张三</td>
<td>3</td>
<td>北京</td>
</tr>
<tr οnmοuseοver="over(this)" οnmοuseοut="out(this)">
<td>李四</td>
<td>34</td>
<td>上海</td>
</tr>
<tr>
<td>王武</td>
<td>30</td>
<td>广州</td>
</tr>
<tr>
<td>黄建翔</td>
<td>32</td>
<td>江苏</td>
</tr>
<tr>
<td>赵欣欣</td>
<td>28</td>
<td>山东</td>
</tr>
</table>
</body>
</html>************************************************************************
程序十、
实现以下商品列表,具有两个全选功能,并能够计算出总金额。
<html xmlns="http://www.w3.org/1999/xhtml">******************************************
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="doctool.js"></script>
<script type="text/javascript">
//1、获取被选中的checkbox,通过checked属性的状态完成。
//2、获取被选中checkbox的value的金额。
//3、求和。
//4、定义span区域存储总金额
function getSum()
{
var items = byName("item");
var sum = 0;
for(var x=0;x<items.length;x++)
{
if(items[x].checked)
sum+= parseInt(items[x].value);
}
var spanNode = byId("sum");
var str = sum+"元";
spanNode.innerHTML = str.fontsize(7);
}
function checkAll(index)
{
var allNode = byName("all")[index];
var items = byName("item");
for(var x=0;x<items.length;x++)
{
items[x].checked = allNode.checked;
}
}
</script>
</head>
<body>
<input type="checkbox" name="all" οnclick="checkAll(0)" />全选<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="item" value="3000" />笔记本电脑:3000元<br />
<input type="checkbox" name="all" οnclick="checkAll(1)" />全选<br />
<input type="button" value="获取总金额" οnclick="getSum()"/><span id="sum"></span>
</body>
</html>************************************************************************
<a href="http://edu.csdn.net"target="blank">ASP.Net+Android+IOS开发</a>、<a href="http://edu.csdn.net"target="blank">.Net培训</a>、期待与您交流! ----------------------
详细请查看:<ahref="http://edu.csdn.net" target="blank"> http://edu.csdn.net</a>