android日历前端,前端开发简易日历插件

/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月祝福

快过年了，在这里提前祝大家新年快乐！！！