我编写的一个简单日历(js+css)

原创
2015/03/21 22:40
阅读数 341
 <! DOCTYPE HTML>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<style type="text/css">
#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;}
</style>
<script type="text/javascript">
window.onload=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.length;i++)
   { wLi[i].index=i;
    wLi[i].onmouseover=function()
    { 
     for(var i=0;i<wLi.length;i++)
     {
      wLi[i].className='';
     }
    this.className='active';
    wTx.innerHTML='<h2>'+(this.index+1)+'月份</h2><p>'+arr[this.index]+'</p>';
    } 
   }  
}
</script>
</head>
<body>
<div id="tab" class="canlender">
 <ul>
  <li class="active"><h2>1</h2><p>JAN</p></li>
  <li><h2>2</h2><p>FEB</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>DES</p></li>
 </ul>
 <div class="txt" id="div2">
  <h2>1月份</h2><p>这是1月</p>
 </div>
</div>
</body>
</html>

展开阅读全文
打赏
0
2 收藏
分享
加载中
更多评论
打赏
0 评论
2 收藏
0
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部