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

于 2021-02-28 17:44:54 发布
阅读量519 收藏 2
点赞数
分类专栏： 前端 ECS6 文章标签： html5 javascript es6 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cathy_2000/article/details/114228836
版权

百度音乐案例

同上篇文章类似，都基于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. 总结

  • 案例还有很多不足的地方，例如每次页面刷新，数据又会恢复到默认情况（数据没有持久性），例如添加的时候，没有判断输入框是否为空情况，例如样式简陋等等，这些可以在实际编写中，根据需求进行更改
  • 巩固自己的同时，希望可以帮到大家~
CCoisini.0202
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JS模拟百度音乐-全选操作
波克比的前端CSDN博客
12-01 1425
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{f
stimulus-check-all:实现全选复选框功能的刺激控制器
05-29
刺激CheckAll 作为刺激控制器的包装器。 跟踪更新的所有更改安装这个包假设你已经安装并设置了 。 使用以下命令在您的项目中安装库： yarn add stimulus-check-all# ornpm install --save stimulus-check-all 并在您...
js仿百度音乐全选操作
10-20
主要为大家详细介绍了js仿百度音乐全选操作，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
百度音乐全选操作
菜小白学前端
07-28 290
看了很多模拟百度音乐全选操作小例子，觉得还原度都不高，自己写了个（包括按钮的禁用啥的都满足了），一起学习 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #content{margin: ...
ECS6 基础知识汇总
CCoisini.0202的博客
02-27 603
ECMAScript 6基础 本节知识要点 ES6基本使用 数据驱动视图 ES6员工列表案例 百度音乐全选案例 ECMAScript 6 简介 JavaScript 三大组成部分 ECMAScript DOM BOM ECMAScript 发展历史 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Language_Resources ECMAScript 包含内容：JS 中的数据类型及相关操作，流程控制，运算符及相关运算……
ECMAScript 的发展历史
歪脖先生的博客
01-13 1200
ECMAScript 的发展历史 ES6 从开始制定到最后发布，整整用了 15 年。 前面提到，ECMAScript 1.0 是 1997 年发布的，接下来的两年，连续发布了 ECMAScript 2.0（1998 年 6 月）和 ECMAScript 3.0（1999 年 12 月）。3.0 版是一个巨大的成功，在业界得到广泛支持，成为通行标准，奠定了 JavaScript 语言的基
el-select 下拉框多选实现全选的实现
10-16
主要介绍了el-select 下拉框多选实现全选的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
案例：购物车案例模块-全选
01-18
案例：购物车案例模块-全选
es6的介绍--前端学习（3）
greety
02-03 91
ECMAScript 6入门 一、ECMAScript6介绍 1）什么是 ECMAScript 6.0 ​ ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 2）ECMAScript与JavaScript的区别 ​ ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现
音乐网站的开发，用有3-4个案例
05-17
音乐网站的开发，所有音乐网的案例，共有3-4个案例，有用的人可以进行参考，下载，好用了，给个好评，感谢的话就可以了
音乐播放器案例.zip
07-02
音乐播放器案例.zip
ecs6 一些操作
qq_27084325的博客
06-24 521
json // let a = 6; // console.log(a) let { foo, bar } = { foo: 'JSPang', bar: '张晓明' }; console.log(foo + bar); //控制台打印出了“JSPang张晓明” 对象扩展运算符 let arr1 = ['www', 'jspang', 'com']; //let arr2=arr1; l...
javascript必修课_特效
06-19
本课将带你学习前端开发中最重要的技术JavaScript,它是网页与用户进行交互的基石。我们将从最简单的点击事件、表单提交、元素改变颜色开始，一步步由浅及深学习JS的各种酷炫知识。最后我们还会学习Jquery框架，以提高你的前端开发效率。学完本课后，你将能独立做出与用户有复杂交互(表单、动画、视频等)的网站效果。
案例27：百度音乐全选-onchange监听单选框复选框
kino2046的博客
04-30 253
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"/> <metaname="viewport"content="width=device-width,initial-scale=1.0"/> <me...
百度音乐全选
weixin_34044273的博客
12-19 125
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> *{ margin:0px; padding:0px; } #wrap{ width:400p...
百度音乐，购物车的全选功能
QTFYING的博客
06-01 662
大家帮我顶一下啊~~~
ECS6初学习
chuaichonglong5903的博客
06-09 179
1.Number.isInteger() 判断一个值是否为整数，在js内部中整数耦合浮点数是同样的存储方法，所以3和3.0被认为是同一个值。 Number.isInteger(25.1) // false Number.isInteger("15") // false Numbe...
头条项目接口自动化测试(五)之文章收藏和取消收藏接口测试
dpl12的博客
03-25 850
文章收藏和取消收藏接口测试 1、自动化测试的目录结构 2、实现文章接口对象的封装api_articel.py """ 功能：实现文章接口对象的封装 """ import requests class ApiArticle(object): #收藏文章 def api_post_collection(self,url,headers,data): #调用post方...
bootstrap-multiselect includeSelectAllOption:取消全选这个选项'
最新发布
05-30
要取消全选选项，在使用 bootstrap-multiselect 插件时，可以通过设置 `includeSelectAllOption` 选项为 `false` 来实现。例如： ```javascript $('#my-select').multiselect({ includeSelectAllOption: false, /...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值