webapis事件的使用，事件监听方法，间歇函数，按钮全选案例，焦点事件，搜索框下拉框案例

最新推荐文章于 2024-05-31 09:45:22 发布

爱凑热闹828

最新推荐文章于 2024-05-31 09:45:22 发布

阅读量146

点赞数 1

分类专栏： web前端文章标签： 1024程序员节 html javascript html5

本文链接：https://blog.csdn.net/weixin_65692463/article/details/127503332

版权

web前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

事件监听方法1

  <button>按钮</button>
    <script>
        // 获取按钮
        const button = document.querySelector('button')
        // 注册 鼠标单击事件
        button.onclick = function () {
            alert('要吃饭了')
        }
    </script>

事件监听方法2

 <button>按钮</button>
    <script>
        // 获取按钮
        const button = document.querySelector('button')
        // 注册 鼠标单击事件
        button.addEventListener('click', function () {
            alert('干饭干饭')
        })
    </script>

间歇函数

<script>
    // 当间隔的时间到了 就调用 函数
    setInterval(function () {
      console.log('意大利')
    }, 5000)
  </script>

按钮全选案例

<!DOCTYPE html>

<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      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;
    }
  </style>
</head>

<body>
  <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>
  <script>
    // 获取 全选 和 下面的3个小选框
    const All = document.querySelector('#checkAll')
    const cks = document.querySelectorAll('.ck')
    // 给全选框 注册 点击事件
    All.addEventListener('click', function () {
      const checked = All.checked

      for (let i = 0; i < cks.length; i++) {
        cks[i].checked = checked
      }
    })

    // 目标 下面的小选框都选中了 上面的全选框 也有选中 只要有一个没选中 上面的全选框不选中
    for (let i = 0; i < cks.length; i++) {
      cks[i].addEventListener('click', function () {
        const ckCheck = document.querySelectorAll('.ck:checked').length
        // if (ckCheck === cks.length) {
        //   All.checked = true
        // } else {
        //   All.checked = false
        // }
        // 简写
        All.checked = ckCheck === cks.length
      })
    }
  </script>
</body>

</html>

焦点事件

  <input type="text">
    <script>
        // 事件名 ：foput 获取焦点
        // 事件名 ： blur 失去焦点
        const input = document.querySelector('input')
        input.addEventListener('focus', function () {
            console.log('获取焦点');
        })
        input.addEventListener('blur', function () {
            console.log('失去焦点');
        })
    </script>

搜索框下拉框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        ul {
            list-style: none;
        }

        .mi {
            position: relative;
            width: 223px;
            margin: 100px auto;
        }

        .mi input {
            width: 223px;
            height: 48px;
            padding: 0 10px;
            font-size: 14px;
            line-height: 48px;
            border: 1px solid #e0e0e0;
            outline: none;
        }

        .mi .search {
            border: 1px solid #ff6700;
        }

        .result-list {
            position: absolute;
            left: 0;
            top: 48px;
            width: 223px;
            border: 1px solid #ff6700;
            border-top: 0;
            background: #fff;
        }

        .result-list a {
            display: block;
            padding: 6px 15px;
            font-size: 12px;
            color: #424242;
            text-decoration: none;
        }

        .result-list a:hover {
            background-color: #eee;
        }
    </style>
</head>

<body>
    <div class="mi">
        <input type="search" placeholder="小米笔记本" />
        <ul class="result-list" style="display: none">
            <li><a href="#">全部商品</a></li>
            <li><a href="#">小米11</a></li>
            <li><a href="#">小米10S</a></li>
            <li><a href="#">小米笔记本</a></li>
            <li><a href="#">小米手机</a></li>
            <li><a href="#">黑鲨4</a></li>
            <li><a href="#">空调</a></li>
        </ul>
    </div>
    <script>
        const input = document.querySelector('input')
        const ul = document.querySelector('.result-list')
        // input 标签 注册 获取 焦点事件 focus 事件
        input.addEventListener('focus', function () {
            // 让input 标签 添加类名 search 同时 ul 需要 显示
            input.classList.add('search')
            ul.style.display = 'block'
        })

        input.addEventListener('blur', function () {
            // 让input 标签 添加类名 search 同时 ul 需要 显示
            input.classList.add('search')
            ul.style.display = 'none'
        })
    </script>
</body>

</html>