两周时间学完客户端编程.项目是修改http://www.lovoinfo.com的网站. 自己只修改了主页效果:http://datuo.roii.net/java/lovoinfo/index.html 采用CSS+DIV修改的界面 javaScript+xml处理的数据.结果网页通过W3C校检.
主要用到的几个技术:
1.点页面上的+和-动态地添加删除HTML节点 添加的时侯是从XML文件里面读取内容
2. 浏览图片 点previous 和next循环显示图片 图片地址保存在XML文件里
3.利用CSS选择几种不同的颜色
代码1,2:
var xmldoc;
var url = "/j/data.xml"; //XML文件PATH
var nowImg = 1; //默认显示的图片INDEX
if(window.ActiveXObject) //判断浏览器
{
xmldoc = new ActiveXObject("Microsoft.XMLDOM");
xmldoc.async=false;
xmldoc.load(url);
}
else if(document.implementation && document.implementation.createDocument)
{
browser=true;
xmldoc = document.implementation.createDocument("","",null);
xmldoc.load(url);
}
else
{
alert("浏览器不支持该脚本!");
}
function addLi(nodeId) //添加节点
{
var list=document.getElementById(nodeId);
var list_length=list.childNodes.length;
var node = xmldoc.getElementsByTagName("li"+nodeId);
if(list_length < node.length)
{
var textnode = node[list_length].firstChild.nodeValue;
var newElement = document.createElement("li");
list.appendChild(newElement);
var newText = document.createTextNode(textnode);
var link = node[list_length].getAttribute("link");
if(link) //如果内容有链接
{
var aElement = document.createElement("a");
aElement.appendChild(newText);
newElement.appendChild(aElement);
aElement.setAttribute("href",link);
}
else
{
newElement.appendChild(newText);
}
}
}
function remove(nodeId) //删除节点
{
var list=document.getElementById(nodeId);
if(list.childNodes.length > 1)
{
list.removeChild(list.lastChild);
}
}
function preImg(nodeId) //图片前翻
{
var pathnodes = xmldoc.getElementsByTagName("liimg");
var pathnum = pathnodes.length;
if(nowImg==0)
{
nowImg=pathnum;
}
nowImg--;
var pathimg = pathnodes[nowImg].firstChild.nodeValue;
var list = document.getElementById(nodeId);
list.setAttribute("src",pathimg);
return false;
}
function nextImg(nodeId) //图片后翻
{
var pathnodes = xmldoc.getElementsByTagName("liimg");
var pathnum = pathnodes.length;
if(nowImg==pathnum)
{
nowImg=0;
}
var pathimg = pathnodes[nowImg].firstChild.nodeValue;
nowImg++;
var list = document.getElementById(nodeId);
list.setAttribute("src",pathimg);
return false;
}
3.利用CSS选择颜色样式
先预加载几套样式:
<link href="c/colorCss/colorwhite.css" type="text/css" rel="alternate stylesheet" title="white" />
<link href="c/colorCss/colorblue.css" type="text/css" rel="alternate stylesheet" title="blue" />
<link href="c/colorCss/colorfawn.css" type="text/css" rel="alternate stylesheet" title="fawn" />
<link href="c/colorCss/colorgreen.css" type="text/css" rel="alternate stylesheet" title="green" />
<link href="c/colorCss/colorred.css" type="text/css" rel="alternate stylesheet" title="red" />
再利用javascript 代码:
function changecolor(title)
{
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++)
{
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title"))
{
a.disabled = true;
if(a.getAttribute("title") == title)
{
a.disabled = false;
}
}
}
}
做完了回头一看还是简单的.可当时做还是花了大力气.做了两天三.通过这项目把学的CSS JAVASCRIPT全应用到项目来了,对知识的理解和应用也更加深刻.虽然累了值得.