JS练习第二课总结

终于把JS小练习的第二课做完啦~一共11个小练习，做了11天。。还真是一天一个。。（其实并不是，中间有好几天没做，然后补的，哎~）这一课内容大部分都比较简单，代码也没有什么特别难理解的，不过有一个比较复杂一点。 1.百度输入法效果图：

		var oBtn = document.getElementById('btn');
		var oUlist = document.getElementsByTagName('ul')[0];
		var oClose = document.getElementById('close');
		var flag = true;

		function openIput() {
			oUlist.style.display = "block";
		}
		function closeIput() {
			oUlist.style.display = "none";
		}
		oBtn.onclick=function () {
			if (flag) {
				openIput();
				flag = false;
			}else{
				closeIput();
				flag = true;
			}
		};
		oClose.onclick=function () {
			closeIput();
			flag = true; // 这里如果不写这一句，会有一个小bug
		};

		// 参考写法：
		var oBtn = document.getElementsByTagName("button")[0];
		var oIme = document.getElementById("ime");
		var oClose = document.getElementById("close");
		var style = oIme.style;
		oBtn.onclick = function(){
			style.display = style.display == "block" ? "none" : "block";
		};
		oClose.onclick = function(){
			style.display = "none";
		};

这里的难点在于图片如何定位？如何不影响浮动的效果？重点在于html整体布局以及定位的利用

<div id="outer">
    <h2>名车车标展示-鼠标移过显示车标</h2>
    <ul>
        <li>
            <a href="javascript:;" title="BMW 宝马汽车"><strong>BMW</strong>宝马汽车</a>
            <img src="img/1.jpg" alt="BMW 宝马汽车">//把移入后要展示的图片放在容器里面，然后再利用定位
        </li>
    </ul>
</div>

3、全选、全不选、反选

	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项目练习

CATALOG

FEATURED TAGS

FRIENDS