/p>
* {
padding: 0;
margin: 0;
}
body {
background: #F6F9FC;
font-family: arial;
}
li {
list-style: none;
}
.calendar {
width: 210px;
margin: 50px auto;
padding: 10px 10px 20px 20px;
background: #E0E3E6;
}
.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 h2 {
font-size: 20px;
padding-top: 5px;
}
.calendar p {
font-size: 14px;
}
.calendar .active {
border: 1px solid #424242;
background: #fff;
color: #e84a7e;
}
.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;
}
window.onload = function () {
var aText = [‘快过年了,在这里提前祝大家新年快乐!!!’,
‘还没脱单的早点脱单’,
‘脱单的事业顺风顺水’,
‘已经有娃的家庭美满’,
‘还在读书的考试都过’,
6, 5, 4, 3, 2, 1, ‘拿完年终奖,开开心心回家过年!!!’];
var oDiv = document.getElementById(‘tab’);
var oUl = oDiv.getElementsByTagName(‘ul’)[0];
var aLi = oUl.getElementsByTagName(‘li’);
var oTxt = oDiv.getElementsByClassName(‘text’)[0];
for (var i = 0, len = aLi.length; i < len; i++) {
aLi[i].index = i;
aLi[i].onmouseover = function () {
for (var j = 0; j < aLi.length; j++) {
aLi[j].className = ”;
}
this.className = ‘active’;
oTxt.innerHTML = ‘
’ + (this.index + 1) + ‘月祝福
’+ ‘
’ + aText[this.index] + ‘
’;}
}
}
1
JAN
2
FER
3
MAR
4
APR
5
MAY
6
JUN
7
JUL
8
AUG
9
SEP
10
OCT
11
NOV
12
DEC
1月祝福
快过年了,在这里提前祝大家新年快乐!!!