新闻字体的大中小样式改变。
<!--
思路：
1，先有新闻数据，并用标签封装。
2，定义一些页面样式。静态的样式和预定义的样式（用于动态效果，方便于事件处理时的样式加载。）
3，确定事件源和事件，以及处理方式中被处理的节点。
事件源：a标签 事件：onclick
被处理的节点：div-newstext
既然要给超链接加入自定义的事件处理，就要先取消超链接的默认点击效果。
可以使用给href设置javascript:void(0)来完成。
4，用js处理页面的行为。
-->
<style type="text/css">
/*超链接访问前，访问后样式一致*/
a:link,a:visited{
color:#0044ff;
text-decoration:none;
}
a:hover{
color:#ff8800;
}
#newstext{
width:500px;
border:#00ff00 1px solid;
padding:10px;
}
/*预定一些样式封装到选择器。一般使用类选择器。*/
.norm{
color:#000000;
font-size:16px;
background-color:#cdd8d0;
}
.max{
color:#808080;
font-size:28px;
background-color:#9ce9b4;
}
.min{
color:#ffffff;
font-size:12px;
background-color:#f1b96d;
}
</style>
<script type="text/javascript">
//定义改变字体的方法。
function changeFont2(size,clr){
/*
既然要对div newstext中的文本字体进行操作。
必须要先获取div节点对象。
*/
var oNewsText = document.getElementById("newstext");
//获取oNewText节点的style样式属性对象。
oNewsText.style.fontSize = size;
oNewsText.style.color = clr;
}
/*
如果根据用户点击所需要的效果不唯一。
仅通过传递多个参数虽然可以实现效果，
但是
1，传参过多，阅读性差，
2，js代码和css代码耦合性高。
3，不利于扩展。
解决：
将多个所需的样式进行封装。
封装到选择器中，只要给指定的标签加载不同的选择器就可以了
*/
function changeFont(selectorName){
var oNewsText = document.getElementById("newstext");
oNewsText.className = selectorName;
}
</script>
<h1>这是一个新闻标题</h1>
<hr/>
<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>
<div id="newstext" class="norm">
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
</div>
---------------------------------------------------------------------------------------------------------------
展开闭合列表(代码仅适用于IE6)
<head>
<style type="text/css">
dl dd{
margin:0px;
}
dl{
height:16px;
}
/*预定义一些样式，类选择器，便于给标签进行样式的动态加载。*/
.open{
overflow:visible;
}
.close{
overflow:hidden;
}
dl dt{
color:#ff8000;
}
</style>
</head>
<body>
<!--
思路：
1，标签封装数据，html
2，定义样式 css
3，明确事件源，事件，以及要处理节点，dom
4，明确具体的操作方式，其实就是事件的处理内容。js
-->
<script type="text/javascript">
var flag = true;
//列表展开闭合效果。
function list2(){
/*
思路：
1，将dl属性的overflow的值改成visible即可。
2，要先获取dl节点。
3，改变该节点的style.overflow的属性。
*/
//1，获取dl节点。
var oDlNode = document.getElementsByTagName("dl")[0];
//2，修改style样式属性中的overflow属性值。
// oDlNode.style.overflow = "visible";
if(flag){
oDlNode.style.overflow = "visible";
flag = false;
}else{
oDlNode.style.overflow = "hidden";
flag = true;
}
}
//重新定义list。降低js和css的耦合性。
function list3(node){
// alert(node.nodeName);//dt
//1，获取dl节点。
// var oDlNode = document.getElementsByTagName("dl")[0];
// alert(oDlNode.nodeName);
//2，设置dl的className属性值。
// oDlNode.className = "open";
if(oDlNode.className == "close"){
oDlNode.className = "open";
}else{
oDlNode.className = "close";
}
}
/*
在多个列表下，一次只需要展开一个列表，其他列表都关闭。
怎么保证开一个而关其他呢？
思路：
1，获取所有的dl节点。
2，遍历这些节点，只对当前的dl进行展开或闭合操作，其他都进行闭合操作。
*/
function list(node){
//获取当前的dl节点。
var oDlNode = node.parentNode;
//获取所有的dl节点。
var collDlNodes = document.getElementsByTagName("dl");
//遍历所有dl节点。
for(var x=0;x<collDlNodes.length;x++){
if(collDlNodes[x]==oDlNode){
if(oDlNode.className == "close"){
oDlNode.className = "open";
}else{
oDlNode.className = "close";
}
}else{
collDlNodes[x].className = "close";
}
}
}
</script>
<dl class="close">
<dt onclick="list(this)">显示条目一</dt>
<dd>展开列表内容a</dd>
<dd>展开列表内容a</dd>
<dd>展开列表内容a</dd>
<dd>展开列表内容a</dd>
</dl>
<dl class="close">
<dt onclick="list(this)">显示条目二</dt>
<dd>展开列表内容b</dd>
<dd>展开列表内容b</dd>
<dd>展开列表内容b</dd>
<dd>展开列表内容b</dd>
</dl>
<dl class="close">
<dt onclick="list(this)">显示条目三</dt>
<dd>展开列表内容c</dd>
<dd>展开列表内容c</dd>
<dd>展开列表内容c</dd>
<dd>展开列表内容c</dd>
</dl>
</body>
---------------------------------------------------------------------------------------------------------------
完成一个好友菜单
<head>
<style type="text/css">
/*
对表格中的ul进行样式定义，
1，去除无序列表的样式。
2，将列表的外边距取消。
table ul{
list-style:none;
margin:0px;
background-color:#26e356;
display:none;
/*border:#ff0000 1px solid;*/
padding:0px;
}
/*
对表格框线进行定义。
以及单元格的框线进行定义。
*/
table{
border:#8080ff 1px solid;
width:80px;
}
table td{
border:#8080ff 1px solid;
background-color:#f3c98f;
padding:0px;
}
/*
单元格中的超链接样式。
*/
table td a:link,table td a:visited{
color:#1f6df1;
text-decoration:none;
}
table td a:hover{
color:#df4011;
}
/*预定一些样式*/
.open{
display:block;
}
.close{
display:none;
}
</style>
</head>
<body>
<!--
完成一个好友菜单，
展开闭合效果。
而且要求一次开一个而关其他。
-->
<script type="text/javascript">
function list(node){
//获取被操作的节点ul
//先通过事件源超链接标签获取其父节点td，然后再通过父节点获取ul节点
var oTdNode = node.parentNode;
var oUlNode = oTdNode.getElementsByTagName("ul")[0];
//获取表格中所有的ul
//先获取表格节点对象
var oTabNode = document.getElementById("goodlist");
var collUlNodes = oTabNode.getElementsByTagName("ul");
for(var x=0; x<collUlNodes.length; x++){
if(collUlNodes[x]==oUlNode){
if(oUlNode.className == "open"){
oUlNode.className = "close";
}else{
oUlNode.className = "open";
}
}else{
collUlNodes[x].className = "close";
}
}
// alert(oUlNode.nodeName);//oUlNode.className
}
</script>
<table id="goodlist">
<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>
---------------------------------------------------------------------------------------------------------------
创建表格
<body>
<!--
在页面中创建一个5行6列的表格。
1，事件源，比如按钮。
2，必须有一个生成的表格节点储存位置。
-->
<script type="text/javascript">
function crtTable2(){
/*
思路：
可以通过之前学过的createElement创建元素的形式来完成。
*/
//1，创建表格节点
var oTabNode = document.createElement("table");
//2，创建tBody节点
var oTbdNode = document.createElement("tbody");
//3，创建行节点tr
var oTrNode = document.createElement("tr");
//4，创建单元格节点td
var oTdNode = document.createElement("td");
oTdNode.innerHTML = "这是单元格";
//让这些节点有关系。进行指定层次的节点添加。
oTrNode.appendChild(oTdNode);
oTbdNode.appendChild(oTrNode);
oTabNode.appendChild(oTbdNode);
document.getElementsByTagName('div')[0].appendChild(oTabNode);
}
/*
上面的方法很麻烦。
既然操作的是表格，
那么最方便的方式就是使用表格节点对象的方法来完成。
表格是由行组成。表格节点对象中 insertRow方法就完成了创建行并添加的动作。
行是由单元格组成。通过tr节点对象的insertCell来完成。
*/
function crtTable(){
var oTabNode = document.createElement("table");
// oTabNode.id = "tabid";
oTabNode.setAttribute("id","tabid");
var rowVal = document.getElementsByName("rownum")[0].value;
var colVal = document.getElementsByName("colnum")[0].value;
for(var x=1; x<=rowVal;x++){
var oTrNode = oTabNode.insertRow();
for(var y=1; y<=colVal;y++){
var oTdNode = oTrNode.insertCell();
oTdNode.innerHTML = x+"--"+y;
}
}
//将表格节点添加到div中。
document.getElementsByTagName('div')[0].appendChild(oTabNode);
document.getElementsByName("crtBut")[0].disabled = true;
}
function delRow(){
//获取表格对象。
var oTabNode = document.getElementById("tabid");
if(oTabNode==null){
alert("表格不存在！");
}
//获取要删除的表格行数。
var rowVal = document.getElementsByName("delrow)[0].value;
if(rowVal>=1 && rowVal<=oTabNode.rows.length)
oTabNode.deleteRow(rowVal-1);
else
alert("要删除的行不存在！");
}
//删除列，其实就是在删除每一行中同一位置的单元格。
function delCol(){
var oTabNode = document.getElementById("tabid");
if(oTabNode==null){
alert("表格不存在！");
return;
}
var colVal = document.getElementsByName("delcol")[0].value;
if(colVal >= 1 && colVal <= oTabNode.rows[0].cells.length){
for(var x=0; x<oTabNode.rows.length; x++){
oTabNode.rows[x].deleteCell(colVal-1);
}
}else{
alert("要删除的列不存在！");
}
}
</script>
行：<input type="text" name="rownum" />列：<input type="text" name="colnum" />
<input type="button" value='创建表格' name="crtBut" onclick="crtTable()" />
<hr/>
<input type="text" name="delrow" /><input type="button" value="删除行" onclick="delRow()" /><br/>
<input type="text" name="delcol" /><input type="button" value="删除列" onclick="delCol()" />
<hr/>
<div></div>
</body>
---------------------------------------------------------------------------------------------------------------
行颜色间隔显示并高亮
tableT.css
table{
border:#249bdb 1px solid;
width:500px;
border-collapse:collapse;
}
table td{
border:#249bdb 1px solid;
padding:10px;
}
table th{
border:#249bdb 1px solid;
padding:10px;
background-color:rgb(200,200,200);/*rgb()颜色可以用三个8位255的值来表示*/
}
<head>
<link rel="stylesheet" type="text/css" href="tableT.css"/>
<style type="text/css">
.one{
background-color:#e1e16a;
}
.two{
background-color:#75f094;
}
.over{
background-color:#f9360d;
}
</style>
<script type="text/javascript">
var name;
function trColor(){
/*
思路：
1，因为要操作行的样式，所以要先获取表格对象。
2，获取所有被操作的行对象。
3，遍历行并给每一行指定样式。
*/
var oTabNode = document.getElementById("info");
// alert(oTabNode);
//表格中所有的行。
var collTrNodes = oTabNode.rows;
//遍历的时候从第二行遍历。
for(var x=1; x<collTrNodes.length; 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(){//onload：页面加载完毕后运行此方法
trColor();
}
/*
function over(node){
name = node.className;
node.className = "over";
}
function out(node){
node.className = name;
}
*/
</script>
</head>
<body>
<table id="info">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
</tr>
<tr>
<td>张三</td>
<td>27</td>
<td>上海</td>
</tr>
<tr>
<td>小强</td>
<td>26</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>29</td>
<td>广州</td>
</tr>
<tr>
<td>孙八</td>
<td>23</td>
<td>南京</td>
</tr>
<tr>
<td>二麻子</td>
<td>19</td>
<td>大连</td>
</tr>
<tr>
<td>犀利姐</td>
<td>32</td>
<td>青岛</td>
</tr>
<tr>
<td>旺财</td>
<td>19</td>
<td>深圳</td>
</tr>
<tr>
<td>周七</td>
<td>42</td>
<td>铁岭</td>
</tr>
<tr>
<td>毕姥爷</td>
<td>18</td>
<td>沈阳</td>
</tr>
</table>
</body>
---------------------------------------------------------------------------------------------------------------
表格排序
<head>
<link rel="stylesheet" type="text/css" href="tableT.css"/>
<style type="text/css">
th a:link,th a:visited{
color:#279bda;
text-decoration:none;
}
</style>
<script type="text/javascript">
var flag = true;
function sortTable(){
/*
思路：
1，排序就需要数组。获取需要参与排序的行对象数组。
2，对行数组中的每一个行的年龄单元格的数据进行比较，并完成行对象在数组中的位置置换。
3，将排好序的数组重新添加回表格。
*/
var oTabNode = document.getElementById("info");
var collTrNodes = oTabNode.rows;
//定义一个临时容器，存储需要排序行对象。
var trArr = [];
//遍历原行集合，并将需要排序的行对象存储到临时容器中。
for(var x=1; x<collTrNodes.length; x++){
trArr[x-1] = collTrNodes[x];
}
//对临时容器排个序。
mySort(trArr);
//将排完序的行对象添加回表格。
if(flag){
for(var x=0; x<trArr.length; x++){
//oTabNode.childNodes[0].appendChild(trArr[x]);
// alert(trArr[x].cells[0].inerHTML);
trArr[x].parentNode.appendChild(trArr[x]);
}
flag = false;
}else{
for(var x=trArr.length-1; x>=0; x--){
trArr[x].parentNode.appendChild(trArr[x]);
}
flag = true;
}
// alert("over");
}
function mySort(arr){
for(var x=0; x<arr.length-1; x++){
for(var y=x+1; y<arr.length; y++){
//按照年龄数值排序，并转成整数。比较数组中x和y角标的单元格为1的值，也就是表格中的年龄。
if(parseInt(arr[x].cells[1].innerHTML)>parseInt(arr[y].cells[1].innerHTML)){
var temp = arr[x];
arr[x] = arr[y];
arr[y] = temp;
// arr[x].swapNode(arr[y]);
}
}
}
}
</script>
</head>
<body>
<table id="info">
<tr>
<th>姓名</th>
<th><a href="javascript:void(0)" onclick="sortTable()">年龄</a></th>
<th>地址</th>
</tr>
<tr>
<td>张三</td>
<td>27</td>
<td>上海</td>
</tr>
<tr>
<td>小强</td>
<td>6</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>29</td>
<td>广州</td>
</tr>
<tr>
<td>孙八</td>
<td>23</td>
<td>南京</td>
</tr>
<tr>
<td>二麻子</td>
<td>24</td>
<td>大连</td>
</tr>
<tr>
<td>犀利姐</td>
<td>32</td>
<td>青岛</td>
</tr>
<tr>
<td>旺财</td>
<td>19</td>
<td>深圳</td>
</tr>
<tr>
<td>周七</td>
<td>42</td>
<td>铁岭</td>
</tr>
<tr>
<td>毕姥爷</td>
<td>18</td>
<td>沈阳</td>
</tr>
</table>
</body>
---------------------------------------------------------------------------------------------------------------
全选商品列表
<body>
<script type="text/javascript">
function getSum(){
/*
获取所有的名称为item的复选框。
判断checked状态，为true表示被选中，获取该节点的value进行累加。
*/
var sum = 0;
var collItemNodes = document.getElementsByName("item");
for(var x=0; x<collItemNodes.length; x++){
if(collItemNodes[x].checked){
sum += parseInt(collItemNodes[x].value);
}
}
var sSum = sum+"元";
document.getElementById("sumid").innerHTML = sSum.fontcolor('red');
}
//全选。
function checkAll(node){
//将全选的box的checked状态赋值给所有的itembox的checked
var collItemNodes = document.getElementsByName("item");
for(var x=0; x<collItemNodes.length; x++){
collItemNodes[x].checked = node.checked;
}
}
</script>
<input type="checkbox" name="allitem" onclick="checkAll(this)" />全选<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="allitem" onclick="checkAll(this)" />全选<br/>
<input type="button" value="总金额是" onclick="getSum()" /><span id="sumid"></span>
</body>
