软件一班魏巍 2018/9/14 星期五 下午 4:01:15
html 日历代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>日历</title>
<style>
*{
margin:0;
padding:0;
}
ul{
list-style: none;
}
.nav{
width:245px;
height:370px;
box-sizing: border-box;
margin:80px auto;
background: #eae9e9;
padding:15px;
}
.nav ul{
width:100%;
height:250px;
}
.nav ul li{
width:60px;
height:50px;
background: #424242;
color:#fff;
float:left;
margin:5px;
padding:5px 0;
box-sizing: border-box;
border:1px solid #424242;
}
.nav .active{
color:#e84a7e;
background: #fff;
}
.nav ul li span{
display: block;
width:60px;
height:20px;
line-height: 20px;
text-align: center;
font-weight: bold;
}
desc{
width:100%;
height:65px;
border:1px solid #fff;
padding: 0 5px;
}
desc h1{
font-size: 16px;
color:#555;
margin:5px 0;
}
</style>
<script>
window.onload = function(){
var oLi = document.getElementsByTagName('li');
var arr = [
'春游踏青活动',
'野外露营活动',
'西藏自驾游',
'海南三亚洗白白',
'厉害了'
];
var desc = document.getElementById('desc');
for(var i=0;i<oLi.length;i++){
oLi[i].index = i;
oLi[i].onmouseover = function(){
//清除原来的class
for(var j=0;j<oLi.length;j++){
oLi[j].className = '';
}
//给现在的鼠标移入的标签添加class
this.className = 'active';
desc.innerHTML = '<h1>'+(this.index+1)+'月活动</h1><p>'+arr[this.index]+'</p>';
};
}
};
</script>
</head>
<body>
<div class="nav">
<ul>
<li><span>1</span><span>JAN</span><[图片上传失败...(image-b6dbb9-1536912361908)]
<li class="active"><span>2</span><span>FER</span><[图片上传失败...(image-b1b84f-1536912361908)]
<li><span>3</span><span>MAR</span><[图片上传失败...(image-aeff3e-1536912361908)]
<li><span>4</span><span>APR</span><[图片上传失败...(image-45f8b7-1536912361908)]
<li><span>5</span><span>MAY</span><[图片上传失败...(image-5dbe1-1536912361907)]
<li><span>6</span><span>JUN</span><[图片上传失败...(image-139c38-1536912361907)]
<li><span>7</span><span>JUL</span><[图片上传失败...(image-2654a3-1536912361907)]
<li><span>8</span><span>AUG</span><[图片上传失败...(image-a89bbf-1536912361907)]
<li><span>9</span><span>SEP</span><[图片上传失败...(image-472391-1536912361907)]
<li><span>10</span><span>OCT</span><[图片上传失败...(image-42b144-1536912361906)]
<li><span>11</span><span>NOV</span><[图片上传失败...(image-891539-1536912361906)]
<li><span>12</span><span>DEC</span><[图片上传失败...(image-eeeb7f-1536912361906)]
</ul>
<div id="desc">
<h1>1月活动</h1>
<p>春游踏青活动</p>
</div>
</div>
</body>
<html>
网友评论