DOM-事件基础

1.随机点名-进阶版

  <button class="start">开始随机点名</button>
  <button class="end">结束随机点名</button>

  <script>
    // 模拟数据
    let names = ['小白', '小黑', '小黄', '小刘', '小李']
    //获取3个元素
    let p = document.querySelector('p')
    let start = document.querySelector('.start')
    let end = document.querySelector('.end')

    //把两个变量拿出来 为下面关闭定时器做准备
     let timeId
   let index
    // 为开始按钮绑定单击事件
    start.addEventListener('click', function () {
     //添加定时器
      timeId = setInterval(function () {
      //  生成一个合理的索引
        index = parseInt(Math.random() * names.length)
       //将索引生成名字
       let name = names[index]
       p.innerText = name
      }, 200)
     })
    //单击结束，实现真正的点名
    //函数内部无法直接使用另外一个函数内部声明的成员
     //函数内部可以使用函数外部的成员
     end.addEventListener('click', function () {
       //关闭定时器
       clearInterval(timeId)
      //删除元素
      names.splice(index, 1)
      //判断是否长度为0，为0禁用开始
      if (names.length == 0) {
        start.disabled = true
       }
     })

2.购物车加减操作

    let total = document.querySelector('#total')
    let add = document.querySelector('#add')
    let reduce = document.querySelector('#reduce')

    // 为+按钮绑定单击事件
    add.addEventListener('click', function () {
      let count = total.value
      count++
      total.value = count
      //加一定会导致数量>1
      reduce.disabled = false
    })


    // 为-按钮绑定单击事件
    reduce.addEventListener('click', function () {
      let count = total.value
      count--
      total.value = count
      if (count == 1) {
        reduce.disabled = true
      }
    })

3.全选反选案例

    let checkAll = document.querySelector('#checkAll')
    let all = document.querySelector('.all')
    let cks = document.querySelectorAll('.ck')
    //获取单击事件触发
    checkAll.addEventListener('click', function () {
      let state = checkAll.checked
      //把获得的值遍历
       cks.forEach(function (ele, index) {
         //附值给下面的所有复选框 
        ele.checked = state
       })
     })
    checkAll.addEventListener('click', function () {
      let state = checkAll.checked
      for (let i = 0; i < cks.length; i++) {
        cks[i].checked = state
      }
    })



     //循环绑定事件
    for (let i = 0; i < cks.length; i++) {
     cks[i].addEventListener('click', function () {
       //实现方式就是获取当前被选中的复选框的数量，与总数进行比较
       //.ck:checked:找到匹配的元素，只会匹配被选中的复选框
      let count = document.querySelectorAll('.ck:checked').length
       if (count === cks.length) {
          checkAll.checked = true
         all.innerText = '取消'
        } else {
         checkAll.checked = false
         // all.innerText = '全选'
        }
      })
     }