js 简易日历的制作（innerHTML）

最新推荐文章于 2022-11-22 03:43:31 发布

山高路长啊

最新推荐文章于 2022-11-22 03:43:31 发布

阅读量610

点赞数

本文链接：https://blog.csdn.net/liuzong_dage/article/details/83749007

版权

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title></title>
      <style type="text/css">

         #tab{text-align: center;  //文字居中
            
         }
         .text{
            border: solid 1px black;
            width: 300px;
            height: 100px;
         }

        #oul{width: 300px;height: 500px;
               border:solid 1px black;
               background: grey;
            list-style: none;   //去掉li前面的点
            margin-left: 40%;
            padding: 0;
            display: flex;  //弹性盒子
            flex-direction: row; //横向填充
            flex-wrap: wrap;
            
         }
         #oul>li{
            border: solid 1px black;
            width: 90px;
            margin: 2px;
            height: 90px;
            margin-left:4px;
            background: yellowgreen;
            display: inline;
            cursor: pointer;  //鼠标移动到li上变化
            }
         #oul>li:hover{
            background-color: #fff;
         }
      </style>
      <script type="text/javascript">

            window.οnlοad=function(){
               var arr=[ '快过年了，去玩吧',
                       '二月不撸',
                     '三月还是不撸'
               ]
               var aul=document.getElementById('oul');
               var ali = aul.getElementsByTagName('li');
               var adv = aul.getElementsByTagName('div')[0];
               for(var i=0;i<ali.length;i++){
                  ali[i].index=i;
                  ali[i].οnmοuseοver=function(){
                  adv.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>';
                  };
               }
            };
      </script>
   </head>
   <body>
      <div id="tab" class="calender">
         <ul id="oul">
            <li class="active"><h2>1</h2><p>JAN</p></li>
            <li><h2>2</h2><p>FEB</p></li>
            <li><h2>3</h2><p>March</p></li>
            <li><h2>4</h2><p>April</p></li>
            <li><h2>5</h2><p>May</p></li>
            <li><h2>6</h2><p>June</p></li>
            <li><h2>7</h2><p>JUly</p></li>
            <li><h2>8</h2><p>August</p></li>
            <li><h2>9</h2><p>September</p></li>
            <li><h2>10</h2><p>October</p></li>
            <li><h2>11</h2><p>November</p></li>
            <li><h2>12</h2><p>December</p></li>
            <div class="text"><h2></h2><p></p>
            </div>
         </ul>

      </div>
   </body>
</html>