第八节课

表单-启用&禁用文本框

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>禁用&启用文本框</title>
  8. </head>
  9. <body>
  10.     <input type="text" value="admin" placeholder="输入账号">
  11.     <input type="password" value="123123">
  12.     <button>禁用</button>
  13.     <button>启用</button>
  15.     <script>
  16.         let btnList = document.getElementsByTagName('button')
  17.         let input = document.getElementsByTagName('input')[0]
  18.         let btn1 = btnList[0]
  19.         let btn2 = btnList[1]
  20.         btn1.onclick = function() {
  21.             input.disabled = true
  22.         }
  23.         btn2.onclick = function() {
  24.             input.disabled = false
  25.         }
  26.     </script>  
  27. </body>
  28. </html>

第八节课 - 图1

表单-文本框获得失去焦距

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>文本框获得失去焦距</title>
  8.     <style>
  9.         lable {
  10.             display: block;
  11.         }
  12.         .show {
  13.             display: block;
  14.         }
  15.         .hide {
  16.             display: none;
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21.    <!-- <label for="input1">
  22.         京东:    <input type="text" id="input1" value="相机">
  23.     </label>-->
  24.     <label for="input2">
  25.         淘宝:
  26.     </label>
  27.     <input type="text" id="input2" value="电脑">
  28.     <!--placehoolder:
  29.     <input type="text" placeholder="placeholder">-->
  31.     <script>
  32.         let input1 = document.getElementById('input1')
  33.         let input2 = document.getElementById('input2')
  34.         let lab = document.getElementsByTagName('label')[0]
  35.         input2.oninput = function () {
  36.             if(this.value === '') {
  37.                 lab.className = 'show'
  38.             }else{
  39.                 lab.className = 'hide'
  40.             }
  41.         }
  42.         input1.onfocus = function() {
  43.             this.value = ''
  44.             this.style.color = '#f00'
  45.         }
  46.         input1.onblur = function() {
  47.             this.value = '相机'
  48.             this.style.color = '#000'
  49.         }
  50.     </script>
  51. </body>
  52. </html>

第八节课 - 图2第八节课 - 图3

表单-注册高亮显示

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>表单注册高亮显示</title>
  8.     <style>
  9.         .right {
  10.             border: 2px solid rgb(50, 158, 50);
  11.         }
  12.         .wrong {
  13.             border: 2px solid rgb(211, 49, 49);
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.     账号:<input type="text" onblur="fn(this)">
  19.     密码:<input type="password" onblur="fn(this)">
  20.     <script>
  21.         function fn(a) {
  22.         if(a.value.length <12 && a.value.length>8){
  23.            a.className = 'right'
  24.         } else {
  25.             a.className = 'wrong'
  26.         }
  27.     }
  28.     </script>
  29. </body>
  30. </html>

第八节课 - 图4第八节课 - 图5

表单-全选和反选

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>全选和反选</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.         .my-table {
  14.             width: 500px;
  15.             margin: 100px auto;
  16.         }
  18.         table {
  19.             border-collapse: collapse;
  20.             border-spacing: 0;
  21.             border: 1px solid #ccc;
  22.             width: 500px;
  23.         }
  24.         th,
  25.         td {
  26.             border: 1px solid #ccc;
  27.             color: rgb(90, 90, 167);
  28.             padding: 10px;
  29.         }
  30.         th {
  31.             font:bold 16px "微软雅黑";
  32.             background-color:#09c;
  33.             color: #fff;
  34.         }
  35.         td {
  36.             font:bold 14px "微软雅黑"; 
  37.         }
  38.         tbody tr {
  39.             background-color: #f6f6f6;
  40.         }
  41.         tbody tr:hover {
  42.             cursor: pointer;
  43.             background-color: #09c;
  44.         }
  45.     </style>
  46. </head>
  47. <body>
  48.     <div class="my-table">
  49.         <table>
  50.             <thead>
  51.                 <tr>
  52.                     <th>
  53.                         <input type="checkbox" id="all">
  54.                     </th>
  55.                     <th>菜名</th>
  56.                     <th>饭店</th>
  57.                 </tr>
  58.             </thead>
  59.             <tbody id ="content">
  60.             <tr>
  61.                 <td>
  62.                     <input type="checkbox">
  63.                 </td>
  64.                 <td>菜品1</td>
  65.                 <td>面包店</td>
  66.             </tr>
  67.             <tr>
  68.                 <td>
  69.                     <input type="checkbox">
  70.                 </td>
  71.                 <td>菜品2</td>
  72.                 <td>烧烤店</td>
  73.             </tr>
  74.             <tr>
  75.                 <td>
  76.                     <input type="checkbox">
  77.                 </td>
  78.                 <td>菜品3</td>
  79.                 <td>奶茶店</td>
  80.             </tr>
  81.             <tr>
  82.                 <td>
  83.                     <input type="checkbox">
  84.                 </td>
  85.                 <td>菜品4</td>
  86.                 <td>火锅店</td>
  87.             </tr>
  88.         </tbody>
  89.         </table>
  90.     </div>
  91.     <script>
  92.         window.onload=function() {
  93.             let allBtn = document.getElementById('all')
  94.             let tBody = document.getElementById('content')
  95.             let inputList = tBody.getElementsByTagName('input')
  96.             allBtn.onclick = function() {
  97.                 for(let index = 0;index < inputList.length;index++) {
  98.                     inputList[index].checked = this.checked
  99.                 }
  100.             }
  101.             for(let index = 0;index < inputList.length;index++) {
  102.                 inputList[index].onclick = function() {
  103.                     let flag = true
  104.                     for(let i = 0;i < inputList.length;i++) {
  105.                         if (inputList[i].checked === false) {
  106.                             flag = false
  107.                         }
  108.                     }
  109.                     allBtn.checked = flag
  110.                 }
  111.             }
  113.         }
  114.     </script>
  116. </body>
  117. </html>

第八节课 - 图6第八节课 - 图7

表单-Tab切换（排他性）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Tab切换（排他性）</title>
  8.     <style>
  9.         button {
  10.             margin: 10px;
  11.             width: 100px;
  12.             height: 40px;
  13.             cursor: pointer;
  14.         }
  15.         .current {
  16.             background-color: #f00;
  17.         }
  18.     </style>>
  19. </head>
  20. <body>
  21.     <button>按钮1</button>
  22.     <button>按钮2</button>
  23.     <button>按钮3</button>
  24.     <button>按钮4</button>
  25.     <button>按钮5</button>
  27.     <script>
  28.         let btnList = document.getElementsByTagName('button')
  29.         for(let i = 0;i < btnList.length;i++) {
  30.             btnList[i].onmouseover = function() {
  31.                 for(let j = 0;j < btnList.length;j++) {
  32.                     btnList[j].className=''
  33.                 } 
  34.                 this.className='current'
  35.             }
  36.         }
  37.         for(let i = 0;i < btnList.length;i++) {
  38.             btnList[i].onmouseout = function() {
  39.                 this.className=''
  40.             }
  41.         }
  42.     </script>    
  43. </body>
  44. </html>

第八节课 - 图8

二维码悬浮

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>二维码悬浮</title>
  8. </head>
  9. <body>
  12. <!--下面这个ID是img的element是略缩图，鼠标悬停在它上面即出现原图--> 
  13. <!--onmouseover方法中调用了mouseOverPic函数，传给它的参数是原图的URL--> 
  14. <!--调用mouseOverPic之后，将原图显示区域设为可见--> 
  15. <img id="img" src="me.jpg" width="50px" height="50px" onmouseover="mouseOverPic('me.jpg'); bigPic.style.visibility='visible'" onmouseout="mouseOutPic()"> 
  16. <!--页面初始化的时候，原图显示区域是隐藏的--> 
  17. <div id="bigPic" style="visibility:hidden;"> 
  18. </div> 
  21.     <script language=JavaScript> 
  22.         function mouseOutPic()    //当鼠标移出时，隐藏原图 
  23.         { 
  24.         if(window.event.toElement.id!="img") bigPic.style.visibility = "hidden"; 
  25.         //如果鼠标不在img000上的话，将这个区域隐藏 
  26.         } 
  27.         function mouseOverPic(imgSrc)    //当鼠标移上小图时，显示原图 
  28.         { 
  29.         var seeBig = document.getElementById("bigPic");    //得到将要显示原图区域的div element 
  30.         var newImg = document.createElement("img");    //新建一个img element，将原图的src赋给这个element 
  31.         newImg = "<img src=\'" + imgSrc + "\'/>";    //注意这里，是为整个element赋值，我在这个小问题上还花了挺多时间 
  32.         //alert(imgSrc); 
  33.         seeBig.innerHTML = newImg;    //将原图赋给要显示的区域 
  34.         } 
  35.         </script> 
  36. </body>
  37. </html>

第八节课 - 图9

图片遮罩层

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>图片画廊</title>
  8.     <style>
  9.         ul {
  10.             padding: 0;
  11.         }
  12.         li {
  13.             float: left;
  14.             padding: 1em;
  15.             list-style: none;
  16.         }
  18.         li a img {
  19.             border: 0;
  20.         }
  21.         .clear {
  22.             clear: both;
  23.         }
  24.         #image-gallery {
  25.             width: 500px;
  26.             overflow: auto;
  27.             display: flex;
  28.             background-color: silver;
  29.         }
  30.         #mask {
  31.             position: absolute;
  32.             top: 0;
  33.             bottom: 0;
  34.             left: 0;
  35.             right: 0;
  36.             background-color: rgba(0, 0, 0, 0.5);
  37.             display: none;
  38.         }
  39.         .preview {
  40.             width: 800px;
  41.             height: 500px;
  42.             position: absolute;
  43.             top: 50%;
  44.             left: 50%;
  45.             margin-left: -400px;
  46.             margin-top: -250px;
  47.         }
  48.         #image-gallery {
  49.             widows: 500px;
  50.             overflow: auto;
  51.             display: flex;
  52.             background-color: #b292ac;
  53.         }
  54.         #mask {
  55.             position: absolute;
  56.             top: 0;
  57.             bottom: 0;
  58.             left: 0;
  59.             right: 0;
  60.             background-color: rgba(0, 0, 0, 0.6);
  61.             display: none;
  62.         }
  63.     </style>
  64. </head>
  65. <body>
  66.     <h2>图片画廊</h2>
  67.     <ul id = "image-gallery">
  68.         <li>
  69.             <a href="img/1.jpg" title="图片1">
  70.                 <img src="1.jpg" alt="图片1" width="100">
  71.             </a>
  72.         </li>
  73.         <li>
  74.             <a href="img/2.jpg" title="图片2">
  75.                 <img src="2.jpg" alt="图片2" width="100">
  76.             </a>
  77.         </li>
  78.         <li>
  79.             <a href="img/3.jpg" title="图片3">
  80.                 <img src="3.jpg" alt="图片3" width="100">
  81.             </a>
  82.         </li>
  83.         <li>
  84.             <a href="img/4.jpg" title="图片4">
  85.                 <img src="4.jpg" alt="图片4" width="100">
  86.             </a>
  87.         </li>
  88.         <li>
  89.             <a href="img/5.jpg" title="图片5">
  90.                 <img src="5.jpg" alt="图片5" width="100">
  91.             </a>
  92.         </li>
  93.     </ul>
  94.     <div class="clear"></div>
  95.     <!--<img id = "image" src="150.png" />-->
  96.     <p id="des">选择一个图片</p>
  97.     <div id="mask">
  98.         <img id="image" class="preview" />
  99.     </div>
  100.     <script>
  101.         let ul = document.getElementById('image-gallery')
  102.         let arr = ul.getElementsByTagName('a')
  103.         let img = document.getElementById('image')
  104.         let des = document.getElementById('des')
  105.         let mask = document.getElementById('mask')
  106.         for (let index = 0;index < arr.length;index++) {
  107.             const element = arr[index];
  108.             element.onclick = function() {
  109.                 ul.style.zIndex = -999
  110.                 mask.style.display = 'block'
  111.                 img.src = this.href
  112.                 return false
  113.             }
  114.             img.onclick = function() {
  115.                 mask.style.display='none'
  116.                 ul.style.zIndex = 999
  117.             }
  118.         }
  119.     </script>
  121. </body>
  122. </html>

第八节课 - 图10第八节课 - 图11