JavaScript实现简易月份切换日历示例

JavaScript实现简易月份切换日历示例

本文通过一个完整的示例，详细讲解了如何使用JavaScript制作一个简单的年历。该实例旨在为读者提供参考，帮助理解相关技术在实际开发中的应用。

在实现过程中，主要学习了如何利用JavaScript生成年历，并借此复习了this关键字的使用。与常见的选项卡制作略有不同，本例引入了innerHTML属性的应用。希望通过持续练习，能够掌握更多技巧，也欢迎JavaScript专家提出建议。

关于innerHTML属性的使用方法。

通过给特定ID的元素赋值，例如top.innerHTML="..."，即可向该ID对应的DOM位置写入HTML代码。

例如，执行top.innerHTML="<button>按钮</button>"即可在对应位置动态生成一个按钮元素。

程序实现思路如下：

1. 结构类似选项卡，但在底部增加了一个用于显示内容的div区域；

2. 核心在于innerHTML属性的动态赋值；

3. 利用数组存储各月份的相关信息；

① 定义方式：arr=[0,1,2,3]；

② 访问方式：通过索引如arr[0]获取对应元素；

4. 字符串连接操作；

① 功能：使用“+”号连接两个字符串；

② 注意事项：连接操作中的优先级问题，可通过括号()来明确运算顺序；

具体实现源码如下：

JavaScript代码部分：

<script type="text/javascript">
window.onload=function()
    {  
var arr=[
'快过年了，大家一起去放鞭炮咯！',
'马上上学了，不开心！',
'妇女节快乐！',
'很平淡的四月',
'劳动光荣！',
'儿童节快乐！',
'好热的七月!',
'八一建军节!',
'又开学了哎！'
        ];  
var oDiv=document.getElementById('tab');
var oLi=oDiv.getElementsByTagName('li');
var oTxt=oDiv.getElementsByTagName('div')[0];
var i=0;
for(var i=0;i<oLi.length;i++)
        {  
oLi[i].index=i;
oLi[i].onmouseover=function ()
            {  
for(var i=0;i<oLi.length;i++)
                 {  
                   
oLi[i].className='';
                   
                 }  
              
this.className='active';
oTxt.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>';
            };  
          
        }  
      
    };  
</script>

CSS样式部分：

<style type="text/css">
* { padding: 0;margin: 0; }
  
li { list-style: none; }
  
body { background: #f6f9fc; font-family: arial; }
  
.calendar { width: 210px;
margin: 50px auto 0;
padding: 10px 10px 20px 20px;
background: #eae9e9; }
              
.calendar ul { width: 210px;
overflow: hidden;
padding-bottom: 10px; }
                 
.calendar li { float: left;
width: 58px;
height: 54px;
margin: 10px 10px 0 0;
border: 1px solid #fff;
background: #424242;
color: #fff;
text-align: center;
cursor: pointer; }
                 
.calendar li h2 { font-size: 20px; padding-top: 5px; }
  
.calendar li p { font-size: 14px; }
  
.calendar .active { border: 1px solid #424242;
background: #fff;
color: #e84a7e; }
                      
.calendar .active h2 { }
  
.calendar .active p { font-weight: bold; }
  
.calendar .text { width: 178px;
padding: 0 10px 10px;
border: 1px solid #fff;
padding-top: 10px;
background: #f1f1f1;
color: #555; }
                    
.calendar .text h2 {font-size: 14px; margin-bottom: 10px; }
  
.calendar .text p { font-size: 12px; line-height: 18px; }
</style>

HTML结构部分：

<body>
<div id="tab" class="calendar">
<ul>
<li class="active"><h2>1</h2><p>一月</p></li>
<li><h2>2</h2><p>二月</p></li>
<li><h2>3</h2><p>三月</p></li>
<li><h2>4</h2><p>四月</p></li>
<li><h2>5</h2><p>五月</p></li>
<li><h2>6</h2><p>六月</p></li>
<li><h2>7</h2><p>七月</p></li>
<li><h2>8</h2><p>八月</p></li>
<li><h2>9</h2><p>九月</p></li>
<li><h2>10</h2><p>十月</p></li>
<li><h2>11</h2><p>十一月</p></li>
<li><h2>12</h2><p>十二月</p></li>
</ul>
<div class="text">
</div>
          
</div>
</body>

运行效果如下图所示：

希望本文所述内容能对大家的JavaScript程序设计有所帮助。