纯js简单日历实现代码


Posted in Javascript onOctober 05, 2013
<!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 相关文章推荐
JS setCapture 区域外事件捕捉
Mar 18 Javascript
说明你的Javascript技术很烂的五个原因
Apr 26 Javascript
33个优秀的 jQuery 图片展示插件分享
Mar 14 Javascript
jquery中的查找parents与closest方法之间的区别
Dec 02 Javascript
textarea 控制输入字符字节数(示例代码)
Dec 27 Javascript
浅谈JavaScript Date日期和时间对象
Dec 29 Javascript
微信小程序Redux绑定实例详解
Jun 07 Javascript
微信小程序点击控件修改样式实例详解
Jul 07 Javascript
微信小程序框架wepy之动态控制类名
Sep 14 Javascript
jquery使用FormData实现异步上传文件
Oct 25 jQuery
JS中FileReader类实现文件上传及时预览功能
Mar 27 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
May 09 Javascript
JS教程:window.location使用方法的区别介绍
Oct 04 #Javascript
js中单引号与双引号冲突问题解决方法
Oct 04 #Javascript
jquery parent和parents的区别分析
Oct 02 #Javascript
jQuery插件 selectToSelect使用方法
Oct 02 #Javascript
jquery定时滑出可最小化的底部提示层特效代码
Oct 02 #Javascript
jquery实现多级下拉菜单的实例代码
Oct 02 #Javascript
基于JQuery的列表拖动排序实现代码
Oct 01 #Javascript
You might like
php cookies中删除的一般赋值方法
2011/05/07 PHP
PHP使用DES进行加密与解密的方法详解
2013/06/06 PHP
php中的curl_multi系列函数使用例子
2014/07/29 PHP
php实现encode64编码类实例
2015/03/24 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
在PHP站点的页面上添加Facebook评论插件的实例教程
2016/01/08 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
学习ExtJS Panel常用方法
2009/10/07 Javascript
JavaScript中各种编码解码函数的区别和注意事项
2010/08/19 Javascript
JS刷新当前页面的几种方法总结
2013/12/24 Javascript
解决JS中乘法的浮点错误的方法
2014/01/03 Javascript
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
2015/02/17 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
[原创]jQuery常用的4种加载方式分析
2016/07/25 Javascript
前端防止用户重复提交js实现代码示例
2018/09/07 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
2018/09/26 Javascript
typescript nodejs 依赖注入实现方法代码详解
2019/07/21 NodeJs
Node.js API详解之 querystring用法实例分析
2020/04/29 Javascript
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
如何实现小程序与小程序之间的跳转
2020/11/04 Javascript
Windows下的Python 3.6.1的下载与安装图文详解(适合32位和64位)
2018/02/21 Python
Django保护敏感信息的方法示例
2019/05/09 Python
Python高级property属性用法实例分析
2019/11/19 Python
在Python中通过threshold创建mask方式
2020/02/19 Python
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
高职教师岗位职责
2013/12/24 职场文书
委托公证书范本
2014/04/03 职场文书
2014年班组建设工作总结
2014/12/01 职场文书
医德医风个人总结
2015/02/28 职场文书
就业证明函
2015/06/17 职场文书
通知怎么写?
2019/04/17 职场文书
使用pd.merge表连接出现多余行的问题解决
2022/06/16 Python
JS前端监控采集用户行为的N种姿势
2022/07/23 Javascript