百度音乐案例

同上篇文章类似，都基于ECS6基础知识，重点在于掌握逻辑语法，css样式等不做过多追求

1. 实现功能

添加音乐到列表
选中效果
删除所选音乐
收藏和取消收藏
全选功能和全不选功能
实现效果如图：

2. 写好的主体元素框架和样式图

这个案例，我将样式写成css文件引入到html文件中
html元素代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><!-- 引入css样式 --><link rel="stylesheet" href="./index.css" />
</head><body><section id="wrap"><h2 class="title">百度音乐榜单</h2><ul id="list"><li><input type="checkbox" class="check" /><span>第一条信息</span><a href="javascript:;" class="collect">收藏</a><a href="javascript:;" class="cancelCollect">取消收藏</a><a href="javascript:;" class="remove">删除</a></li><li><input type="checkbox" class="check" /><span>第一条信息</span><a href="javascript:;" class="collect">收藏</a><a href="javascript:;" class="cancelCollect">取消收藏</a><a href="javascript:;" class="remove">删除</a></li></ul><footer class="footer"><label><input type="checkbox" id="checkAll" />全选/全不选</label><a href="javascript:;" id="remove">删除</a><input type="text" id="newInfo" /><a href="javascript:;" id="add">添加</a></footer></section>

css样式代码如下：（样式比较简陋，建议大家根据需求自行添加和修改样式）

ul {margin: 0;padding: 0;list-style: none;
}
h2 {margin: 0;
}
#wrap {margin: 30px auto;width: 482px;padding: 5px;position: relative;border: 1px solid #000;background: #eee;
}
.title {font: bold 18px/40px "宋体";text-align: center;border-bottom: 1px solid #000;
}
#list {padding-left: 2px;
}
#list li {opacity: 0.8;font: 14px/36px "宋体";border-bottom: 1px solid #000;
}
#list li:hover {opacity: 1;
}
#list label input {margin: 0 20px 0 30px;
}
input[type="chekbox"] {width: 20px;height: 20px;
}
.footer {font: 16px/36px "宋体";
}

3. 渲染视图功能

同理，按照数据驱动策略，将渲染函数单独封装，封装思路如下
1. 获取DOM中的列表元素，并清空
2. 使用forEach循环传入的数据，为每个数据创建一个< li >标签
3. 在每个< li >标签中添加单选框、span标签、a标签
4. 将创建的< li >元素添加到DOM中
5. 调用事件功能
6. 判断是否全选或全不选
代码如下：

  <script>let data = [{id: 1,title: "残酷月光 - 林宥嘉",checked: false,collect: true}, {id: 2,title: "光年之外 - 邓紫棋",checked: false,collect: false}, {id: 3,title: "永不失联的爱 - 周兴哲",checked: true,collect: true}, {id: 4,title: "小美好 - BKPP",checked: false,collect: false}, {id: 5,title: "百战成诗 - 群星",checked: true,collect: false //是否收藏 true 收藏 false 没有收藏}];// 数据优先；// 渲染视图；function renderData(data) {document.querySelector("#list").innerHTML = "";data.forEach(item => {let liEle = document.createElement("li");liEle.innerHTML = `<input type="checkbox" class="check" ${item.checked?'checked':''} /><span>${item.title}</span>${item.collect?'<a href="javascript:;" class="cancelCollect">取消收藏</a>':'<a href="javascript:;" class="collect">收藏</a>'} <a href="javascript:;" class="remove">删除</a>`;document.querySelector("#list").appendChild(liEle)})addEvent();// 判断是否全选；->判断数据let isCheckAll = data.every(item=>item.checked);// console.log(isCheckAll)if(isCheckAll){document.querySelector("#checkAll").checked = true;}else{document.querySelector("#checkAll").checked = false;}}renderData(data);

4. 绑定事件

每一个< li >标签里点击对应元素后有相应的功能实现
为了方便整洁，使用switch方法，根据不同的case，对相应的数据进行操作，实现需求
最后渲染视图
代码如下：

function addEvent(){// 绑定事件let liEles = document.querySelectorAll("#list li");//伪数组解构后循环[...liEles].forEach((item,key)=>{item.onclick = function(e){console.log(e.target.className);switch(e.target.className){case 'check':// console.log("input",e.target.checked)data[key].checked = e.target.checked;break;case 'cancelCollect':// console.log("取消收藏")data[key].collect = false;break;case 'remove':console.log("删除");data.splice(key,1);break;case 'collect':console.log("收藏")data[key].collect = true;break;}// 渲染视图；renderData(data);}})}

5. 全选/全不选功能

获取到DOM元素点击后，进行数据循环，修改所有数据的checked属性
然后渲染视图
代码如下：

// 点击全选；
document.querySelector("#checkAll").onclick = function(){data.forEach(item=>{item.checked = this.checked;})renderData(data);
}

6. 删除功能

获取到DOM元素点击后，利用数组的filter方法进行过滤，返回一个新数组
将新数组渲染到视图
代码如下

//点击删除
document.querySelector("#remove").onclick = function(){let newData =  data.filter(item=>!item.checked);renderData(newData);
}

7. 添加功能

获取到DOM元素点击后
先拿到输入框的数据
将数据利用push方法添加到data中，这里默认不选中和未收藏
渲染视图
代码如下

// 添加功能
document.querySelector("#add").onclick = function(){var addstr=document.getElementById("newInfo").value;console.log(data)data.push({"id":6,"title":addstr,"checked":false,"collect":false});console.log(data)renderData(data);
}

html全部代码附上：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><!-- 引入css样式 --><link rel="stylesheet" href="./index.css" />
</head><body><section id="wrap"><h2 class="title">百度音乐榜单</h2><ul id="list"><li><input type="checkbox" class="check" /><span>第一条信息</span><a href="javascript:;" class="collect">收藏</a><a href="javascript:;" class="cancelCollect">取消收藏</a><a href="javascript:;" class="remove">删除</a></li><li><input type="checkbox" class="check" /><span>第一条信息</span><a href="javascript:;" class="collect">收藏</a><a href="javascript:;" class="cancelCollect">取消收藏</a><a href="javascript:;" class="remove">删除</a></li></ul><footer class="footer"><label><input type="checkbox" id="checkAll" />全选/全不选</label><a href="javascript:;" id="remove">删除</a><input type="text" id="newInfo" /><a href="javascript:;" id="add">添加</a></footer></section><script>let data = [{id: 1,title: "残酷月光 - 林宥嘉",checked: false,collect: true}, {id: 2,title: "光年之外 - 邓紫棋",checked: false,collect: false}, {id: 3,title: "永不失联的爱 - 周兴哲",checked: true,collect: true}, {id: 4,title: "小美好 - BKPP",checked: false,collect: false}, {id: 5,title: "百战成诗 - 群星",checked: true,collect: false //是否收藏 true 收藏 false 没有收藏}];// 数据优先；// 渲染视图；function renderData(data) {document.querySelector("#list").innerHTML = "";data.forEach(item => {let liEle = document.createElement("li");liEle.innerHTML = `<input type="checkbox" class="check" ${item.checked?'checked':''} /><span>${item.title}</span>${item.collect?'<a href="javascript:;" class="cancelCollect">取消收藏</a>':'<a href="javascript:;" class="collect">收藏</a>'} <a href="javascript:;" class="remove">删除</a>`;document.querySelector("#list").appendChild(liEle)})addEvent();// 判断是否全选；->判断数据let isCheckAll = data.every(item=>item.checked);// console.log(isCheckAll)if(isCheckAll){document.querySelector("#checkAll").checked = true;}else{document.querySelector("#checkAll").checked = false;}}renderData(data);function addEvent(){// 绑定事件let liEles = document.querySelectorAll("#list li");// console.log(liEles);[...liEles].forEach((item,key)=>{item.onclick = function(e){console.log(e.target.className);switch(e.target.className){case 'check':// console.log("input",e.target.checked)data[key].checked = e.target.checked;break;case 'cancelCollect':// console.log("取消收藏")data[key].collect = false;break;case 'remove':console.log("删除");data.splice(key,1);break;case 'collect':console.log("收藏")data[key].collect = true;break;}// 渲染视图；renderData(data);}})}// 点击全选/全不选；
document.querySelector("#checkAll").onclick = function(){data.forEach(item=>{item.checked = this.checked;})renderData(data);
}
//点击全不选
document.querySelector("#remove").onclick = function(){let newData =  data.filter(item=>!item.checked);renderData(newData);
}// 添加功能
document.querySelector("#add").onclick = function(){var addstr=document.getElementById("newInfo").value;console.log(data)data.push({"id":6,"title":addstr,"checked":false,"collect":false});console.log(data)renderData(data);}</script>
</body></html>

9. 总结

案例还有很多不足的地方，例如每次页面刷新，数据又会恢复到默认情况（数据没有持久性），例如添加的时候，没有判断输入框是否为空情况，例如样式简陋等等，这些可以在实际编写中，根据需求进行更改
巩固自己的同时，希望可以帮到大家~

ECS6基础-案例：百度音乐全选、添加、收藏、删除功能相关推荐

仿百度音乐html5,js仿百度音乐全选操作
本文实例为大家分享了js全选操作的具体代码,供大家参考,具体内容如下无标题文档 *{margin:0;padding:0;} ul{list-style:none;} #content{width: ...
百度音乐全接口 API
百度音乐全接口会利用使用接口找歌简单又快捷 http://tingapi.ting.baidu.com/v1/restserver/ting 获取方式:GET 参数:format=json或xml& ...
android 批量查找view,Android Recyclerview实现多选,单选,全选,反选,批量删除的功能
效果图如下: recyclerview 实现多选,单选,全选,反选,批量删除的步骤 1.在recyclerview布局中添加上底部的全选和反选按钮,删除按钮,和计算数量等控件 2.这里选中的控件没有用 ...
android 全选功能,Android Recyclerview实现多选,单选,全选,反选,批量删除的功能
效果图如下: Recyclerview 实现多选,单选,全选,反选,批量删除的步骤 1.在Recyclerview布局中添加上底部的全选和反选按钮,删除按钮,和计算数量等控件 2.这里选中的控件没有用 ...
android 获取通讯录全选反选_Android Recyclerview实现多选,单选,全选,反选,批量删除的功能...
效果图如下: Recyclerview 实现多选,单选,全选,反选,批量删除的步骤 1.在Recyclerview布局中添加上底部的全选和反选按钮,删除按钮,和计算数量等控件 2.这里选中的控件没有用 ...
[vs2008]Visual Studio 2008 SP1添加或删除功能提示查找SQLSysClrTypes.msi文件
前言今天接到领导布置的一个任务,是之前同事负责的项目.离职了,现在客户有些地方需要修改,由于我之前参与过,就落在我的头上了. 然后我就把代码弄了过来,打开发现其中需要用到水晶报表.(我觉得不好用,不 ...
纯前端vue+bootstrap实现图书管理系统的添加、删除功能
1.纯前端vue+bootstrap实现图书管理系统的添加.删除功能最终效果界面 2.添加效果 3.删除效果 4.前端代码:图书管理系统.html <!DOCTYPE html> < ...
购物车案例模块（全选，增减商品数量，修改商品小计，计算总计和面额，删除商品，选中商品添加背景）
一. 全选按钮分析: 里面3个小的复选框按钮(j-checkbox)选中状态(checked)跟着全选按钮(checkall)走. 因为checked是复选框的固有属性,此时我们需要利用prop()方 ...
axure实现复选框全选_AxureRP8实战手册-案例73（全选与取消全选效果）
案例73. 全选与取消全选效果案例来源: 百度音乐-音乐盒案例效果: 初始状态/取消全选时:(图5-117) 全选后取消任一选项时:(图5-118) 全选/单选全部选中时:(图5-119) 案例描 ...

ECS6基础-案例：百度音乐全选、添加、收藏、删除功能

百度音乐案例

同上篇文章类似，都基于ECS6基础知识，重点在于掌握逻辑语法，css样式等不做过多追求

1. 实现功能

2. 写好的主体元素框架和样式图

3. 渲染视图功能

4. 绑定事件

5. 全选/全不选功能

6. 删除功能

7. 添加功能

html全部代码附上：

9. 总结

ECS6基础-案例：百度音乐全选、添加、收藏、删除功能相关推荐

最新文章

热门文章