日历纯html+css,我编写的一个简单日历（js+css）

test

#tab {width:415px;height:600px;background: grey;border-radius:10px;float:left;margin-left: 500px;}

li{width:100px;height: 100px;border:1px solid black;border-radius:10px;float: left; list-style: none;

color:white;font-weight: bold;margin: 5px;}

#tab .text{width:300px;height:50px;margin-bottom: 5px;float: right;margin-bottom: 5px;}

p{margin-left: 36px;}

h2{margin-left: 38px;}

#div2 {width:300px;height:100px;font-weight: bold;color:white; border: 1px solid black;

float: left;margin-left: 58px;margin-top: 18px;text-align:center;text-align: middle;}

.active{background: #eeeeee;color:pink;border: 1px solid #eeeeee;}

window.οnlοad=function  () {

var arr=['这是1月','这是2月','这是3月','这是4月',

'这是5月','这是6月','这是7月','这是8月',

'这是9月','这是10月','这是11月','这是12月'];

var wDiv=document.getElementById('tab');

var wLi=wDiv.getElementsByTagName('li');

var wTx=wDiv.getElementsByTagName('div')[0];

for(var i=0;i

{ wLi[i].index=i;

wLi[i].οnmοuseοver=function()

{

for(var i=0;i

{

wLi[i].className='';

}

this.className='active';

wTx.innerHTML='

'+(this.index+1)+'月份

'+arr[this.index]+'

';

}

}

}

• 1

  JAN

• 2

  FEB

• 3

  MAR

• 4

  APR

• 5

  MAY

• 6

  JUN

• 7

  JUL

• 8

  AUG

• 9

  SEP

• 10

  OCT

• 11

  NOV

• 12

  DES

1月份

这是1月