Home > Article > Web Front-end > Pure js simple calendar implementation code

Pure js simple calendar implementation code

高洛峰Original: 2017-02-06 10:49:421436browse

<!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 oBtn=document.getElementById(&#39;btn1&#39;); 
var oTxt=document.getElementById(&#39;txt1&#39;); 
var oDiv=document.getElementById(&#39;div1&#39;); 
oBtn.onclick=function() 
{ 
oDiv.innerHTML=oTxt.value; 
} 

}*/ 
window.onload=function() 
{ 
var aLi= document.getElementsByTagName(&#39;li&#39;); 
var Otxt =document.getElementById(&#39;tab&#39;).getElementsByTagName(&#39;div&#39;)[0]; 
var aDats =[&#39;元旦1月1日&#39;,&#39;2月14日情人节&#39;,&#39;3月3日全国爱耳日&#39;, 
&#39;4月1日愚人节&#39;,&#39;5月1日国际劳动节&#39;,&#39;6月1日 国际儿童节&#39;, 
&#39;7月1日中国共产党诞生日&#39;,&#39;8月1日中国人民解放军建军节&#39;,&#39;9月10日中国教师节&#39;, 
&#39;10月1日中华人民共和国国庆节&#39;,&#39;11月9日消防宣传日&#39;,&#39;12月3日世界残疾人日&#39; 
]; 

var i=0; 
for(i=0;i<aLi.length;i++) //for循环历遍li元素 
{ 
aLi[i].index=i; 
aLi[i].onmouseover =function() //添加鼠标指向事件 
{ 

for(i=0;i<aLi.length;i++) //for循环历遍li元素去掉li样式 
{ 
aLi[i].className =&#39;&#39;; 
} 
this.className =&#39;active&#39;; //给当前标签添加active 样式 

Otxt.innerHTML =&#39;<h2>&#39;+(this.index+1)+&#39;</h2>&#39;+&#39;月&#39;+&#39;<p>&#39;+aDats[this.index]+&#39;</p>&#39;; 
} 

} 

}; 

</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:

For more pure js simple calendar implementation code related articles, please pay attention to the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：js implements calendar to obtain the specified date, week number and day of the week. Example sharingNext article：js implements calendar to obtain the specified date, week number and day of the week. Example sharing

See more

Pure js simple calendar implementation code

Related articles