您的位置：首页 > 其它

简易年历卡

2017-05-15 17:35 246 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>年历</title>
<style type="text/css">
*{padding: 0px;margin: 0px;list-style: none;box-sizing: border-box;}
#div1{
width: 240PX;height: 440PX;background: #CCC;margin: 40px auto;padding:20px 10px 20px 20px;
}
#div1 ul{
/*border: 1px solid red;*/
display: inline-block;
width: 210px;
}
li{
float: left;width: 60px;height: 60px;text-align: center;cursor: pointer;/*border: 1px solid red;*/background: rgba(0,0,0,0.7);color: #fff;margin-right: 10px;margin-bottom: 10px;
}
#div1 div{
width: 200px;height: 120px;background: rgba(234,234,234,1);padding: 10px;
}
h4{
margin-bottom: 5px;
}
.active{
background: #fff;
color: red;
border: 1px solid block;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv1 = document.getElementById('div1');
var aLi = oDiv1.getElementsByTagName('li');
var aDiv = oDiv1.getElementsByTagName('div')[0];
var arrMon=['快过年了，大家可以商量着去哪玩啦。','过年吃饺子贴年画唠','元宵放孔明灯，烟花爆竹，开始上班了','清明节到了，去看老友了','端午节6起来','毕业季','七夕情人节','八月十五什么节来着','秋天来了,寒霜降临','要下雪了','要放寒假了','冬天真漂亮']
for(var i=0;i<aLi.length;i++){
aLi[i].index=i;
aLi[i].onmouseover=function(){
for(var j=0;j<aLi.length;j++){
aLi[j].className = '';
}
this.className = 'active';
aDiv.innerHTML='<h4>'+(this.index+1)+
'月活动</h4><p>'+arrMon[this.index]+'</p>';
}
}
}
</script
4000
>
</head>
<body>
<div id="div1">
<ul>
<li>1<br>JAN</li>
<li>2<br>FER</li>
<li>3<br>MAR</li>
<li>4<br>APR</li>
<li>5<br>JAN</li>
<li>6<br>MAY</li>
<li>7<br>JUN</li>
<li>8<br>JUL</li>
<li>9<br>AUG</li>
<li>10<br>SEP</li>
<li>11<br>OCT</li>
<li>12<br>FER</li>
</ul>
<div >
<h4>1月活动</h4>
<p>快过年了，大家可以商量着去哪玩啦。</p>
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航