这里我们将用原生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]
这些都是变量;为保证程序正常运行,他们之间需要+连接起来