一、画廊效果

image.png

  1. <style>
  2.         *{margin: 0;padding: 0}
  3.         .small-icons img{
  4.             width: 116px;
  5.         }
  6.         .current{
  7.             border: 2px solid pink;
  8.         }
  9.     </style>
  10. </head>
  11. <body>
  12.     <div class="small-icons">
  13.         <img src="images/01.png" alt="" class="current">
  14.         <img src="images/02.png" alt="">
  15.         <img src="images/03.png" alt="">
  16.         <img src="images/04.png" alt="">
  17.         <img src="images/05.png" alt="">
  18.     </div>
  19.     <div class="content">
  20.         <img src="images/01.png" alt="" class="current">
  21.     </div>
  22.     <script>
  23.         var icons = document.querySelectorAll(".small-icons>img");
  24.         var show = document.querySelectorAll(".content>img")[0];
  25.         for(let i=0;i<icons.length;i++){
  26.             icons[i].index = i;
  27.             icons[i].onclick = function(){
  28.                 for(let i=0;i<icons.length;i++){
  29.                     icons[i].classList.remove("current")
  30.                 }
  31.                 this.classList.add("current")
  32.                 var index =this.index;
  33.                 show.src = `images/0${index+1}.png`
  34.             }
  35.         }
  36.     </script>

1-1、jquer-画廊效果

  • siblings() —>获取兄弟元素
  • index() —>获取元素的下标值
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  <style>
          *{margin: 0;padding: 0}
          .small-icons img{
              width: 116px;
          }
          .current{
              border: 2px solid pink;
          }
      </style>
</head>
<body>
      <div class="small-icons">
              <img src="images/01.png" alt="" class="current">
              <img src="images/02.png" alt="">
              <img src="images/03.png" alt="">
              <img src="images/04.png" alt="">
              <img src="images/05.png" alt="">
          </div>
          <div class="content">
              <img src="images/01.png" alt="" class="current">
      </div>
      <script>
          $(".small-icons img").click(function(){
              $(this).addClass("current").siblings().removeClass("current")
              var index=$(this).index();
              $(".content>img").attr("src",`images/0${index+1}.png`)
          })
      </script>
</body>
</html>

    二、协议按钮禁用

    image.png image.png
 <textarea cols="30" rows="10">
        明月清风晓星尘
        傲雪凌霜宋子琛
    </textarea><br>
    <input id="btn" type="button" value="请仔细阅读(5)" disabled>
    <script>
        var btn = document.getElementById("btn");
        var time = 5;
        var timer = setInterval(function(){
            time--;
            if(time<=0){
                btn.value = "同意"
                btn.disabled = false;
            }else{
                btn.value = `请仔细阅读(${time})`
            }

        },1000)
    </script>

三、图片随鼠标移动

  • 鼠标距离X轴的距离

     event.pageX<br />       event.clientX

    *{margin: 0;padding: 0}
      img{
          width: 300px;
          position: absolute;
          margin: 100px;
          border: 1px solid #333;
      }
  </style>
</head>
<body>
  <img src="images/01.png" alt="">
  <script>
      var img = document.getElementsByTagName("img")[0]
      document.onmousemove = function(event){
          var pageX = event.clientX;
          var pageY = event.clientY;
          img.style.cssText = `left:${pageX}px;top:${pageY}px`
      }
  </script>

    四、拖动

  • onmousedown 鼠标按下

  • onmouseup 鼠标松开

    <style>
      #move{
          width: 200px;
          height: 50px;
          background: pink;
          position: absolute;
          left: 40%;
          top: 40%;
          cursor: pointer;
      }
  </style>
</head>
<body>
  <div id="move">

  </div>
  <script>
      var move = document.getElementById("move");
      move.onmousedown = function(event){
          var clientX = event.clientX;
          var offsetX = this.offsetLeft;
          var spaceX = clientX - offsetX;
          var spaceY = event.clientY - this.offsetTop;
          document.onmousemove = function(event){
              let pageX = event.clientX;
              var left = pageX-spaceX;
              var top = event.clientY-spaceY;
              move.style.cssText=`left:${left}px;top:${top}px`
          }
      }
      move.onmouseup = function(){
          document.onmousemove = null
      }
  </script>

    五、拖动-事件监听

    onmousever
    onmouseout
    onmousedown 鼠标按下
    onmouseup 鼠标松开
    addEventListener bind
    removeEventListener unbind

    <style>
          #move{
              width: 200px;
              height: 50px;
              background: pink;
              position: absolute;
              left: 40%;
              top: 40%;
              cursor: pointer;
          }
      </style>
  </head>
  <body>
      <div id="move">

      </div>
      <script>
           $("#move").mousedown(function(event){
          var spaceX = event.clientX - $(this).offset().left;
          var spaceY = event.clientY - $(this).offset().top;
          $(document).bind('mousemove',function(event){
              var left= event.clientX - spaceX;
              var top = event.clientY - spaceY;
              $("#move").css({left,top})
          })
      })
      $("#move").mouseup(function(){
          $(document).unbind("mousemove")
      })
      </script>

    六、搜索

    image.png

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="keyword">
        <button @click="handleAdd">添加</button>
        <h4>历史记录</h4>
        <button v-for="item of historyWords">{{item}}</button>
    </div>
    <script>
        new Vue({
            el:"#app",
            data(){
              return {
                  msg:"hello world",
                  keyword:"",
                  historyWords:["王妃","你的名字"]
              }  
            },
            methods:{
                handleAdd(){
                    if(!this.historyWords.includes(this.keyword)){
                        this.historyWords.unshift(this.keyword)
                    }
                }
            }
        })
    </script>