纯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 相关文章推荐
Jquery 滑入滑出效果实现代码
Mar 27 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
Apr 02 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
Feb 20 Javascript
javascript编写贪吃蛇游戏
Jul 07 Javascript
webpack+vue.js实现组件化详解
Oct 12 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
Mar 28 Javascript
详解利用jsx写vue组件的方法示例
Jul 17 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
Aug 16 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 Javascript
vue.js实现左边导航切换右边内容
Oct 21 Javascript
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
vue 输入电话号码自动按3-4-4分割功能的实现代码
Apr 30 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+MySQL的聊天室设计
2006/10/09 PHP
让你的网站首页自动选择语言转跳
2006/12/06 PHP
PHP运行时强制显示出错信息的代码
2011/04/20 PHP
php按百分比生成缩略图的代码分享
2014/05/10 PHP
PHP的pcntl多进程用法实例
2015/03/19 PHP
JavaScript 学习初步 入门教程
2010/03/25 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
2012/02/03 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
2012/02/27 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
2014/06/19 Javascript
javascript获取checkbox复选框获取选中的选项
2014/08/12 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
2014/10/29 Javascript
Node.js中的模块机制学习笔记
2014/11/04 Javascript
JavaScript设计模式之建造者模式介绍
2014/12/28 Javascript
jQuery实现的登录浮动框效果代码
2015/09/26 Javascript
javascript从定义到执行 你不知道的那些事
2016/01/04 Javascript
理解JS事件循环
2016/01/07 Javascript
jQuery加密密码到cookie的实现代码
2017/04/18 jQuery
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
关于Python面向对象编程的知识点总结
2017/02/14 Python
django初始化数据库的实例
2018/05/27 Python
Python Selenium 之关闭窗口close与quit的方法
2019/02/13 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
python同步两个文件夹下的内容
2019/08/29 Python
opencv之为图像添加边界的方法示例
2019/12/26 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
如何使用Cython对python代码进行加密
2020/07/08 Python
python 如何引入协程和原理分析
2020/11/30 Python
CSS3按钮鼠标悬浮实现光圈效果源码
2016/09/11 HTML / CSS
JavaScript获取当前url根目录(路径)
2014/02/19 面试题
班级光棍节联谊会策划书
2014/10/10 职场文书
财务人员岗位职责
2015/02/03 职场文书
公司团队口号霸气押韵
2015/12/24 职场文书
如何优化vue打包文件过大
2022/04/13 Vue.js