JS模拟百度音乐-全选操作

最新推荐文章于 2022-05-16 15:19:06 发布

波克比520

最新推荐文章于 2022-05-16 15:19:06 发布

阅读量1.4k

点赞数 2

分类专栏： javascript

本文链接：https://blog.csdn.net/u011175410/article/details/50130467

版权

javascript 专栏收录该内容

55 篇文章 0 订阅

订阅专栏

本文介绍了如何使用JavaScript来模拟百度音乐的全选操作，包括CSS样式设计和JavaScript逻辑实现，最终达到预览效果，实现了对音乐列表的全选功能。

摘要由CSDN通过智能技术生成

CSS部分：

body,ul{margin:0; padding:0;}
	ul{margin:100px auto 0; width:200px;font-size:12px; background:white;}
	li{list-style:none; height:30px; line-height:30px; border-bottom:1px solid #fff;}
	span{float:right;}
	#bottom{width:200px; margin:0px auto;font-size:12px; height:30px;}
	#bottom input{float:left;}
	#bottom a{width:30px; line-height:20px; text-decoration:none; text-align:center; float:right; margin-left:5px; color:#999; border:1px solid #999; border-radius:2px;}
	.disabled{cursor:no-drop;}

HTML部分：

<ul>
	<li><input type="checkbox" /> 私奔<span>梁博</span></li>
	<li><input type="checkbox" /> 北京北京<span>汪峰</span></li>
	<li><input type="checkbox" /> 过火<span>张信哲</span></li>
	<li><input type="checkbox" /> 空城<span>杨坤</span></li>
	<li><input type="checkbox" /> 我是一匹来自北方的狼<span>齐秦</span></li>
	<li><input type="checkbox" /> 白天不懂夜的黑<span>那英</span></li>
</ul>
<div id="bottom">
	<input type="checkbox"/> 全选
	<a href="http://www.baidu.com">删除</a>
	<a href="http://www.baidu.com">添加</a>
	<a href="http://www.baidu.com">收藏</a>
</div>

JS部分：

window.onload = function(){
		var aLi = document.getElementsByTagName('li');
		var aInput = document.getElementsByTagName('input');
		var oDivBottom = document.getElementById('bottom');
		var aA = oDivBottom.getElementsByTagName('a');
		var arrColor = ['#fff','#cff'];
		var oParLi = null;
		var checkedInputNum = 0;

		// 设置底部a链接状态
		setAclassName();
		function setAclassName(){
			// 循环遍历所有a
			for(var i = 0; i < aA.length; i++){
				// 判断选中的复选框个数
				if(checkedInputNum > 0){
					aA[i].className = '';
				}else{
					aA[i].className = 'disabled';
				}
			}
		};

		// 循环遍历所有的li
		for (var i = 0; i < aLi.length; i++) {
			aLi[i].index = i;
			// 隔行变色
			aLi[i].style.background = arrColor[i%arrColor.length];

			// 当鼠标经过li时，让当前的li变成灰色
			aLi[i].onmouseover = function(){
				this.style.backgroundColor = '#eee';
			};

			// 当鼠标移开时li的背景色状态变回之前的状态
			aLi[i].onmouseout = function(){
				// 如果当前li所在的input没有被选中
				if(!aInput[this.index].checked){
					this.style.backgroundColor = arrColor[this.index%arrColor.length];
				}
			};

			// 当点击input复选框
			aInput[i].onclick = function(){
				// 获取当前复选框的父元素li
				oParLi = this.parentNode;
				// 如果当前input是选中状态
				if(this.checked){
					// 改变背景色#eee,同时获取选中的数量
					oParLi.style.backgroundColor = '#eee';
					checkedInputNum ++;
					// console.log(checkedInputNum);
				}else{
					checkedInputNum --;
					// console.log(checkedInputNum);
				}
				setAclassName();

				// 判断如果复选框的数量等于它的长度-1[不包含最后一个]
				if(checkedInputNum == aInput.length - 1){
					// 就让最后一个选中
					aInput[aInput.length - 1].checked = true;
				}else{
					// 否则就不选中
					aInput[aInput.length - 1].checked = false;
				}
			};

			// 当点击最后一个复选框input时
			aInput[aInput.length - 1].onclick = function(){
				for (var i = 0; i < aLi.length; i++) {
					// 如果当前input是选中状态
					if(this.checked){
						// 让所有遍历的input复选框选中，并设置背景色和获取选中数量
						aInput[i].checked = true;
						aLi[i].style.backgroundColor = '#eee';
						checkedInputNum = aInput.length - 1;
					}else{
						// 否则就让所有遍历的input复选框不选中，设置背景色和重置选中数量为0
						aInput[i].checked = false;
						aLi[i].style.backgroundColor = arrColor[i%arrColor.length];
						checkedInputNum = 0;
					}
				}
				setAclassName();
			};
		};

	};

预览效果：