【JavaScript】程序入门（二）

有时候学习一个新技术，看的很多，但是在运用上 就不是很熟练了，只能多多进行实践，然后通过解决问题，才能深层次理解它。

本次以修改网页皮肤和复选框为例

代码示范不全，如果要完成这些效果还需要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].onclick=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等等知识都融会贯通的来学。

从高处向下看，有很多问题也没有那么乱。从低处向上走，有很多难题也没有那么难攀登。加油！！