【JavaScript】程序入门（二）

来源：互联网发布：上海易娱网络编辑：程序博客网时间：2024/05/29 07:10

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

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

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

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

2 0