练习题:选择器和选择好友

    xiaoxiao2021-03-25  117

    一、年月日选择器

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 < select  id="nian" onclick="biantian()"></ select >年 < select  id="yue" onclick="biantian()"></ select >月 < select  id="tian"></ select >日   < script  type="text/javascript"> FillNian(); FillYue(); FillTian(); function FillNian() {      var b = new Date();      var nian = parseInt(b.getFullYear());            var str = "";            for(var i=nian-5;i< nian +6;i++)      {          str = str+"<option value='"+i+"'>"+i+"</ option >";      }            document.getElementById("nian").innerHTML = str;       }   //月数 function FillYue() {      var str = "";      for(var i=1;i< 13 ;i++)      {          str = str+"<option value='"+i+"'>"+i+"</ option >";      }      document.getElementById("yue").innerHTML = str; }   //每月天数的变化 function FillTian() {      var yue = document.getElementById("yue").value;      var nian = document.getElementById("nian").value;      var ts = 31;            //30号的月数      if(yue==4 || yue==6 || yue==9 || yue==11)      {          ts=30;      }            //2月不同年的天      if(yue==2)      {          if((nian%4==0 && nian0 != 0) || nian@0==0)          {              ts = 29;          }          else          {              ts = 28;          }      }            var str = "";      for(var i=1;i< ts +1;i++)      {          str = str+"<option value='"+i+"'>"+i+"</ option >";      }      document.getElementById("tian").innerHTML = str; }     function biantian() {      FillTian(); } </ script > </ body >

     

    二、选择好友

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 样式: < style  type="text/css"> *{ margin:0px auto; padding:0px} #wai{ width:150px; height:300px;} .list{ width:150px; height:40px; background-color:#66F; text-align:center; line-height:40px; vertical-align:middle; color:white; border:1px solid white;} .list:hover{ cursor:pointer; background-color:#00C} </ style >   < body >< br > < div  id="wai">      < div  class="list" onclick="xuan(this)" onmouseover="bian(this)" onmouseout="huifu()">淄博</ div >      < div  class="list" onclick="xuan(this)" onmouseover="bian(this)" onmouseout="huifu()">张店</ div >      < div  class="list" onclick="xuan(this)" onmouseover="bian(this)" onmouseout="huifu()">桓台</ div > </ div >   </ body >   < script  type="text/javascript">   function xuan(d) {      //清原来的颜色      var list = document.getElementsByClassName("list");      for(var i=0;i< list.length ;i++)      {          list[i].removeAttribute("bs");          list[i].style.backgroundColor = "#66F";      }      //选      d.setAttribute("bs",1);      d.style.backgroundColor = "#00C"; }   function bian(d) {      //清      var list = document.getElementsByClassName("list");      for(var i=0;i<list.length;i++)      {          if(list[i].getAttribute("bs")!="1")          {              list[i].style.backgroundColor = "#66F";          }      }      //选      d.style.backgroundColor = "#00C"; }   function huifu() {      var list = document.getElementsByClassName("list");      for(var i=0;i<list.length;i++)      {          if(list[i].getAttribute("bs")!="1")          {              list[i].style.backgroundColor = "#66F";          }      } }   </script>
    转载请注明原文地址: https://ju.6miu.com/read-16725.html

    最新回复(0)