简易日历（innerHTML）
可以說(shuō)是前面選項(xiàng)卡的一個(gè)延伸或者說(shuō)是另一個(gè)實(shí)現(xiàn)方法，選項(xiàng)卡改變的是div，而簡(jiǎn)易日歷改變的是div里的內(nèi)容
innerHTML
首先先介紹一下innerHTML，是HTML和JS里最有用的東西。
?
innerHTML是什么？
栗子：
var oDiv = document.getElementById('div1');
oDiv.innerHTML = "...";
oDiv.innerHTML代表什么？
? ?代表div標(biāo)簽中間的內(nèi)容，就是下面栗子中的? 省略號(hào)內(nèi)容。
?
說(shuō)到這里就出現(xiàn)有意思的地方，既然innerHTML代表的是標(biāo)簽內(nèi)的內(nèi)容，那么就可以往里放HTML語(yǔ)句。
比如說(shuō)上面的栗子：
oDiv.innerHTML = "<h1>標(biāo)題1</h1>"；
這里就相當(dāng)于在div中添寫了? <h1>標(biāo)題1</h1>? 這條HTML語(yǔ)句，打開(kāi)審查元素會(huì)發(fā)現(xiàn)div塊中確實(shí)添加了這條語(yǔ)句
?
言歸正傳
簡(jiǎn)易日歷要實(shí)現(xiàn)的操作：
? ? 當(dāng)鼠標(biāo)移動(dòng)到月份上時(shí)，月份的框的樣式會(huì)改變，且底下的div內(nèi)的文字會(huì)改變
參考前一篇的選項(xiàng)卡會(huì)發(fā)現(xiàn)基礎(chǔ)原理差不多，主要是掌握怎么改變div的內(nèi)容，這就用到了上面說(shuō)的innerHTML,還有拼接符“+”
? ? 原理就是? 現(xiàn)創(chuàng)建一個(gè)數(shù)組將要改變的內(nèi)容存進(jìn)去，再使用this.index讀取數(shù)組。
?
詳細(xì)代碼
<script>window.onload = function () {const oTab = document.getElementById('tab');const oLi = oTab.getElementsByTagName('li');const oText = oTab.getElementsByTagName('div')[0];const arr = ["出去玩鴨！","不出去玩鴨！","上學(xué)鴨！","學(xué)習(xí)！","考試?guó)?#xff01;","放假鴨！",]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>
?
總結(jié)
以上是生活随笔為你收集整理的简易日历（innerHTML）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 监控摄像头故障检测修复过程
- 下一篇： 2017年html5行业报告,云适配发布