Js案例整理

qq_30437579

已于 2023-09-01 10:50:25 修改

阅读量44

点赞数

文章标签： javascript 开发语言 ecmascript

于 2023-08-29 16:52:19 首次发布

本文链接：https://blog.csdn.net/qq_30437579/article/details/132565295

版权

滑动菜单

<!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;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            background-color: #090a20;
        }

        nav {
            position: relative;
            display: flex;
        }

        nav a {

            margin: 0 20px;
            font-size: 2em;
            color: #fff;
            text-decoration: none;
        }

        nav #marker {
            position: absolute;
            height: 4px;
            width: 10%;
            background-color: #e35188;
            left: 20px;
            bottom: -8px;
            transition: .5s;
            border-radius: 4px;
        }
    </style>
</head>

<body>
    <nav>
        <div id="marker"></div>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Portfolio</a>
        <a href="#">Team</a>
        <a href="#">Contact</a>
    </nav>
    <script>
        let marker = document.querySelector('#marker')
        let nav = document.querySelector('nav')

        nav.addEventListener('click', function (e) {
            if (!e.target.closest('a')) return
            marker.style.left = e.target.offsetLeft + 'px'
            marker.style.width = e.target.offsetWidth + 'px'
        })

        // function indicator (e) {
        //     marker.style.left = e.offsetLeft + 'px'
        //     marker.style.width = e.offsetWidth + 'px'
        // }

        // item.forEach(link => {
        //     link.addEventListener('click', e => {
        //         indicator(e.target)
        //     })
        // })
    </script>
</body>

</html>

鼠标拖动事件

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        .slider {
            border-radius: 5px;
            background: #E0E0E0;
            background: linear-gradient(left top, #E0E0E0, #EEEEEE);
            width: 310px;
            height: 15px;
            margin: 5px;
            position: relative;
        }

        .thumb {
            width: 10px;
            height: 25px;
            border-radius: 3px;
            position: absolute;
            left: 10px;
            top: -5px;
            background: blue;
            cursor: pointer;
        }
    </style>
</head>

<body>

    <div id="slider" class="slider">
        <div class="thumb"></div>
    </div>

    <script>
        const slider = document.querySelector('#slider')
        const thumb = document.querySelector('.thumb')

        thumb.addEventListener('mousedown', mouseDown)
        function mouseDown (e) {
            let shiftX = e.clientX - slider.getBoundingClientRect().left
            document.addEventListener('mousemove', move)
            document.addEventListener('mouseup', up)
            function move (e) {
                let left = e.clientX - shiftX - slider.getBoundingClientRect().left
                left = Math.max(0, left)
                left = Math.min(left, slider.offsetWidth - thumb.offsetWidth)
                thumb.style.left = left + 'px'
            }

            function up () {
                document.removeEventListener('mousemove', move)
                document.removeEventListener('mouseup', up)
            }
        }


    </script>

</body>

</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>
</head>

<body>
    <input type="text" id="username" />
    <input type="checkbox" name="" id="remember" /> 记住用户名
    <script>
        var username = document.querySelector('#username')
        var remember = document.querySelector('#remember')
        remember.addEventListener('change', function () {
            if (remember.checked && username.value) {
                localStorage.setItem('username', username.value)
            } else {
                localStorage.removeItem('username')
            }
        })

        if (localStorage.getItem('username')) {
            username.value = localStorage.getItem('username')
            remember.checked = true
        }

    </script>
</body>

</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>
</head>

<body>
  手机号码： <input type="number"> <button>发送</button>
  <script>
    const btn = document.querySelector('button')
    btn.addEventListener('click', function () {
      this.disabled = true
      let time = 2
      this.innerHTML = `${time}s后发送!`


      let t = setInterval(() => {
        if (time == 0) {
          clearInterval(t)
          this.innerHTML = '发送'
          this.disabled = false
          return
        }
        time--
        this.innerHTML = `${time}s后发送!`
      }, 1000)
    })
  </script>
</body>

</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>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      padding: 100px;
    }

    textarea {
      width: 200px;
      height: 100px;
      border: 1px solid pink;
      outline: none;
      resize: none;
    }

    ul {
      margin-top: 50px;
    }

    li {
      width: 300px;
      padding: 5px;
      background-color: rgb(245, 209, 243);
      color: red;
      font-size: 14px;
      margin: 15px 0;
    }

    li a {
      float: right;
    }
  </style>
</head>

<body>
  <textarea name="" id=""></textarea>
  <button>发布</button>
  <ul></ul>
  <script>
    // 1. 获取元素
    var btn = document.querySelector('button')
    var text = document.querySelector('textarea')
    var ul = document.querySelector('ul')
    // 2. 注册事件
    btn.onclick = function () {
      if (!text.value) {
        alert('内容不为空！')
        return
      }
      const li = document.createElement('li')
      li.innerHTML = `${text.value} <a href="javascript:;">删除</a>`
      ul.appendChild(li)
      text.value = ''
      return
    }

    ul.addEventListener('click', function (e) {
      if (e.target.tagName === 'A') {
        e.target.parentNode.remove()
      }
    })



  </script>
</body>

</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>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style-type: none;
    }

    a {
      text-decoration: none;
      font-size: 14px;
    }

    .nav {
      margin: 100px;
    }

    .nav>li {
      position: relative;
      float: left;
      width: 80px;
      height: 41px;
      text-align: center;
    }

    .nav li a {
      display: block;
      width: 100%;
      height: 100%;
      line-height: 41px;
      color: #333;
    }

    .nav>li>a:hover {
      background-color: #eee;
    }

    .nav ul {
      display: none;
      position: absolute;
      top: 41px;
      left: 0;
      width: 100%;
      border-left: 1px solid #fecc5b;
      border-right: 1px solid #fecc5b;
    }

    .nav ul li {
      border-bottom: 1px solid #fecc5b;
    }

    .nav ul li a:hover {
      background-color: #fff5da;
    }
  </style>
</head>

<body>
  <ul class="nav">
    <li>
      <a href="#">微博</a>
      <ul>
        <li>
          <a href="">私信</a>
        </li>
        <li>
          <a href="">评论</a>
        </li>
        <li>
          <a href="">@我</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">微博</a>
      <ul>
        <li>
          <a href="">私信</a>
        </li>
        <li>
          <a href="">评论</a>
        </li>
        <li>
          <a href="">@我</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">微博</a>
      <ul>
        <li>
          <a href="">私信</a>
        </li>
        <li>
          <a href="">评论</a>
        </li>
        <li>
          <a href="">@我</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">微博</a>
      <ul>
        <li>
          <a href="">私信</a>
        </li>
        <li>
          <a href="">评论</a>
        </li>
        <li>
          <a href="">@我</a>
        </li>
      </ul>
    </li>
  </ul>
  <script>
    // 1. 获取元素
    const nav = document.querySelector('.nav')

    const lis = Array.from(nav.children)
    lis.forEach(item => {
      item.addEventListener('mouseover', function () {
        this.querySelector('ul').style.display = 'block'

      })
      item.addEventListener('mouseout', function () {
        this.querySelector('ul').style.display = 'none'

      })
    });


  </script>
</body>

</html>

登录框

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    <style>
        .login-header {
            width: 100%;
            text-align: center;
            height: 30px;
            font-size: 24px;
            line-height: 30px;
        }

        ul,
        li,
        ol,
        dl,
        dt,
        dd,
        div,
        p,
        span,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        a {
            padding: 0px;
            margin: 0px;
        }

        .login {
            /* display: none; */
            width: 512px;
            height: 280px;
            position: fixed;
            border: #ebebeb solid 1px;
            left: 50%;
            top: 50%;
            background: #ffffff;
            box-shadow: 0px 0px 20px #ddd;
            z-index: 9999;
            transform: translate(-50%, -50%);
        }

        .login-title {
            width: 100%;
            margin: 10px 0px 0px 0px;
            text-align: center;
            line-height: 40px;
            height: 40px;
            font-size: 18px;
            position: relative;
            cursor: move;
        }

        .login-input-content {
            margin-top: 20px;
        }

        .login-button {
            width: 50%;
            margin: 30px auto 0px auto;
            line-height: 40px;
            font-size: 14px;
            border: #ebebeb 1px solid;
            text-align: center;
        }

        .login-bg {
            display: none;
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0px;
            left: 0px;
            background: rgba(0, 0, 0, 0.3);
        }

        a {
            text-decoration: none;
            color: #000000;
        }

        .login-button a {
            display: block;
        }

        .login-input input.list-input {
            float: left;
            line-height: 35px;
            height: 35px;
            width: 350px;
            border: #ebebeb 1px solid;
            text-indent: 5px;
        }

        .login-input {
            overflow: hidden;
            margin: 0px 0px 20px 0px;
        }

        .login-input label {
            float: left;
            width: 90px;
            padding-right: 10px;
            text-align: right;
            line-height: 35px;
            height: 35px;
            font-size: 14px;
        }

        .login-title span {
            position: absolute;
            font-size: 12px;
            right: -20px;
            top: -30px;
            background: #ffffff;
            border: #ebebeb solid 1px;
            width: 40px;
            height: 40px;
            border-radius: 20px;
        }
    </style>
</head>

<body>
    <div class="login-header">
        <a id="link" href="javascript:;">点击，弹出登录框</a>
    </div>
    <div id="login" class="login">
        <div id="title" class="login-title">
            登录会员
            <span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span>
        </div>
        <div class="login-input-content">
            <div class="login-input">
                <label>用户名：</label>
                <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input" />
            </div>
            <div class="login-input">
                <label>登录密码：</label>
                <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input" />
            </div>
        </div>
        <div id="loginBtn" class="login-button">
            <a href="javascript:void(0);" id="login-button-submit">登录会员</a>
        </div>
    </div>
    <!-- 遮盖层 -->
    <div id="bg" class="login-bg"></div>
    <script>
        const link = document.querySelector('#link')
        const login = document.querySelector('#login')
        const bg = document.querySelector('#bg')
        const closeBtn = document.querySelector('#closeBtn')
        const title = document.querySelector('#title')

        link.addEventListener('click', function () {
            login.style.display = 'block'
            bg.style.display = 'block'
        })

        closeBtn.addEventListener('click', function () {
            login.style.display = 'none'
            bg.style.display = 'none'
        })


        title.addEventListener('mousedown', function (e) {
            // let shiftX = e.clientX - login.getBoundingClientRect().left
            // let shiftY = e.clientY - login.getBoundingClientRect().top


            console.dir(login.offsetParent)

            let shiftX = e.clientX - login.offsetLeft
            let shiftY = e.clientY - login.offsetTop
            let left = e.clientX - shiftX
            let top = e.clientY - shiftY
            document.addEventListener('mousemove', move)
            function move (e) {
                left = e.clientX - shiftX
                top = e.clientY - shiftY
                login.style.left = left + 'px'
                login.style.top = top + 'px'
            }
            document.addEventListener('mouseup', up)
            function up () {
                document.removeEventListener('mousemove', move)
            }
        })

    </script>
</body>

</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>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style-type: none;
    }

    .tab {
      width: 978px;
      margin: 100px auto;
    }

    .tab_list {
      height: 39px;
      border: 1px solid #ccc;
      background-color: #f1f1f1;
    }

    .tab_list li {
      float: left;
      height: 39px;
      line-height: 39px;
      padding: 0 20px;
      text-align: center;
      cursor: pointer;
    }

    .tab_list .current {
      background-color: #c81623;
      color: #fff;
    }

    .item_info {
      padding: 20px 0 0 20px;
    }

    .item {
      display: none;
    }
  </style>
</head>

<body>
  <div class="tab">
    <div class="tab_list">
      <ul>
        <li class="current">商品介绍</li>
        <li>规格与包装</li>
        <li>售后保障</li>
        <li>商品评价（50000）</li>
        <li>手机社区</li>
      </ul>
    </div>
    <div class="tab_con">
      <div class="item" style="display: block;">
        商品介绍模块内容
      </div>
      <div class="item">
        规格与包装模块内容
      </div>
      <div class="item">
        售后保障模块内容
      </div>
      <div class="item">
        商品评价（50000）模块内容
      </div>
      <div class="item">
        手机社区模块内容
      </div>
    </div>
  </div>
  <script>
    // 获取元素
    const lis = document.querySelectorAll('li')
    const items = document.querySelectorAll('.item')
    console.log(lis)
    lis.forEach((item, index) => {
      item.addEventListener('mouseover', function (e) {
        const elem = document.querySelector('.current')
        elem.classList.remove('current')
        this.classList.add('current')
        const elem2 = document.querySelector("[style*='block']")
        elem2.style.display = 'none'
        items[index].style.display = 'block'
      })
    })
  </script>
</body>

</html>

全选反选

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8" />
  <title></title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .wrap {
      width: 300px;
      margin: 100px auto 0;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
      width: 300px;
    }

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

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

    td {
      font: 14px '微软雅黑';
    }

    tbody tr {
      background-color: #f0f0f0;
    }

    tbody tr:hover {
      cursor: pointer;
      background-color: #fafafa;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <table>
      <thead>
        <tr>
          <th>
            <input type="checkbox" id="j_cbAll" />
          </th>
          <th>商品</th>
          <th>价钱</th>
        </tr>
      </thead>
      <tbody id="j_tb">
        <tr>
          <td>
            <input type="checkbox" />
          </td>
          <td>iPhone8</td>
          <td>8000</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" />
          </td>
          <td>iPad Pro</td>
          <td>5000</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" />
          </td>
          <td>iPad Air</td>
          <td>2000</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" />
          </td>
          <td>Apple Watch</td>
          <td>2000</td>
        </tr>
      </tbody>
    </table>
  </div>
  <script>
    const j_cbAll = document.getElementById('j_cbAll') // 全选按钮
    const j_tbs = document.getElementById('j_tb').querySelectorAll('input')
    j_cbAll.addEventListener('click', function () {
      j_tbs.forEach(item => item.checked = this.checked)
    })
    document.getElementById('j_tb').addEventListener('click', function (e) {
      if (!e.target.tagName == 'INPUT') return
      j_cbAll.checked = Array.from(j_tbs).every(item => item.checked)
    })

  </script>
</body>

</html>

查找字符串"abcoefoxyozzopp"中所有字符出现的位置以及次数

 const str = 'abcoefoxyozzopp'
        const obj = {}
        str.split('').forEach(item => {
            if (str.indexOf(item) !== -1) {
                obj[item] = obj[item] || {}
                obj[item].length = obj[item].length || 0
                ++obj[item].length
                obj[item].list = obj[item].list || []
                obj[item].list.push(str.indexOf(item))
            }

        })
        console.log(obj);

求和案例

const arr = [2, 6, 1, 7, 4]
        //求和
        let sum = 0
        arr.forEach(item => sum += item)

        console.log(sum)
        const sum2 = arr.reduce((pre, cur) => {
            return pre + cur
        }, 0)

        console.log(sum2);