原生js简易日历效果实现

这里我们将用原生js实现简易的日历，原理和之前的原生js选项卡差不多，不过也有些区别：

首先html代码：

<div class="container">
<div class="container_cont">
<ul id="cont_ul">
<li class="active">
<span>1</span>
<p>jan</p>
</li>
<li>
<span>2</span>
<p>fer</p>
</li>
<li>
<span>3</span>
<p>mar</p>
</li>
<li>
<span>4</span>
<p>apr</p>
</li>
<li>
<span>5</span>
<p>may</p>
</li>
<li>
<span>6</span>
<p>jun</p>
</li>
<li>
<span>7</span>
<p>jul</p>
</li>
<li>
<span>8</span>
<p>aug</p>
</li>
<li>
<span>9</span>
<p>sep</p>
</li>
<li>
<span>10</span>
<p>oct</p>
</li>
<li>
<span>11</span>
<p>nov</p>
</li>
<li>
<span>12</span>
<p>dec</p>
</li>
</ul>
<div class="cont">
<div id="cont">
<h2>1月活动</h2>
<p>快过年了，大家可以商量去烧烤了吧！</p>
</div>
</div>
</div>
</div>

css代码：

* { margin: 0; padding: 0; }
.container { width: 340px; background-color: #ccc; padding: 40px; margin: 50px auto; }
.container_cont { width: 340px; overflow: hidden; }
.container ul { font-size: 0; width: 360px; overflow: hidden; }
.container li { width: 100px; height: 100px; text-align: center; background-color: #666; color: #fff; display: inline-block; vertical-align: top; margin-right: 20px; margin-bottom: 20px }
.container li.active { background-color: #fff; border: 1px solid #666; width: 98px; height: 98px }
.container span { font-size: 18px; display: block; margin-top: 20px }
.container p { margin-top: 10px; font-size: 18px; }
.container li.active span,.container li.active p { color: #333; font-size: 18px }
.cont h2 { font-size: 18px }

重点的js代码：

window.onload = function(){
var arr = [
"111111",
"1111",
"11111",
"111111",
"1111",
"11111",
"111111",
"1111",
"111111",
"11",
"11111",
"111111"
];
var oUl = document.getElementById("cont_ul");
var aLi = oUl.getElementsByTagName("li");
var oCont = document.getElementById("cont");

for( var i = 0; i < aLi.length; i ++ ){
aLi[i].index = i;
aLi[i].onmouseover = function(){
for( var i = 0; i < aLi.length; i ++ ){
aLi[i].className = "";
}
this.className = "active";
oCont.innerHTML = "<h2>" + (this.index+1) + "月活动</h2><p>"+arr[this.index]+"</p>";
}
}
}

说明：

1、我们只是把效果实现，所以arr里面的数组具体内容就随便写了下；

2、这里我们学到了innerHTML 属性；这个属性指的是设置或返回表格行的开始和结束标签之间的 HTML。在这个例子中因为id为cont的div里面的内容是动态的，所以不能写死，通过这个属性

动态的对它里面的内容进行相应的改变oCont.innerHTML = "<h2>" + (this.index+1) + "月活动</h2><p>"+arr[this.index]+"</p>"； h2标签里的内容相对简单，只需要通过添加索引值就即可

不过需要注意的是，因为索引值是从0开始的所以this.index 后面需要加1；p标签里面的内容我们通过新建个数组arr，然后当鼠标滑过月份的时候，通过对应的索引值显示相应的数组内容；

3、字符串拼接：在这里oCont.innerHTML = "<h2>" + (this.index+1) + "月活动</h2><p>"+arr[this.index]+"</p>"; 我们看到有些内容是用引号包起来的，对没错，这就是字符串，像this.index+1和arr[this.index]

这些都是变量；为保证程序正常运行，他们之间需要+连接起来