1-1 点击删除

  1. <body>
  2.     <ul>html <button>删除</button></ul>
  3.     <ul>css <button>删除</button></ul>
  4.     <ul>JavaScript <button>删除</button></ul>
  5.     <script>
  6.         var btns = document.getElementsByTagName("button");
  7.         for (var i=0;i<btns.length;i++){
  8.             btns[i].onclick = function(){
  9.                 var isShow = confirm("是否删除");
  10.                 console.log(isShow);
  11.                 if(isShow){
  12.                     this.parentNode.style.display="none"
  13.                 }
  16.             }
  17.         }
  19.     </script>

1-2 如何判断滚动条是否到达底部

  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         *{
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  14.         body{
  15.             height: 2000px;
  16.         }
  17.         div{
  18.             height: 300px;
  19.             width: 300px;
  20.             background-color: bisque;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <div></div>
  26.     <script>
  27.         var bodyH = document.body.clientHeight;  //内容区域的高度
  28.         var vh = document.documentElement.clientHeight;//可视区域的高度
  29.         console.log(bodyH);
  30.         console.log(vh)
  31.         window.onscroll = function(){
  32.             var scrollTop = window.scrollY;//滚动条的高度
  33.             console.log(scrollTop)
  34.         }
  35.         // scrollTop+vh ==bodyH   ----判断页面滚动条到底
  36.     </script>
  37. </body>
  38. </html>