简易日历（innerHTML）
生活随笔
收集整理的這篇文章主要介紹了
简易日历（innerHTML）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
可以說是前面選項卡的一個延伸或者說是另一個實現方法，選項卡改變的是div，而簡易日歷改變的是div里的內容
innerHTML
首先先介紹一下innerHTML，是HTML和JS里最有用的東西。
?
innerHTML是什么？
栗子：
var oDiv = document.getElementById('div1');
oDiv.innerHTML = "...";
oDiv.innerHTML代表什么？
? ?代表div標簽中間的內容，就是下面栗子中的? 省略號內容。
?
說到這里就出現有意思的地方，既然innerHTML代表的是標簽內的內容，那么就可以往里放HTML語句。
比如說上面的栗子：
oDiv.innerHTML = "<h1>標題1</h1>"；
這里就相當于在div中添寫了? <h1>標題1</h1>? 這條HTML語句，打開審查元素會發現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）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 监控摄像头故障检测修复过程
- 下一篇： 联影医疗IPO过会背后：已连续盈利，研发