JS小练习之实现简易日历

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>简易日历</title>
    <style>
    .wrapper{
      width: 250px;
      height: 400px;
      background: #efefef;
      border: 1px solid rgb(240, 240, 240);
      margin: 0 auto;
      margin-top: 150px;
    }
    .td1{
      float: left;
      width: 50px;
      height: 50px;
      border: 1px solid black;
      text-align: center;
      margin-left: 20px;
      color: white;
      background: rgba(76, 76, 76, 0.9);
    }
    .active{
      float: left;
      width: 50px;
      height: 50px;
      border: 1px solid black;
      text-align: center;
      margin-left: 20px;
      background: white;
      color:#ffbdfc;
    }
    .div1{
      padding-top: 8px;
    }
    .row1{
      margin: 0 auto;
      width: 250px;
      height: 52px;
      margin-top: 20px;
      margin-left: 5px;
    }
    .txt{
      width: 192px;
      height: 90px;
      border: 1px solid #f3f3f3;
      margin: 0 auto;
      margin-top: 10px;
      background: rgb(247, 247, 247);
    }
    </style>
    <script type="text/javascript">
    window.onload=function(){
      var oDiv=document.getElementsByTagName('div');
      var oTxt=document.getElementById('text');
      var j=0;
      var arr=[
        '快过年啦，放假啦，一月',
        '在家里过寒假啊 二月',
        '三月',
        '四月',
        '五月',
        '六月',
        '七月',
        '八月',
        '九月',
        '十月',
        '十一月',
        '十二月'
      ]
      var oDiv1=new Array();   //定义一个数组
      oDiv1[0]=oDiv[2];oDiv1[1]=oDiv[5];
      oDiv1[2]=oDiv[8];oDiv1[3]=oDiv[12];
      oDiv1[4]=oDiv[15];oDiv1[5]=oDiv[18];
      oDiv1[6]=oDiv[22];oDiv1[7]=oDiv[25];
      oDiv1[8]=oDiv[28];oDiv1[9]=oDiv[32];
      oDiv1[10]=oDiv[35];oDiv1[11]=oDiv[38];

      for(var i=0;i<oDiv1.length;i++){
        oDiv1[i].index=i;
        oDiv1[i].onmouseover=function(){
          for(var i=0;i<oDiv1.length;i++){
            oDiv1[i].style.color='white';
            oDiv1[i].style.background='rgba(76, 76, 76, 0.9)';
          }
          this.style.color='#ffbdfc';
          this.style.background='white';
          oTxt.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>';
        };
      }
      };
    </script>
  </head>
  <body>
    <div class="wrapper">
      <div class="row1">
        <div  class="td1">
          <div class="div1">1</div>
          <div>JAN</div>
        </div>
        <div class="td1">
          <div class="div1">2</div>
          <div>FER</div>
        </div>
        <div class="td1">
          <div class="div1">3</div>
          <div>MAR</div>
        </div>
      </div>

      <div class="row1">
        <div class="td1">
          <div class="div1">4</div>
          <div>APR</div>
        </div>
        <div class="td1">
          <div class="div1">5</div>
          <div>MAY</div>
        </div>
        <div class="td1">
          <div class="div1">6</div>
          <div>JUN</div>
        </div>
      </div>

      <div class="row1">
        <div class="td1">
          <div class="div1">7</div>
          <div>JUL</div>
        </div>
        <div class="td1">
          <div class="div1">8</div>
          <div>AUG</div>
        </div>
        <div class="td1">
          <div class="div1">9</div>
          <div>SEP</div>
        </div>
      </div>

      <div class="row1">
        <div class="td1">
          <div class="div1">10</div>
          <div>OCT</div>
        </div>
        <div class="td1">
          <div class="div1">11</div>
          <div>NOV</div>
        </div>
        <div class="td1">
          <div class="div1">12</div>
          <div>DEC</div>
        </div>
      </div>
      <div class="txt" id="text"></div>
    </div>


  </body>
   <script type="text/javascript">

   </script>
</html>

效果图：

心得体会：布局很重要！一开始的时候用表格来做，做了好久都得到满意的效果，结果一怒之下，果断抛弃table，全部用div布局，果然一下子就出了效果，心里还在沾沾自喜，觉得div可以做到一切；但是，没想到的是，这个项目主要要用到js 的document.getElementsByTagName()这个方法，面对满屏的div我有点傻眼，为什么只能通过标签来得到元素呢，为什么不能通过类名来得到元素呢？！唉，不开心，想用 JQuery.

JS小练习之实现简易日历

猜你喜欢