随机点名小案例、轮播图切换小案例和全选小案例三种方法

随机点名小案例

代码: html和css

 <button>随机抽取</button>
  <button>停止</button>
  <span>这是渲染位置</span>

 span {
      display: block;
      width: 100px;
      margin-top: 100px;
      padding: 10px 20px;
      border: 1px solid #f00;
      text-align: center;
    }

script

  <script>
    // 定义名单数组
    let arr = ['吕布', '马超', '赵云', '狂铁', '东方耀']
    //获取html元素节点
    let btn = document.querySelectorAll('button')
    let spans = document.querySelector('span')
    //声明定时器
    let times = null
    //声明判断标记
    let flag = true
    //设置开始随机抽取的监听事件
    btn[0].addEventListener('click', () => {
      //判断声明标记
      if (flag) {
        //声明标记赋值为false，防止重复点击重复执行定时器
        flag = false
        spans.style.backgroundColor = ""
        //开始定时器
        times = setInterval(() => {
          //获取随机数
          let getRandom = parseInt(Math.random() * arr.length)
          //将arr内容渲染到标签内
          spans.innerText = arr[getRandom]
        }, 10)
      }
    })
    //设置停止的监听事件
    btn[1].addEventListener('click', () => {
      //声明标记赋值为true,下一次可以开启定时器随机抽取
      flag = true
      //清除定时器
      clearInterval(times)
      //将背景颜色设置红色
      spans.style.backgroundColor = "red"
    })

  </script>

主要思路:

1. 先定义一个存储名字的数组
2. 绑定按钮监听事件
3. 点击开始抽取时执行定时器，定时器内设置个随机数将获取的数字给数组索引渲染到标签内
4. 点击停止时清空定时器

注意:

一、 要将定义定时器的变量定义为全局作用域，如果定义在btn[0]监听事件里面将btn[1]将无法获取times变量就会报错times未定义

二、我们要用一个变量flag来用作节流阀控制住按钮是否可以再次执行，如果已经点过了flag就变成fale，再次点击时将不再执行，当点击停止时再将flag变成true，表明你可以再次点击btn[0]监听的当前事件,如没有写你重复点击了随机抽取很可能发生当前情况。

轮播图切换小案例(未完整)

css

   * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        li {
            list-style: none;
        }

        a {
            display: block;
        }

        .banner {
            position: relative;
            width: 700px;
            height: 320px;
            margin: 100px auto;
            overflow: hidden;
        }

        .box {
            position: absolute;
            display: flex;
            transition: 0.4s;
        }

        .left,
        .right {
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            top: 50%;
            transform: translateY(-50%);
            width: 50px;
            height: 50px;
            border-radius: 50px;
            background-color: rgba(0, 0, 0, 0.6);
            z-index: 1;
        }


        .right {
            right: 20px;
        }

        .left {
            left: 20px;
        }

        .left::after,
        .right::after {
            content: "<";
            font-size: 30px;
            font-weight: 800;
            text-align: center;
            line-height: 50px;
            font-family: 宋体;
            color: #fff;
        }

        .right::after {
            content: ">";

        }

html

 <div class="banner">
        <ul class="box">
            <li><a href="#"><img src="./images/b01.jpg"></a></li>
            <li><a href="#"><img src="./images/b02.jpg"></a></li>
            <li><a href="#"><img src="./images/b03.jpg"></a></li>
            <li><a href="#"><img src="./images/b04.jpg"></a></li>
            <li><a href="#"><img src="./images/b05.jpg"></a></li>
        </ul>
        <div class="left"></div>
        <div class="right"></div>
        <ul class="list"></ul>
    </div>

js

<script>
        //获取元素节点
        let lefts = document.querySelector('.left')
        let rights = document.querySelector('.right')
        let boxs = document.querySelector('.box')
        let lis = boxs.querySelectorAll("li")
        let banners = document.querySelector('.banner')
        //设置当前显示的第几张图片
        let num = 0
        //声明定时器
        let times = null
        //初始位置
        boxs.style.left = -700 * num + "px"
        //封装右边轮播事件
        function right() {
            //当num等于轮播最大值时将它初始化
            if (num === lis.length - 1) {
                num = 0
                boxs.style.left = -700 * num + "px"
            } else {
                num++
                boxs.style.left = -700 * num + "px"
            }
        }
        //封装左边轮播事件
        function left() {
            // 当轮播最小值时将轮播图调到最后一张图
            if (num === 0) {
                num = lis.length - 1
                boxs.style.left = -700 * num + "px"
            } else {
                num--
                boxs.style.left = -700 * num + "px"
            }
        }
        //封装自动轮播事件
        function time() {
            times = setInterval(() => {
                left()
            }, 2000)
        }
        //页面加载时调用自动轮播事件
        time()
        lefts.addEventListener('click', function () {
            left()
        })
        rights.addEventListener('click', function () {
            right()
        });
        //鼠标进入时暂停轮播
        banners.addEventListener('mouseenter', () => {
            clearInterval(times)
        })
        //鼠标离开时启动轮播
        banners.addEventListener('mouseleave', () => {
            time()

        })
    </script>

轮播图案案例注意事项:

mouseenter、mouseleave 和 mouseover、mouseout区别

mouseout:鼠标出去

mouseleave：鼠标离开

mouseover:鼠标经过

mouseenter:鼠标进入

这四个鼠标事件是非常容易用错的

全选和反选案例

统一css和html

  * {
      margin: 0;
      padding: 0;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
      width: 500px;
      margin: 100px auto;
      text-align: center;
    }

    th {
      background-color: #09c;
      font: bold 16px '微软雅黑';
      color: #fff;
      height: 24px;
    }

    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }

    .allCheck {
      width: 80px;
    }

 <table>
    <tr>
      <th class="allCheck">
        <input type="checkbox" name="" id="checkAll" />
        <span class="all">全选</span>
      </th>
      <th>商品</th>
      <th>商家</th>
      <th>价格</th>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck" />
      </td>
      <td>小米手机</td>
      <td>小米</td>
      <td>￥1999</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck" />
      </td>
      <td>小米净水器</td>
      <td>小米</td>
      <td>￥4999</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck" />
      </td>
      <td>小米电视</td>
      <td>小米</td>
      <td>￥5999</td>
    </tr>
  </table>

方法一:标记判断法

js

 //获取元素
    let checkAlls = document.querySelector('#checkAll')
    let cks = document.querySelectorAll('.ck')
    let alls = document.querySelector('.all')
    //声明判断标记
    let flag
    checkAlls.addEventListener('click', function () {
      // 声明state为全选按钮当前状态
      let state = this.checked
      //遍历将复选框为当前全选的状态
      cks.forEach((ele, i) => {
        ele.checked = state
      })
      alls.innerHTML = state ? "取消" : "全选"
    })
    //遍历复选框
    for (let i = 0; i < cks.length; i++) {
      //绑定每个复选框监听事件
      cks[i].addEventListener('click', function () {
        //每次将标记赋值为true
        flag = true
        //遍历复选框
        cks.forEach((v, i) => {
          //判断复选框是否有选中的，如果有就将flag标记赋值为false
          if (v.checked == false) {
            flag = false
          }
        })
        //将false标记的值赋值给全选框选中状态
        checkAlls.checked = flag
        alls.innerHTML = flag ? "取消" : "全选"
      })
    }

思路:

全选:点击全选按钮时有一个变量存储当前全选状态再将全选状态变量赋值给复选框

复选框:

1. 我们在全局中声明一个标记flag
2. 为每一个复选按钮变量绑定一个监听事件
3. 当点击其中一个复选按钮时将flag赋值为true一次遍历一次当前每个复选框的选中状态，如果有false未选中的就将flag赋值为false
4. 最后将全选按钮赋值flag标记的值

方法二:记数法

 let checkAlls = document.querySelector('#checkAll')
        let cks = document.querySelectorAll('.ck')
        let alls = document.querySelector('.all')
        let counts = 0
        checkAlls.addEventListener('click', function () {
            let state = this.checked
            cks.forEach((ele, i) => {
                ele.checked = state

            })
            alls.innerHTML = state ? "取消" : "全选"
        })
        for (let i = 0; i < cks.length; i++) {
            cks[i].addEventListener('click', function () {
                // 利用记数法来判断是否选满 定义个变量counts为0,每点击一次触发一次
                let counts = 0
                //遍历当中的有多少被选中counts就为多少
                cks.forEach((v) => {
                    if (v.checked == true) {
                        counts += 1
                    }
                })
                // 利用counts的值来判断是否选满
                if (counts == cks.length) {
                    checkAlls.checked = true

                } else {
                    checkAlls.checked = false
                }
                alls.innerHTML = checkAlls.checked ? "取消" : "全选"
            })
        }

思路:

全选:同上

复选:

1. 为每一个复选按钮变量绑定一个监听事件
2. 当点击其中一个复选按钮时将count赋值为0，遍历所有复选框如果有true的为count加1，如果有count等于复选框元素节点的长度就将全选为true，否则为false

方法三长度法

 let checkAlls = document.querySelector('#checkAll')
        let cks = document.querySelectorAll('.ck')
        let alls = document.querySelector('.all')
        checkAlls.addEventListener('click', function () {
            let state = this.checked
            cks.forEach((ele, i) => {
                ele.checked = state

            })
            alls.innerHTML = state ? "取消" : "全选"
        })
        for (let i = 0; i < cks.length; i++) {
            cks[i].addEventListener('click', function () {
                //定义一个变量存储复选框选中的长度
                let counts = document.querySelectorAll('.ck:checked').length
                console.log(counts.length)
                //判断长度是否等于复选框长度
                if (counts === cks.length) {
                    checkAlls.checked = true
                } else {
                    checkAlls.checked = false
                }
                alls.innerHTML = checkAlls.checked ? "取消" : "全选"
            })
        }

思路:

全选:同上

复选框: 为每一个复选按钮变量绑定一个监听事件 定义一个变量存储复选框选中的长度 判断选中长度是否等于复选框长度，等于复选框元素节点的长度就将全选为true，否则为false

关键代码

.ck:checked为伪类选择器