Pure js simple calendar implementation code
- 2020-03-26 21:23:19
- OfStack
<!doctype html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body,ul,li,h2,p
{
margin:0px;
padding:0xp;
}
#div1
{
width:200px;
height:200px;
background:#ccc;
}
.calendar
{
width:240px;
height:345px;
background:#ccc;
margin:auto;
}
.calendar ul
{
list-style:none;
width:232px;
height:260px;
margin:0px;
padding:0px;
}
.calendar ul li
{
width:45px;
height:65px;
background:#333;
float:left;
display:inline;
margin-left:11px;
margin-top:10px;
border:1px solid #ccc;
text-align:center;
color:#FFF;
}
.calendar ul li:hover
{
border:1px solid #000;
}
.text
{
background:#F96;
margin:10px;
padding-bottom:10px;
height:45px;
}
.text h2
{
display:inline;
}
.active
{
background:#FFF !important;
color:#C03 !important;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var aLi= document.getElementsByTagName('li');
var Otxt =document.getElementById('tab').getElementsByTagName('div')[0];
var aDats =[' New Year's Day 1 month 1 day ','2 month 14 Valentine's day ','3 month 3 National ear care day ',
'4 month 1 April fool's day ','5 month 1 International Labour Day ','6 month 1 day International children's day ',
'7 month 1 The birth of the communist party of China ','8 month 1 Chinese people's liberation army army day ','9 month 10 Chinese teacher's day ',
'10 month 1 The National Day of the People's Republic of China ','11 month 9 Fire protection publicity day ','12 month 3 World disabled persons' day '
];
var i=0;
for(i=0;i<aLi.length;i++) //The for loop traverses the li element
{
aLi[i].index=i;
aLi[i].onmouseover =function() //Add mouse-pointing events
{
for(i=0;i<aLi.length;i++) //The for loop iterates through the li element to remove the li style
{
aLi[i].className ='';
}
this.className ='active'; //Add the active style to the current label
Otxt.innerHTML ='<h2>'+(this.index+1)+'</h2>'+' month '+'<p>'+aDats[this.index]+'</p>';
}
}
};
</script>
</head>
<body>
<div id="tab" class="calendar">
<ul>
<li class="active"><h2>1</h2><p>JAN</p></li>
<li><h2>2</h2><p>FER</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>JUM</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>DEC</p></li>
</ul>
<div class="text">
</div>
</div>
</body>
</html>
Effect preview:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201310/201310050959331.gif? 20139510056 ">