使用JavaScript实现简单的万年历
效果如下:
点击每个月份时改变相应样式,以及文字内容。
先写出大致结构:
<body>
<div id="tab" class="calendar">
<ul id="box">
<li class="active"><h2>1</h2><p>JAN</p></li>
<li ><h2>2</h2><p>FER</p></li>
<li ><h2>3</h2><p>MAR</p></li>
<li ><h2>4</h2><p>APR</p></li>
<li ><h2>5</h2><p>MAY</p></li>
<li><h2>6</h2><p>JUN</p></li>
<li><h2>7</h2><p>JUL</p></li>
<li><h2>8</h2><p>AUG</p></li>
<li><h2>9</h2><p>SEP</p></li>
<li><h2>10</h2><p>OCT</p></li>
<li><h2>11</h2><p>NOV</p></li>
<li><h2>12</h2><p>DEC</p></li>
</ul>
<div class="text" id="txt">
<h2>1月活动</h2>
<p>好好学习,天天向上</p>
</div>
</div>
</body>
js代码:
//新建数组用来存放相应的文本内容
var arr=['快过年了,大家可以商量着去哪玩吧~',
'大家好好学习吧222222~~~',
'大家好好学习吧222222333~~~',
'大家好好学习吧222444222~~~',
'大家好好学习555吧222222~~~',
'大家好好学习吧666222222~~~',
'大家好好学习吧227772222~~~',
'大家好好学习吧28888822222~~~',
'大家好好学习吧99999222222~~~',
'大家好好学习10000000吧222222~~~',
'大家好好学习吧111111222222~~~',
'大家好好学习吧22222200000000000~~~']
var ali = document.querySelectorAll("#box li");
var oh2 = document.getElementById("txt").children[0];
var op = document.getElementById("txt").children[1];
// 所有li绑定点击事件
//循环立即执行,不会等事件
for(var i=0;i<ali.length;i++){
// 提前给每个li都编号(默认没有编号)
ali[i].abc = i;
// 事件在将来被点击的时候触发
ali[i].onclick = function(){
// 再写一个循环,重新遍历li
// 取消所有
for(var j=0;j<ali.length;j++){
ali[j].className = "";
}
// 给当前加上类名,改变当前样式
this.className = "active";
// 找到索引
console.log(this.abc)
// 根据索引找到数组中的数据
oh2.innerHTML = this.abc+1 + "月活动";
op.innerHTML = arr[this.abc]
}
}
</script>
点击切换如下:
这个案例关键之处就在点击时通过改变其类名来改变样式,所以熟练使用这一点,很多相似的案例都可用此解决。