有时候学习一个新技术,看的很多,但是在运用上 就不是很熟练了,只能多多进行实践,然后通过解决问题,才能深层次理解它。
本次以修改网页皮肤和复选框为例
代码示范不全,如果要完成这些效果还需要HTMl、CSS等文档相互协作完成, js只负责完成动作。
网页换肤
根据用户不同切换,达到整个网页换肤的目的 。
<script>
function(){
var oLink=document.getElementsByTagName("link")[0];
var oSkin=document.getElementById("skin").getElementByTagName("li");
for(var in0;i<oSkin.length;i++)
{
oSkin[i].οnclick=function()
{
for(var p in oSkin) oSkin[p].className="";
this.className="current";
oLink['href']=this.id+".css";
}
}
}
</script>
black.css
body{
background:#ccc;
}
#nav{
background:black;
}
... 最终效果
复选框
全选/反选/全不选
function ()
{
var oA = document.getElementsByTagName("a")[0];
var oInput = document.getElementsByTagName("input");
var oLabel = document.getElementsByTagName("label")[0];
var isCheckAll = function ()
{
for (var i = 1, n = 0; i < oInput.length; i++)
{
oInput[i].checked && n++
}
oInput[0].checked = n == oInput.length - 1;
oLabel.innerHTML = oInput[0].checked ? "全不选" : "全选"
};
//全选/全不选
oInput[0].onclick = function ()
{
for (var i = 1; i < oInput.length; i++)
{
oInput[i].checked = this.checked
}
isCheckAll()
};
//反选
oA.onclick = function ()
{
for (var i = 1; i < oInput.length; i++)
{
oInput[i].checked = !oInput[i].checked
}
isCheckAll()
};
//根据复选个数更新全选框状态
for (var i = 1; i < oInput.length; i++)
{
oInput[i].onclick = function ()
{
isCheckAll()
}
}
}
最终结果
从网上找到很多js的demo,发现学好bs就要把js、html、xml、css等等知识都融会贯通的来学。
从高处向下看,有很多问题也没有那么乱。从低处向上走,有很多难题也没有那么难攀登。加油!!