首页 > 其他分享> > 简易日历（innerHTML）

简易日历（innerHTML）

2021-05-02 16:06:26 作者：互联网

可以说是前面选项卡的一个延伸或者说是另一个实现方法，选项卡改变的是div，而简易日历改变的是div里的内容

innerHTML

首先先介绍一下innerHTML，是HTML和JS里最有用的东西。

innerHTML是什么？
栗子：
var oDiv = document.getElementById('div1');
oDiv.innerHTML = "...";

oDiv.innerHTML代表什么？
代表div标签中间的内容，就是下面栗子中的省略号内容。

<div id=div1>
    ...

</div>

说到这里就出现有意思的地方，既然innerHTML代表的是标签内的内容，那么就可以往里放HTML语句。

比如说上面的栗子：
oDiv.innerHTML = "<h1>标题1</h1>"；
这里就相当于在div中添写了 <h1>标题1</h1> 这条HTML语句，打开审查元素会发现div块中确实添加了这条语句

<div id="div1">
    <h1>标题1</h1>
</div>

言归正传

简易日历要实现的操作：
当鼠标移动到月份上时，月份的框的样式会改变，且底下的div内的文字会改变

参考前一篇的选项卡会发现基础原理差不多，主要是掌握怎么改变div的内容，这就用到了上面说的innerHTML,还有拼接符“+”
原理就是现创建一个数组将要改变的内容存进去，再使用this.index读取数组。

详细代码

<script>
    window.onload = function () {
      const oTab = document.getElementById('tab');
      const oLi = oTab.getElementsByTagName('li');
      const oText = oTab.getElementsByTagName('div')[0];

      const arr = [
              "出去玩鸭！",
        "不出去玩鸭！",
        "上学鸭！",
        "学习！",
        "考试鸭！",
        "放假鸭！",]


      for (let i=0; i<oLi.length; i++) {
        oLi[i].index = i;
        oLi[i].onmouseover = function () {
          for (let i=0; i<oLi.length; i++) {
            oLi[i].className = '';
          }
          this.className = 'active';

          oText.innerHTML = '<h2>' + (this.index + 1) + '月</h2><p>' + arr[this.index] + '</p>';
        };
      }
    };
  </script>


<body>
<div id="tab">
  <ul>
    <li class="active">
      <h1>1</h1>
      <p>JAN</p>
    </li>
    <li>
      <h1>2</h1>
      <p>FER</p>
    </li>
    <li>
      <h1>3</h1>
      <p>MAR</p>
    </li>
    <li>
      <h1>4</h1>
      <p>APR</p>
    </li>
    <li>
      <h1>5</h1>
      <p>MAY</p>
    </li>
    <li>
      <h1>6</h1>
      <p>TUN</p>
    </li>
  </ul>
  <div id="text">
    <h2>1月</h2>
    <p>出去玩鸭！</p>
  </div>
</div>
</body>

标签：index,const,日历,innerHTML,简易,oTab,oDiv,div
来源： https://blog.csdn.net/Lm_choose_live/article/details/116353303