<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>简易日历</title>
<style>
.wrapper{
width: 250px;
height: 400px;
background: #efefef;
border: 1px solid rgb(240, 240, 240);
margin: 0 auto;
margin-top: 150px;
}
.td1{
float: left;
width: 50px;
height: 50px;
border: 1px solid black;
text-align: center;
margin-left: 20px;
color: white;
background: rgba(76, 76, 76, 0.9);
}
.active{
float: left;
width: 50px;
height: 50px;
border: 1px solid black;
text-align: center;
margin-left: 20px;
background: white;
color:#ffbdfc;
}
.div1{
padding-top: 8px;
}
.row1{
margin: 0 auto;
width: 250px;
height: 52px;
margin-top: 20px;
margin-left: 5px;
}
.txt{
width: 192px;
height: 90px;
border: 1px solid #f3f3f3;
margin: 0 auto;
margin-top: 10px;
background: rgb(247, 247, 247);
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
var oDiv=document.getElementsByTagName('div');
var oTxt=document.getElementById('text');
var j=0;
var arr=[
'快过年啦,放假啦,一月',
'在家里过寒假啊 二月',
'三月',
'四月',
'五月',
'六月',
'七月',
'八月',
'九月',
'十月',
'十一月',
'十二月'
]
var oDiv1=new Array(); //定义一个数组
oDiv1[0]=oDiv[2];oDiv1[1]=oDiv[5];
oDiv1[2]=oDiv[8];oDiv1[3]=oDiv[12];
oDiv1[4]=oDiv[15];oDiv1[5]=oDiv[18];
oDiv1[6]=oDiv[22];oDiv1[7]=oDiv[25];
oDiv1[8]=oDiv[28];oDiv1[9]=oDiv[32];
oDiv1[10]=oDiv[35];oDiv1[11]=oDiv[38];
for(var i=0;i<oDiv1.length;i++){
oDiv1[i].index=i;
oDiv1[i].οnmοuseοver=function(){
for(var i=0;i<oDiv1.length;i++){
oDiv1[i].style.color='white';
oDiv1[i].style.background='rgba(76, 76, 76, 0.9)';
}
this.style.color='#ffbdfc';
this.style.background='white';
oTxt.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>';
};
}
};
</script>
</head>
<body>
<div class="wrapper">
<div class="row1">
<div class="td1">
<div class="div1">1</div>
<div>JAN</div>
</div>
<div class="td1">
<div class="div1">2</div>
<div>FER</div>
</div>
<div class="td1">
<div class="div1">3</div>
<div>MAR</div>
</div>
</div>
<div class="row1">
<div class="td1">
<div class="div1">4</div>
<div>APR</div>
</div>
<div class="td1">
<div class="div1">5</div>
<div>MAY</div>
</div>
<div class="td1">
<div class="div1">6</div>
<div>JUN</div>
</div>
</div>
<div class="row1">
<div class="td1">
<div class="div1">7</div>
<div>JUL</div>
</div>
<div class="td1">
<div class="div1">8</div>
<div>AUG</div>
</div>
<div class="td1">
<div class="div1">9</div>
<div>SEP</div>
</div>
</div>
<div class="row1">
<div class="td1">
<div class="div1">10</div>
<div>OCT</div>
</div>
<div class="td1">
<div class="div1">11</div>
<div>NOV</div>
</div>
<div class="td1">
<div class="div1">12</div>
<div>DEC</div>
</div>
</div>
<div class="txt" id="text"></div>
</div>
</body>
<script type="text/javascript">
</script>
</html>
效果图:
心得体会:布局很重要!一开始的时候用表格来做,做了好久都得到满意的效果,结果一怒之下,果断抛弃table,全部用div布局,果然一下子就出了效果,心里还在沾沾自喜,觉得div可以做到一切;但是,没想到的是,这个项目主要要用到js 的document.getElementsByTagName()这个方法,面对满屏的div我有点傻眼,为什么只能通过标签来得到元素呢,为什么不能通过类名来得到元素呢?!唉,不开心,想用 JQuery.