首页 > 文章 > web前端 > 纯js简单日历实现代码

纯js简单日历实现代码

高洛峰原创: 2017-02-06 10:49:421411浏览

<!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>

效果预览：

纯js简单日历实现代码

更多纯js简单日历实现代码相关文章请关注PHP中文网！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：js实现日历可获得指定日期周数及星期几示例分享下一篇：很好用的js日历算法详细代码

查看更多