可以说是前面选项卡的一个延伸或者说是另一个实现方法，选项卡改变的是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>

简易日历（innerHTML）相关推荐

如何用Java制作一个简易日历
简易日历制作记录一下Java实现的一个日历小程序,效果图如下: 实现以上的效果,我们需要用到两个类:SimpleDateFormat和Calendar. 首先看看这两个类的用法: 类 SimpleD ...
jQuery控件简易日历表格
jQuery控件简易日历表格代码,jquery表格,jquery插件 ,jquery,日期,时间,日历表格,表格代码,jQuery控件简易日历表格代码是一款较为简单的显示日历的代码,兼容firefox ...
C语言实现简易日历(附源码)
C语言实现简易日历首先来看程序运行的结果,首先会提示用户输入年份和月份,就会以日历的形式打印出这个月的信息. 下面来看看程序设计源码: #define _CRT_SECURE_NO_WARNINGS ...
怎么用java做日历_如何用Java制作一个简易日历
简易日历制作记录一下Java实现的一个日历小程序,效果图如下: 实现以上的效果,我们需要用到两个类:SimpleDateFormat和Calendar. 首先看看这两个类的用法: 类 SimpleD ...
java 制作简易日历_如何用Java制作一个简易日历
简易日历制作记录一下Java实现的一个日历小程序,效果图如下: 实现以上的效果,我们需要用到两个类:SimpleDateFormat和Calendar. 首先看看这两个类的用法: 类 SimpleD ...
用java编写日历_如何用Java制作一个简易日历
简易日历制作记录一下Java实现的一个日历小程序,效果图如下: 实现以上的效果,我们需要用到两个类:SimpleDateFormat和Calendar. 首先看看这两个类的用法: 类 SimpleD ...
JS之简易日历的制作
下面我为大家分享一个我制作的简易日历,话不多说,直接上代码 body部分 <body><div id='tab'><ul><li class="ac ...
用java写一个简易日历
写一个简易日历记录学习之路,用java语言,用的IDEA编辑器. 我觉得写日历一定要有两个首要方法,所以我首先先写了两个方法,一个是判断是否是闰年,方法代码如下 static boolean jud ...
简易日历记事本源码（java+android端），含日历和日志记事本两部分
DuangCalender 简易日历记事本(java+android端) 完整代码下载地址:简易日历记事本源码(java+android端) 1.本设计题目的主要内容 JAVA: duang日历记事本 ...

简易日历（innerHTML）

innerHTML

言归正传

详细代码

简易日历（innerHTML）相关推荐

最新文章

热门文章