纯js简单日历实现代码

更新时间：2013年10月05日 10:01:38 作者：

日历想必大家都比较熟悉吧，实现的方法有很多种，在本文大家将学会到如何使用js简单实现日历，感兴趣的朋友可以了解下

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

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

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 =''; 
} 
this.className ='active'; //给当前标签添加active 样式 

Otxt.innerHTML ='<h2>'+(this.index+1)+'</h2>'+'月'+'<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> 

效果预览：

您可能感兴趣的文章:

js
日历

javascript实现函数柯里化与反柯里化过程解析
这篇文章主要介绍了javascript实现函数柯里化与反柯里化过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-10-10
JavaScript打印iframe内容示例代码
打印iframe内容的方法有很多，下面为大家简单介绍下使用JavaScript实现打印，有需求的朋友可以参考下
2013-08-08
JS中超越现实的匿名函数用法实例分析
这篇文章主要介绍了JS中超越现实的匿名函数用法,结合实例形式分析了javascript匿名函数定义、用法及相关操作注意事项,需要的朋友可以参考下
2019-06-06
JavaScript中遍历的十种方法总结
这篇文章主要给大家介绍了关于JavaScript中遍历的十种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-12-12
JavaScript中的集合及效率
由于 JavaScript 的语言特性，我们可以向通用对象动态添加和删除属性。所以 Object 也可以看成是 JS 的一种特殊的集合。
2010-01-01
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
对于js初学着必须理解this和srcElement的应用，这也是面试中经常考到的。下面我们就通过几个示例来详细了解下
2015-05-05
js操作table中tr的顺序实现上移下移一行的效果
这篇文章主要介绍了js操作table中tr的顺序实现上移下移一行的效果 ,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-11-11
详解element-ui 表单校验 Rules 配置常用黑科技
这篇文章主要介绍了element-ui 表单校验 Rules 配置常用黑科技，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-07-07
JavaScript数组去重的五种方法
javascript数组去重的方法有很多种，在网上到处都可以找到答案，下面小编给大家整理了一份关于同类型的数组去重复的方法，感兴趣的朋友一起看看吧
2015-11-11
JavaScript中的继承之类继承
在JS中继承是一个非常复杂的话题，比其他任何面向对象语言中的继承都复杂得多。接下来通过本文给大家介绍JavaScript中的继承之类继承，感兴趣的朋友一起看看吧
2016-05-05