前端三大件速成 06 小练习：模态对话框、正反选、二级联动

文章目录

• 一、小练习：模态对话框
• 二、小练习：正反选
• 三、二级联动

  一、小练习：模态对话框

  
  
      
      Title
      
          .content{
              height: 1800px;
              background-color: white;
          }
          .shade{
              position: fixed;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              background-color: gray;
              opacity: 0.7;
          }
          .model{
              width: 200px;
              height: 200px;
              background-color: bisque;
              position: absolute;
              top: 50%;
              left: 50%;
              margin-top: -100px;
              margin-left: -100px;
          }
          .hide{
              display: none;
          }
      
  
  
  
      show
  
      hello world hello world 
  
      hello world hello world 
  
      hello world hello world 
  
      hello world hello world 
  
  
  
      cancel
  
  
      function show(){
          var ele_shade=document.getElementsByClassName("shade")[0];
          var ele_model=document.getElementsByClassName("model")[0];
          ele_model.classList.remove("hide");
          ele_shade.classList.remove("hide");
      }
      function cancel(){
          var ele_shade=document.getElementsByClassName("shade")[0];
          var ele_model=document.getElementsByClassName("model")[0];
          ele_shade.classList.add("hide")
          ele_model.classList.add("hide")
      }
  
  
  
  

  二、小练习：正反选

  
  
      
      Title
  
  
  全选
  取消
  反选
  

  	111	111	111
  	222	222	222
  	333	333	333

  function selectAll(){ var inputs = document.getElementsByTagName("input"); for (var i=0;i var input=inputs[i]; input.checked=true; } } function cancel(){ var inputs = document.getElementsByTagName("input"); for (var i=0;i var input=inputs[i]; input.checked=false; } } function reverse(){ var inputs = document.getElementsByTagName("input"); var input; for (var i=0;i input = inputs[i]; input.checked = !input.checked; } } "河北省":["石家庄","廊坊"],"山西":["晋城","大同"],"陕西":["西安","延安"]}; var pro_ele=document.getElementById("provinces"); var city_ele=document.getElementById("citys"); // 添加省名 for (var i in data){ var ele=document.createElement("option"); ele.innerHTML=i; pro_ele.appendChild(ele); } pro_ele.onchange=function (){ console.log(this.selectedIndex); console.log(this.options[this.selectedIndex]) var citys=data[this.options[this.selectedIndex].innerHTML]; //补充知识：data["河北省"]与data.河北省等同 city_ele.options.length=1; for(var i=0;i var ele=document.createElement("option"); ele.innerHTML=citys[i]; city_ele.appendChild(ele); } }