JS实例_javascript二维码叉掉-CSDN博客

本文链接：https://blog.csdn.net/rfalcon/article/details/108140467

文章目录

通过小叉号关闭某个二维码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>关闭二维码</title>
    <style>
      .box {
        position: relative;
        width: 74px;
        height: 80px;
        border: 1px solid #ccc;
        margin: 100px auto;
        font-size: 12px;
        text-align: center;
        color: #f40;
      }
      .box img {
        width: 60px;
        margin-top: 5px;
      }
      .box .close {
        position: absolute;
        top: -1px;
        left: -16px;
        width: 14px;
        height: 14px;
        border: 1px solid #ccc;
        line-height: 14px;
        font-family: Arial, Helvetica, sans-serif;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <img src="img/tao.png" alt="" />
      <i class="close">×</i>
    </div>

    <script>
      // 1.获取元素属性
      var box = document.querySelector('.box')
      var btn = document.querySelector('.close')
      // 2.注册事件 & 3.事件处理
      btn.onclick = function () {
        box.style.display = 'none'
      }
    </script>
  </body>
</html>

密码的显示与隐藏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>密码的显示与隐藏</title>
    <style>
      .box {
        width: 300px;
        border-bottom: 1px solid #ccc;
        margin: 100px auto;
        position: relative;
      }
      .box input {
        width: 270px;
        outline: none;
        border: 0;
      }
      .box img {
        position: absolute;
        top: 2px;
        right: 12px;
        width: 20px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <input type="password" />
      <img src="img/close.png" alt="" />
    </div>
    <script>
      // 1.获取元素
      var iput = document.querySelector('input')
      var img = document.querySelector('img')
      // 2.注册事件 & 3.事件处理
      var flag = 0
      img.onclick = function () {
        if (flag == 0) {
          iput.type = 'text'
          img.src = 'img/open.png'
          flag = 1
        } else {
          iput.type = 'password'
          img.src = 'img/close.png'
          flag = 0
        }
      }
    </script>
  </body>
</html>

循环精灵图

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>循环精灵图</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      li {
        list-style-type: none;
      }
      .box {
        width: 250px;
        margin: 100px auto;
      }
      .box li {
        float: left;
        width: 24px;
        height: 24px;
        background-color: pink;
        margin: 15px;
        background: url(img/sprite.png) no-repeat;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <script>
      // 1.获取所有的li
      var lis = document.querySelectorAll('li')
      for (var i = 0; i < lis.length; i++) {
        // 索引号*44为每个li背景的y坐标
        var index = i * 44
        lis[i].style.backgroundPosition = '0-' + index + 'px'
      }
    </script>
  </body>
</html>

显示与隐藏input框内容

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>显示隐藏文本框内容</title>
    <style>
      input {
        width: 300px;
        height: 30px;
        line-height: 30px;
        color: gray;
        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <input type="text" />
  </body>
  <script>
    var iput = document.querySelector('input')
    iput.onfocus = function () {
      iput.value = '请输入用户名/邮箱/手机号'
    }
    iput.onblur = function () {
      iput.value = ''
    }
  </script>
</html>

注册时候的密码验证

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>注册时密码验证</title>
    <style>
      .register {
        width: 600px;
        margin: 0 auto;
      }
      .tip {
        display: inline-block;
        font-size: 12px;
        color: #999;
        background: url(img/register/mess.png) no-repeat left center;
        padding-left: 20px;
      }
      .wrong {
        background: url(img/register/wrong.png) no-repeat left center;
        color: red;
      }
      .right {
        background: url(img/register/right.png) no-repeat left center;
        color: green;
      }
    </style>
  </head>
  <body>
    <div class="register">
      <input type="password" />
      <p class="tip">请输入6~16位密码</p>
    </div>
    <script>
      var iput = document.querySelector('input')
      var op = document.querySelector('p')
      iput.onblur = function () {
        if (iput.value.length >= 6 && iput.value.length <= 16) {
          op.className = 'tip right'
          op.innerHTML = '符合要求,可注册'
        } else {
          op.className = 'tip wrong'
          op.innerHTML = '不符合要求，请重新输入'
        }
      }
      iput.onfocus = function () {
        iput.value = ''
        op.className = 'tip'
        op.innerHTML = '请输入6~16位密码'
      }
    </script>
  </body>
</html>

按钮点击的排他思想

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>按钮点击的排他思想</title>
    <style>
      .btn {
        display: flex;
        justify-content: center;
      }
      button {
        margin: 100px 10px;
      }
    </style>
  </head>
  <body>
    <div class="btn">
      <button>按钮1</button>
      <button>按钮2</button>
      <button>按钮3</button>
      <button>按钮4</button>
      <button>按钮5</button>
    </div>
    <script>
      var aBtns = document.querySelectorAll('button')
      for (var i = 0; i < aBtns.length; i++) {
        aBtns[i].onclick = function () {
          for (var i = 0; i < aBtns.length; i++) {
            aBtns[i].style.backgroundColor = ''
            aBtns[i].style.color = ''
          }
          this.style.backgroundColor = 'greenyellow'
          this.style.color = 'red'
        }
      }
    </script>
  </body>
</html>

点击图片实现更换背景

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>点击图片实现更换背景图片的效果</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        background: url(img/change_skin/1.jpg) no-repeat;
        background-size: cover;
      }
      img {
        width: 100px;
        height: 63px;
        margin: 100px 5px;
      }
      div {
        display: flex;
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <div>
      <img src="img/change_skin/1.jpg" alt="" />
      <img src="img/change_skin/2.jpg" alt="" />
      <img src="img/change_skin/3.jpg" alt="" />
      <img src="img/change_skin/4.jpg" alt="" />
    </div>
    <script>
      var imgs = document.querySelectorAll('img')
      for (var i = 0; i < imgs.length; i++) {
        imgs[i].onclick = function () {
          document.body.style.backgroundImage = 'url(' + this.src + ')'
        }
      }
    </script>
  </body>
</html>

实现鼠标移动表格隔行变色+高亮

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表格的隔行变色</title>
    <style>
      table {
        width: 800px;
        margin: 100px auto;
        text-align: center;
        /* 为表格设置合并边框模型 */
        border-collapse: collapse;
        font-size: 14px;
      }
      thead tr {
        height: 30px;
        background-color: skyblue;
      }
      tbody tr {
        height: 30px;
        border-bottom: 1px solid #d7d7d7;
        font-size: 12px;
        color: blue;
      }
      .bg {
        background-color: pink;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>代码</th>
          <th>名称</th>
          <th>最新公布净值</th>
          <th>累计净值</th>
          <th>前单位净值</th>
          <th>净值增长率</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>003526</td>
          <td>农银金穗3个月定期开放债券</td>
          <td>1.075</td>
          <td>1.079</td>
          <td>1.074</td>
          <td>+0.047%</td>
        </tr>
        <tr>
          <td>003526</td>
          <td>农银金穗3个月定期开放债券</td>
          <td>1.075</td>
          <td>1.079</td>
          <td>1.074</td>
          <td>+0.047%</td>
        </tr>
        <tr>
          <td>003526</td>
          <td>农银金穗3个月定期开放债券</td>
          <td>1.075</td>
          <td>1.079</td>
          <td>1.074</td>
          <td>+0.047%</td>
        </tr>
        <tr>
          <td>003526</td>
          <td>农银金穗3个月定期开放债券</td>
          <td>1.075</td>
          <td>1.079</td>
          <td>1.074</td>
          <td>+0.047%</td>
        </tr>
        <tr>
          <td>003526</td>
          <td>农银金穗3个月定期开放债券</td>
          <td>1.075</td>
          <td>1.079</td>
          <td>1.074</td>
          <td>+0.047%</td>
        </tr>
        <tr>
          <td>003526</td>
          <td>农银金穗3个月定期开放债券</td>
          <td>1.075</td>
          <td>1.079</td>
          <td>1.074</td>
          <td>+0.047%</td>
        </tr>
      </tbody>
    </table>
    <script>
      var aTrs = document.querySelector('tbody').querySelectorAll('tr')
      for (var i = 0; i < aTrs.length; i++) {
        aTrs[i].onmouseover = function () {
          this.className = 'bg'
        }
        aTrs[i].onmouseout = function () {
          this.className = ''
        }
      }
    </script>
  </body>
</html>

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>表格的隔行变色+高亮</title>
  <style>
    table {
      width: 800px;
      margin: 100px auto;
      text-align: center;
      /* 为表格设置合并边框模型 */
      border-collapse: collapse;
      font-size: 14px;
    }

    thead tr {
      height: 30px;
      background-color: skyblue;
    }

    tbody tr {
      height: 30px;
      border-bottom: 1px solid #d7d7d7;
      font-size: 12px;
      color: blue;
    }

    .bg {
      background-color: pink;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <table>
    <thead>
      <tr>
        <th>代码</th>
        <th>名称</th>
        <th>最新公布净值</th>
        <th>累计净值</th>
        <th>前单位净值</th>
        <th>净值增长率</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>003526</td>
        <td>农银金穗3个月定期开放债券</td>
        <td>1.075</td>
        <td>1.079</td>
        <td>1.074</td>
        <td>+0.047%</td>
      </tr>
      <tr>
        <td>003526</td>
        <td>农银金穗3个月定期开放债券</td>
        <td>1.075</td>
        <td>1.079</td>
        <td>1.074</td>
        <td>+0.047%</td>
      </tr>
      <tr>
        <td>003526</td>
        <td>农银金穗3个月定期开放债券</td>
        <td>1.075</td>
        <td>1.079</td>
        <td>1.074</td>
        <td>+0.047%</td>
      </tr>
      <tr>
        <td>003526</td>
        <td>农银金穗3个月定期开放债券</td>
        <td>1.075</td>
        <td>1.079</td>
        <td>1.074</td>
        <td>+0.047%</td>
      </tr>
      <tr>
        <td>003526</td>
        <td>农银金穗3个月定期开放债券</td>
        <td>1.075</td>
        <td>1.079</td>
        <td>1.074</td>
        <td>+0.047%</td>
      </tr>
      <tr>
        <td>003526</td>
        <td>农银金穗3个月定期开放债券</td>
        <td>1.075</td>
        <td>1.079</td>
        <td>1.074</td>
        <td>+0.047%</td>
      </tr>
    </tbody>
  </table>
  <script>
    var aTrs = document.querySelector('tbody').querySelectorAll('tr')
    for (var i = 0; i < aTrs.length; i++) {
      if (i % 2 == 0) {
        aTrs[i].style.backgroundColor = '#f2f2f2'
      } else {
        aTrs[i].style.backgroundColor = '#ccc'
      }

      var setColor = ''

      aTrs[i].onmouseover = function () {
        setColor = this.style.backgroundColor
        console.log(setColor);
        this.style.backgroundColor = '#fff'
      }
      aTrs[i].onmouseout = function () {
        this.style.backgroundColor = setColor
      }
    }
  </script>
</body>

</html>

实现表格的全选反选

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>实现table的全选和反选</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      table {
        margin: 100px auto;
        border-collapse: collapse;
        width: 300px;
        text-align: center;
      }
      thead th {
        border: 1px solid #d7d7d7;
        background-color: skyblue;
      }
      tbody td {
        border: 1px solid #d7d7d7;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>
            <input type="checkbox" id="check_all" />
          </th>
          <th>商品</th>
          <th>价钱</th>
        </tr>
      </thead>
      <tbody id="check_td">
        <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>
    <script>
      var oTh = document.getElementById('check_all')
      var aTds = document
        .getElementById('check_td')
        .getElementsByTagName('input')
      oTh.onclick = function () {
        for (var i = 0; i < aTds.length; i++) {
          aTds[i].checked = this.checked
        }
      }
      for (var i = 0; i < aTds.length; i++) {
        aTds[i].onclick = function () {
          var flag = true
          for (var i = 0; i < aTds.length; i++) {
            if (!aTds[i].checked) {
              flag = false
              break
            }
          }
          oTh.checked = flag
        }
      }
    </script>
  </body>
</html>

tab栏切换

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>tabChange</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style-type: none;
    }

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

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

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

    .active {
      background-color: red;
      color: #fff;
    }

    .item {
      display: none;
      margin-top: 10px;
    }
  </style>
</head>

<body>
  <div class="tab">
    <div class="tab_list">
      <li class="active">选项1</li>
      <li>选项2</li>
      <li>选项3</li>
      <li>选项4</li>
      <li>选项5</li>
    </div>
    <div class="tab_con">
      <div class="item">商品描述1</div>
      <div class="item">商品描述2</div>
      <div class="item">商品描述3</div>
      <div class="item">商品描述4</div>
      <div class="item">商品描述5</div>
    </div>
  </div>

  <script>
    var aLis = document.querySelector('.tab_list').querySelectorAll('li')
    var items = document.querySelectorAll('.item')
    for (var i = 0; i < aLis.length; i++) {
      aLis[i].setAttribute('index', i)
      aLis[i].onclick = function () {
        for (var i = 0; i < aLis.length; i++) {
          aLis[i].className = ''
        }
        this.className = 'active'
        var index = this.getAttribute('index')
        for (var i = 0; i < items.length; i++) {
          items[i].style.display = 'none'
        }
        items[index].style.display = 'block'

      }
    }
  </script>
</body>
</html>

下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>下拉菜单</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: 40px;
      text-align: center;
    }

    .nav li a {
      display: block;
      width: 100%;
      height: 100%;
      line-height: 40px;
      color: grey;
    }

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

    .nav ul {
      display: none;
      position: absolute;
      top: 40px;
      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 class="nav_list">
        <li><a href="">私信</a></li>
        <li><a href="">评论</a></li>
        <li><a href="">@我</a></li>
      </ul>
    </li>
    <li>
      <a href="#">我的</a>
      <ul class="nav_list">
        <li><a href="">私信</a></li>
        <li><a href="">评论</a></li>
        <li><a href="">@我</a></li>
      </ul>
    </li>
    <li>
      <a href="#">我的</a>
      <ul class="nav_list">
        <li><a href="">私信</a></li>
        <li><a href="">评论</a></li>
        <li><a href="">@我</a></li>
      </ul>
    </li>
    <li>
      <a href="#">我的</a>
      <ul class="nav_list">
        <li><a href="">私信</a></li>
        <li><a href="">评论</a></li>
        <li><a href="">@我</a></li>
      </ul>
    </li>
  </ul>
  <script>
    var nav = document.querySelector('.nav')
    var aLis = nav.children
    for (var i = 0; i < aLis.length; i++) {
      aLis[i].onmouseover = function () {
        this.children[1].style.display = 'block'
      }
      aLis[i].onmouseout = function () {
        this.children[1].style.display = 'none'
      }
    }
  </script>
</body>
</html>

简单留言板

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>简单留言板</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      padding: 100px;
    }

    textarea {
      width: 200px;
      height: 100px;
      border: 1px solid gainsboro;
      background-color: ghostwhite;
      outline: none;
      resize: none;
    }

    ul {
      margin-top: 50px;
    }

    li {
      width: 300px;
      padding: 5px;
    }

    button {
      background-color: greenyellow;
      color: hotpink;
      border: 1px solid #ccc;
      margin-right: 10px;
    }

    ul {
      margin-top: 50px;
    }

    li {
      list-style-type: none;
      width: 300px;
      padding: 5px;
      background-color: rgb(245, 209, 243);
      color: red;
      font-size: 14px;
      margin: 15px 0;
    }
  </style>
</head>
<body>
  <textarea name="" id=""></textarea>
  <button>submit</button>
  <ul></ul>
  <script>
    var txt = document.querySelector('textarea')
    var btn = document.querySelector('button')
    var ul = document.querySelector('ul')

    btn.onclick = function () {
      if (txt.value == '') {
        alert('你没有输入内容！')
        return false
      } else {
        // 1.创建节点
        var li = document.createElement('li')
        li.innerHTML = txt.value + '<a href="">删除</a>'
        // 2.添加节点
        // ul.appendChild(li)
        ul.insertBefore(li, ul.children[0])
        // 3.删除节点
        var as = document.querySelectorAll('a');
        for (var i = 0; i < as.length; i++) {
          as[i].onclick = function () {
            ul.removeChild(this.parentNode);
          }
        }
      }
      txt.value = ''
    }
  </script>
</body>
</html>

动态生成表格

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态生成表格</title>
  <style>
    table {
      width: 500px;
      margin: 100px auto;
      border-collapse: collapse;
      text-align: center;
    }

    th,
    td {
      border: 1px solid #333;
    }

    thead tr {
      height: 40px;
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <th>姓名</th>
      <th>科目</th>
      <th>成绩</th>
      <th>操作</th>
    </thead>
    <tbody></tbody>
  </table>
  <script>
    // 1.准备好表格中的数据
    var datas = [{
      name: '魏璎珞',
      subject: 'JavaScript',
      score: 100
    }, {
      name: '弘历',
      subject: 'JavaScript',
      score: 98
    }, {
      name: '傅恒',
      subject: 'JavaScript',
      score: 99
    }, {
      name: '明玉',
      subject: 'JavaScript',
      score: 88
    }, {
      name: '大猪蹄子',
      subject: 'JavaScript',
      score: 0
    }];
    // 2.创建元素
    var tbody = document.querySelector('tbody')
    for (var i = 0; i < datas.length; i++) {
      var tr = document.createElement('tr')
      tbody.appendChild(tr)
      for (var k in datas[i]) {
        var td = document.createElement('td')
        td.innerHTML = datas[i][k]
        tr.appendChild(td)
      }
      // 3.创建删除单元格
      var td = document.createElement('td')
      td.innerHTML = '<a href="javascript:;">删除</a>'
      tr.appendChild(td)
    }
    // 4.进行表格的删除操作
    var as = document.querySelectorAll('a')
    for (var i = 0; i < as.length; i++) {
      as[i].onclick = function () {
        tbody.removeChild(this.parentNode.parentNode)
      }
    }
  </script>
</body>
</html>

模拟京东快递单号查询

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模拟京东快递单号查询</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .search {
        position: relative;
        width: 200px;
        margin: 100px;
      }
      .show {
        display: none;
        position: absolute;
        width: 165px;
        top: -40px;
        border: 1px solid rgba(0, 0, 0, 0.2);
        box-shadow: rgba(0, 0, 0, 0.2);
        padding: 5px 0;
        font-size: 18px;
        line-height: 20px;
        color: #333;
      }
      .show::before {
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        top: 28px;
        left: 18px;
        border: 8px solid #000;
        border-style: solid dashed dashed;
        border-color: #fff transparent transparent;
      }
    </style>
  </head>
  <body>
    <div class="search">
      <div class="show">123</div>
      <input type="text" placeholder="请输入查询的内容：" class="iput" />
    </div>
    <script>
      var show = document.querySelector('.show')
      var iput = document.querySelector('.iput')
      iput.addEventListener('keyup', function () {
        if (this.value == '') {
          show.style.display = 'none'
        } else {
          show.style.display = 'block'
          show.innerHTML = this.value
        }
      })
      iput.addEventListener('blur', function () {
        show.style.display = 'none'
      })
      iput.addEventListener('focus', function () {
      	if(this.value !== ''){
      		show.style.display = 'block'
      	}
      })
    </script>
  </body>
</html>

搜索框模拟focus事件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模拟搜索框focus事件</title>
  </head>
  <body>
    <input type="text" />
    <script>
      var iput = document.querySelector('input')
      document.addEventListener('keyup', function (e) {
        if (e.keyCode === 65) {//当按下a或者A时触发input的focus事件
          iput.focus()
        }
      })
    </script>
  </body>
</html>

style 属性的获取和修改（行内 + 内联，外链）

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

<head>
  <meta charset="UTF-8">
  <title>style属性的获取和修改</title>
  <style>
    div {
      border: 6px solid red;
    }
  </style>
</head>

<body>

  <div class="box1" style="width: 200px;height: 100px;background-color: pink;"></div>

  <script>
    var box1 = document.getElementsByTagName("div")[0];
    // 获取行内样式
    console.log(box1.style.backgroundColor);
    console.log(box1.style['background-color']);
    console.log(box1.style.border); //没有打印结果，因为这个属性不是行内样式
    console.log(typeof box1.style); //因为是对象，所以打印结果是Object
    console.log(box1.style); //打印结果是对象
    console.log(getStyle(box1, 'border')); //6px solid rgb(255, 0, 0)

    // 获取内嵌样式或外链样式
    function getStyle(ele, attr) {
      if (window.getComputedStyle) {
        return window.getComputedStyle(ele, null)[attr];
      }
      return ele.currentStyle[attr];
    }
  </script>
</body>

</html>

固定侧边栏的实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>scroll-固定侧边栏</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .slider {
      position: absolute;
      left: 50%;
      top: 300px;
      margin-left: 600px;
      width: 45px;
      height: 130px;
      background-color: pink;
    }

    .w {
      width: 1200px;
      margin: 10px auto;
    }

    .header {
      height: 150px;
      background-color: purple;
    }

    .banner {
      height: 250px;
      background-color: skyblue;
    }

    .main {
      height: 1000px;
      background-color: yellowgreen;
    }

    span {
      display: none;
      position: absolute;
      bottom: 0;
    }
  </style>
</head>
<body>
  <div class="slider">
    <span class="goTop">返回顶部</span>
  </div>
  <div class="header w">header</div>
  <div class="banner w">banner</div>
  <div class="main w">main</div>
  <script>
    // 获取元素
    var slider = document.querySelector('.slider')
    var goTop = document.querySelector('.goTop')
    var banner = document.querySelector('.banner')
    var main = document.querySelector('.main')
    // 被卷去头部的大小
    var bannerTop = banner.offsetTop
    // 侧边栏固定定位后该有的值
    var sliderTop = slider.offsetTop - bannerTop
    // main页面的top值
    var mainTop = main.offsetTop
    // 页面滚动事件
    document.addEventListener('scroll', function () {
      if (window.pageYOffset >= bannerTop) {
        slider.style.position = 'fixed'
        slider.style.top = sliderTop + 'px'
      } else {
        slider.style.position = 'absolute'
        slider.style.top = '300px'
      }
      // 页面滚动到main盒子，就显示goTop模块
      if (window.pageYOffset >= mainTop) {
        goTop.style.display = 'block'
      } else {
        goTop.style.display = 'none'
      }
    })
  </script>
</body>
</html>

定时关闭网页广告

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>定时关闭网页广告</title>
  </head>
  <body>
    <img src="img/ad/ad.jpg" alt="" />
    <script>
      var img = document.querySelector('img')
      setTimeout(function () {
        img.style.display = 'none'
      }, 3000)
    </script>
  </body>
</html>

实现倒计时的效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>实现倒计时效果</title>
    <style>
      div {
        margin: 200px;
      }
      span {
        display: inline-block;
        width: 40px;
        height: 40px;
        line-height: 40px;
        background-color: #333;
        font-size: 20px;
        color: #fff;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div>
      <span class="hour">1</span>
      <span class="minute">2</span>
      <span class="second">3</span>
    </div>
    <script>
      // 1.获取到所有的元素
      var hour = document.querySelector('.hour')
      var minute = document.querySelector('.minute')
      var second = document.querySelector('.second')
      var inputTime = +new Date('2020-08-25 18:00:00')

      // 2.先调用一次函数，防止页面空白
      countDown()

      // 3.开启一个定时器
      setInterval(countDown, 1000)

      function countDown(time) {
        var nowTime = +new Date() // 返回的是当前时间总的毫秒数
        var times = (inputTime - nowTime) / 1000 // times是剩余时间总的秒数
        var h = parseInt((times / 60 / 60) % 24) //时
        h = h < 10 ? '0' + h : h
        hour.innerHTML = h // 把剩余的小时给 小时黑色盒子
        var m = parseInt((times / 60) % 60) // 分
        m = m < 10 ? '0' + m : m
        minute.innerHTML = m
        var s = parseInt(times % 60) // 当前的秒
        s = s < 10 ? '0' + s : s
        second.innerHTML = s
      }
    </script>
  </body>
</html>

定时器的封装

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动画效果</title>
  <style>
    .d1 {
      position: absolute;
      width: 100px;
      height: 100px;
      background-color: pink;
      left: 0px;
    }

    .d2 {
      position: absolute;
      width: 100px;
      height: 100px;
      background-color: yellowgreen;
      left: 0px;
    }
  </style>
</head>
<body>
  <button>click-d2</button>
  <div class="d1"></div>
  <div class="d2"></div>

  <script>
    // 动画函数封装
    function animation(obj, target) {
      // 为了防止多次点击按钮开启多个定时器，每次点击之前先关闭上次的定时器
      clearInterval(obj.timer)
      obj.timer = setInterval(function () {
        if (obj.offsetLeft >= target) {
          clearInterval(timer)
        }
        obj.style.left = obj.offsetLeft + 1 + 'px'
      }, 30)
    }
    var d1 = document.querySelector('.d1')
    var d2 = document.querySelector('.d2')
    var btn = document.querySelector('button')
    animation(d1, 100)
    btn.addEventListener('click', function () {
      animation(d2, 200)
    })
  </script>
</body>
</html>

发送短信验证码倒计时效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>发送短信验证码倒计时案例</title>
  <style>
    div {
      width: 400px;
      margin: 100px auto;
    }
  </style>
</head>
<body>
  <div>
    <input type="text" placeholder="请输入您的手机号" />
    <button>确认发送</button>
  </div>
  <script>
    var btn = document.querySelector('button')
    var iput = document.querySelector('input')
    var time = 59; //定义剩下的秒数
    btn.addEventListener('click', function () {
      // 点击发送以后按钮不可点击
      btn.disabled = true
      // 设置一个每秒变化的定时器
      var timer = setInterval(function () {
        if (time == 0) {
          clearInterval(timer)
          btn.disabled = false
          btn.innerHTML = '确认发送'
        } else {
          btn.innerHTML = time + " 秒后重新发送"
          time--
        }
      }, 1000)
    })
  </script>
</body>
</html>

简易实现带参数的登录页面的跳转

<body>
  <form action="index.html">
    用户名：<input type="text" name="uname">
    <input type="submit" value="登录">
  </form>
</body>

//index.html
<body>
  <div></div>
  <script>
    console.log(location.search)
    // 在字符串中抽取从 start 下标开始的指定数目的字符
    var params = location.search.substr(1)
    console.log(params)
    //用等号分割得到的字符串
    var arr = params.split('=')
    console.log(arr)
    var div = document.querySelector('div')
    div.innerHTML = arr[1]
  </script>
</body>

简易实现一个放大镜功能

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      background-color: pink;
    }

    .small {
      width: 290px;
      height: 290px;
      position: absolute;
      top: 50px;
      left: 100px;
    }

    .small img {
      width: 100%;
      height: 100%;
    }

    .big {
      width: 100px;
      height: 100px;
      border: 1px solid black;
      left: 500px;
      top: 50px;
      position: absolute;
      overflow: hidden;
    }

    .big img {
      width: 580px;
      height: 580px;
      position: absolute;
      left: 0;
      top: 0;
    }

    .mask {
      display: none;
      width: 50px;
      height: 50px;
      background-color: white;
      opacity: 0.5;
      filter: alpha(opacity=50);
      position: absolute;
      left: 0px;
      top: 0px;
    }
  </style>
</head>
<body>
  <div class="small">
    <img src="img/big/phone2.png" alt="">
    <div class="mask"></div>
  </div>
  <div class="big">
    <img src="img/big/phone2.png" alt="">
  </div>
  <script>
    var small = document.querySelector('.small')
    var big = document.querySelector('.big')
    var mask = document.querySelector('.mask')
    var bigImg = big.getElementsByTagName('img')[0]

    small.addEventListener('mouseover', function () {
      mask.style.display = 'block'
      big.style.display = 'block'
    })
    small.addEventListener('mouseout', function () {
      mask.style.display = 'none'
      big.style.display = 'none'
    })
    small.addEventListener('mousemove', function (e) {
      var e = e || window.event
      var l = e.clientX - small.offsetLeft - 25
      var t = e.clientY - small.offsetTop - 25
      if (l <= 0) {
        l = 0
      }
      if (l >= 240) {
        l = 240
      }
      if (t <= 0) {
        t = 0
      }
      if (t >= 240) {
        t = 240
      }
      mask.style.left = l + 'px'
      mask.style.top = t + 'px'
      bigImg.style.left = l * -2 + 'px'
      bigImg.style.top = t * -2 + 'px'
    })
  </script>
</body>
</html>

实现模态框的拖拽

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>实现模态框的拖动</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .login_header {
        width: 100%;
        text-align: center;
        height: 30px;
        font-size: 24px;
        line-height: 30px;
      }
      .login_box {
        display: none;
        width: 512px;
        height: 280px;
        position: fixed;
        border: 1px solid #ebebeb;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        box-shadow: 0px 0px 20px #ddd;
        /* 为了让弹出框显示在background的前面 */
        z-index: 9999;
      }
      .login_title {
        width: 100%;
        margin: 10px 0px 0px 0px;
        text-align: center;
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        position: relative;
        cursor: move;
      }
      .login_input_content {
        margin-top: 20px;
      }
      .login_button {
        width: 50%;
        margin: 30px auto 0px auto;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        border: 1px solid #ebebeb;
        text-align: center;
      }
      a {
        text-decoration: none;
        color: #000000;
      }
      .login_button a {
        display: block;
      }
      .list_input {
        float: left;
        width: 350px;
        height: 35px;
        line-height: 35px;
        border: 1px solid #ebebeb;
        text-align: 5px;
      }
      .login_input {
        margin: 0px 0px 20px 0px;
        overflow: hidden;
      }
      .login_input label {
        float: left;
        width: 90px;
        height: 35px;
        line-height: 35px;
        padding-right: 10px;
        text-align: right;
        font-size: 14px;
      }
      .login_title span {
        position: absolute;
        font-size: 12px;
        right: -20px;
        top: -30px;
        width: 40px;
        height: 40px;
        background: #fff;
        border: 1px solid #ebebeb;
        border-radius: 20px;
        cursor: pointer;
      }
      .login_bg {
        display: none;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.5);
      }
    </style>
  </head>
  <body>
    <!-- login_link -->
    <div class="login_header">
      <a href="javascript:;" class="link">点击，弹出登录框</a>
    </div>
    <!-- login_box -->
    <div class="login_box">
      <!-- login_head -->
      <div class="login_title">
        登录会员
        <span><a href="javascript:void(0);" class="close-login">关闭</a></span>
      </div>
      <!-- login_input -->
      <div class="login_input_content">
        <div class="login_input">
          <label>用户名：</label>
          <input
            type="text"
            placeholder="请输入用户名"
            id="username"
            class="list_input"
          />
        </div>
        <div class="login_input">
          <label>登录密码：</label>
          <input
            type="password"
            placeholder="请输入登录密码"
            id="password"
            class="list_input"
          />
        </div>
      </div>
      <!-- login_button -->
      <div class="login_button">
        <a href="javascript:void(0);" id="login_button_submit">登录会员</a>
      </div>
    </div>
    <!-- body_mask -->
    <div class="login_bg"></div>

    <script>
      // 获取弹出框的link
      var link = document.querySelector('.link')
      // 获取整个登录盒子
      var loginBox = document.querySelector('.login_box')
      // 获取关闭按钮
      var closeBtn = document.querySelector('.close-login')
      console.log(closeBtn)
      // 获取遮罩
      var mask = document.querySelector('.login_bg')
      // 获取input框的title
      var title = document.querySelector('.login_title')
      // 获取login_box框
      var loginBox = document.querySelector('.login_box')
      console.log(loginBox)
      // 点击link 弹出input框和遮罩
      link.addEventListener('click', function () {
        loginBox.style.display = 'block'
        mask.style.display = 'block'
      })
      // 点击关闭按钮，隐藏input框和遮罩
      closeBtn.addEventListener('click', function () {
        loginBox.style.display = 'none'
        mask.style.display = 'none'
      })
      // 弹出input框时候可以实现拖拽(mousedown、mousemove、mouseup)
      loginBox.addEventListener('mousedown', function (e) {
        var x = e.pageX - loginBox.offsetLeft
        var y = e.pageY - loginBox.offsetTop
        document.addEventListener('mousemove', move)
        function move(e) {
          loginBox.style.left = e.pageX - x + 'px'
          loginBox.style.top = e.pageY - y + 'px'
        }
        document.addEventListener('mouseup', function () {
          document.removeEventListener('mousemove', move)
        })
      })
    </script>
  </body>
</html>

动态导航栏

function animate(obj, target, callback) {
  // 先清除以前的定时器，只保留当前的一个定时器执行
  clearInterval(obj.timer);
  obj.timer = setInterval(function () {
    // 步长值写到定时器的里面
    // 把我们步长值改为整数 不要出现小数的问题
    // var step = Math.ceil((target - obj.offsetLeft) / 10);
    var step = (target - obj.offsetLeft) / 10;
    step = step > 0 ? Math.ceil(step) : Math.floor(step);
    if (obj.offsetLeft == target) {
      // 停止动画 本质是停止定时器
      clearInterval(obj.timer);
      // 回调函数写到定时器结束里面
      // if (callback) {
      //     // 调用函数
      //     callback();
      // }
      callback && callback();
    }
    // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
    obj.style.left = obj.offsetLeft + step + 'px';
  }, 15);
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>实现导航栏动态效果</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style-type: none;
    }

    body {
      background-color: black;
    }

    .nav {
      width: 900px;
      height: 40px;
      margin: 100px auto;
      position: relative;
      border-radius: 5px;
      background: #fff url(img/nav/rss.png) no-repeat right center;
    }

    .nav ul {
      position: absolute;
    }

    .nav li {
      float: left;
      width: 83px;
      line-height: 42px;
      text-align: center;
    }

    a {
      color: #333;
      text-decoration: none;
      display: inline-block;
      height: 42px;
    }

    a:hover {
      color: white;
    }

    .cloud {
      position: absolute;
      left: 0;
      top: 0;
      width: 83px;
      height: 42px;
      background: url(img/nav/cloud.gif) no-repeat;
    }
  </style>
  <script src="animation.js"></script>
</head>
<body>
  <div class="nav">
    <span class="cloud"></span>
    <ul>
      <li><a href="#">首页新闻</a></li>
      <li><a href="#">师资力量</a></li>
      <li><a href="#">活动策划</a></li>
      <li><a href="#">企业文化</a></li>
      <li><a href="#">招聘信息</a></li>
      <li><a href="#">公司简介</a></li>
      <li><a href="#">我是佩奇</a></li>
      <li><a href="#">啥是佩奇</a></li>
    </ul>
  </div>
  <script>
    window.addEventListener('load', function () {
      var nav = document.querySelector('.nav')
      var cloud = document.querySelector('.cloud')
      var aLis = nav.querySelectorAll('li')

      var current = 0;
      for (var i = 0; i < aLis.length; i++) {
        // 鼠标enter
        aLis[i].addEventListener('mouseenter', function () {
          animate(cloud, this.offsetLeft)
        })
        // 鼠标leave,回到上次的current位置
        aLis[i].addEventListener('mouseleave', function () {
          animate(cloud, current)
        })
        // 鼠标点击,修改current位置
        aLis[i].addEventListener('click', function () {
          current = this.offsetLeft
        })
      }
    })
  </script>
</body>
</html>

移动端元素拖动

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>移动端元素拖动</title>
  <style>
    div {
      left: 0;
      position: absolute;
      width: 100px;
      height: 100px;
      background: pink;
    }
  </style>
</head>
<body>
  <div></div>
  <script>
    // 获取操作元素
    var div = document.querySelector('div')
    // 手指的初始坐标
    var startX = 0;
    var startY = 0;
    // 获取盒子原来位置
    var x = 0;
    var y = 0;
    div.addEventListener('touchstart', function (e) {
      // 获取手指初始坐标
      startX = e.targetTouches[0].pageX
      startY = e.targetTouches[0].pageY
      //获取盒子初始位置
      x = this.offsetLeft
      y = this.offsetTop
    })
    div.addEventListener('touchmove', function (e) {
      //计算手指移动的距离 = 移动后手指坐标 - 初始手指坐标
      var moveX = e.targetTouches[0].pageX - startX
      var moveY = e.targetTouches[0].pageY - startY
      // 移动盒子 = 盒子原来的位置 + 手指移动的距离
      this.style.left = x + moveX + 'px'
      this.style.top = y + moveY + 'px'
      // 阻止屏幕滚动的默认行为
      e.preventDefault();
    })
  </script>
</body>
</html>

返回页面顶部

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>返回顶部</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .slider {
      display: none;
      position: fixed;
      width: 50px;
      height: 50px;
      line-height: 50px;
      border-radius: 50%;
      border: 1px solid pink;
      background-color: hotpink;
      color: #fff;
      text-align: center;
      top: 500px;
      left: 1200px;
    }

    .nav {
      width: 80%;
      height: 500px;
      background-color: plum;
    }

    .content {
      width: 80%;
      height: 9999px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="slider">
    <span>Up</span>
  </div>
  <div class="nav"></div>
  <div class="content"></div>
  <script>
    // 获取元素
    var slider = document.querySelector('.slider')
    var content = document.querySelector('.content')
    // 页面滚动事件
    window.addEventListener('scroll', function () {
      if (window.pageYOffset >= content.offsetTop) {
        slider.style.display = 'block'
      } else {
        slider.style.display = 'none'
      }
    })
    // 点击按钮返回顶部事件
    slider.addEventListener('click', function () {
      window.scroll(0, 0)
    })
  </script>
</body>
</html>

window.scrollTo()返回顶部操作

<!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>window.scrollTo()</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .container {
      position: relative;
      width: 100%;
      height: 2000px;
    }

    .toTop {
      position: absolute;
      width: 50px;
      height: 50px;
      background: pink;
      border-radius: 50%;
      right: 30px;
      bottom: 50px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="toTop"></div>
  </div>

  <script>
    var oTop = document.querySelector('.toTop')

    window.onscroll = function () {
      if (scroll().top > 1200) {
        oTop.style.display = 'block'
      } else {
        oTop.style.display = 'none'
      }

      head = scroll().top
    }

    // 声明变量
    var target = 0
    var head = 0
    var timer = null

    oTop.onclick = function () {
      clearInterval(timer)
      timer = setInterval(() => {
        var step = (target - head) / 10
        step = step > 0 ? Math.ceil(step) : Math.floor(step)
        head = head + step
        window.scrollTo(0, head)
        if (head === 0) {
          clearInterval(timer)
        }
      }, 50);
    }

    // 封装一个scroll函数
    function scroll() {
      return {
        top: window.pageYOffset || document.body.offsetTop || document.documentElement.offsetTop,
        left: window.pageXOffset || document.body.offsetLeft || document.documentElement.offsetLeft,
      }
    }
  </script>
</body>

</html>

client系列根视口宽度变化做响应式

<!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;
    }
  </style>
</head>

<body>
  <script>
    oBody = document.body

	// 获取显示器的分辨率
    // window.onresize = function () {
    //   document.title = window.screen.width + "    " + window.screen.height;
    // }

    // 检测页面大小发生变化
    window.onresize = fn
    fn()

    function fn() {
      if (brower().width > 900) {
        oBody.style.backgroundColor = 'red'
      } else if (brower().width > 500) {
        oBody.style.backgroundColor = 'yellow'
      } else {
        oBody.style.backgroundColor = 'blue'
      }
    }

    // 获取浏览器的宽高 函数
    function brower() {
      return {
        width: window.innerWidth || document.body.clientWidth || document.documentElement.clientWidth,
        height: window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight,
      }
    }
  </script>
</body>

</html>

swiper插件实现轮播图

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>swiper</title>
  <!-- 1.引用js和css文件 -->
  <link rel="stylesheet" href="css/swiper-bundle.min.css">
  <script src="js/swiper-bundle.min.js"></script>
  <!-- 2.复制style样式 -->
  <style>
    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper-container {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
  </style>
</head>
<body>
  <!-- 3.复制并修改轮播实现的代码 -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="img/swiper/nature-1.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="img/swiper/nature-2.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="img/swiper/nature-3.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="img/swiper/nature-4.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="img/swiper/nature-5.jpg" alt="">
      </div>
    </div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
  <!-- 复制js的实现,并添加onload事件 -->
  <script>
    window.addEventListener('load', function () {
      var swiper = new Swiper('.swiper-container', {
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        }
      })
    })
  </script>
</body>
</html>

zy.media.js视频插件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>video</title>
  <!-- 1.导入js和css文件 -->
  <link rel="stylesheet" href="css/zy.media.min.css">
  <script src="js/zy.media.min.js"></script>
  <!-- 2.复制style样式 -->
  <style type="text/css">
    #modelView {
      background-color: #DDDDDD;
      z-index: 0;
      opacity: 0.7;
      height: 100%;
      width: 100%;
      position: relative;
    }

    .playvideo {
      padding-top: auto;
      z-index: 9999;
      position: relative;
      width: 300px;
      height: 200px;
    }

    .zy_media {
      z-index: 999999999
    }
  </style>
</head>
<body>
  <!-- 3.页面布局 -->
  <div class="playvideo">
    <div class="zy_media">
      <video data-config='{"mediaTitle": "demo"}'>
        <source src="video/mov.mp4" type="video/mp4">
        您的浏览器不支持HTML5视频
      </video>
    </div>
  </div>
  <!-- js特效 -->
  <script>
    window.addEventListener('load', function () {
      zymedia('video', {
        autoplay: true
      });
    })
  </script>
</body>
</html>

sessionStorage

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>本地存储</title>
</head>
<body>
  <input type="text">
  <button class="save">save</button>
  <button class="fetch">fetch</button>
  <button class="del">delete</button>
  <button class="empty">empty</button>
  <script>
    var iput = document.querySelector('input')
    // 存储数据
    var save = document.querySelector('.save')
    save.addEventListener('click', function () {
      var value = iput.value
      sessionStorage.setItem('username', value)
    })
    // 获取数据
    var fetch = document.querySelector('.fetch')
    fetch.addEventListener('click', function () {
      console.log(sessionStorage.getItem('username'))
    })
    // 删除数据
    var del = document.querySelector('.del')
    del.addEventListener('click', function () {
      sessionStorage.removeItem('username')
    })
    // 清空所有的数据
    var empty = document.querySelector('.empty')
    empty.addEventListener('click', function () {
      sessionStorage.clear()
    })
  </script>
</body>
</html>

localStorage

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>本地存储</title>
</head>
<body>
  <input type="text">
  <button class="save">save</button>
  <button class="fetch">fetch</button>
  <button class="del">delete</button>
  <button class="empty">empty</button>
  <script>
    var iput = document.querySelector('input')
    // 存储数据
    var save = document.querySelector('.save')
    save.addEventListener('click', function () {
      var value = iput.value
      localStorage.setItem('username', value)
    })
    // 获取数据
    var fetch = document.querySelector('.fetch')
    fetch.addEventListener('click', function () {
      console.log(localStorage.getItem('username'))
    })
    // 删除数据
    var del = document.querySelector('.del')
    del.addEventListener('click', function () {
      localStorage.removeItem('username')
    })
    // 清空所有的数据
    var empty = document.querySelector('.empty')
    empty.addEventListener('click', function () {
      localStorage.clear()
    })
  </script>
</body>
</html>

remember user

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
  <input type="text" id="username">
  <input type="checkbox" id="remember">记住用户名
  <script>
    var user = document.querySelector('#username')
    var remember = document.querySelector('#remember')
    if (localStorage.getItem('username')) {
      username.value = localStorage.getItem('username')
      remember.checked = true
    }
    remember.addEventListener('change', function () {
      if (this.checked) {
        localStorage.setItem('username', username.value)
      } else {
        localStorage.removeItem('username')
      }
    })
  </script>
</body>
</html>