纯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 相关文章推荐
ExtJS Window 最小化的一种方法
Nov 18 Javascript
window.js 主要包含了页面的一些操作
Dec 23 Javascript
JavaScript flash复制库类 Zero Clipboard
Jan 17 Javascript
用JavaScript修改CSS属性的代码
May 06 Javascript
window.onload和$(function(){})的区别介绍
Oct 30 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
Nov 26 Javascript
JavaScript 学习笔记之语句
Jan 14 Javascript
详解JavaScript的策略模式编程
Jun 24 Javascript
浅析jquery数组删除指定元素的方法:grep()
May 19 Javascript
如何根据业务封装自己的功能组件
Apr 19 Javascript
解决vue-cli 打包后自定义动画未执行的问题
Nov 12 Javascript
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
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中显示格式化的用户输入
2006/10/09 PHP
php 中include()与require()的对比
2006/10/09 PHP
开发大型 PHP 项目的方法
2007/01/02 PHP
php下载远程文件类(支持断点续传)
2008/11/14 PHP
javascript 动态数据下的锚点错位问题解决方法
2008/12/24 Javascript
让IE6支持min-width和max-width的方法
2010/06/25 Javascript
理清apply(),call()的区别和关系
2011/08/14 Javascript
js返回上一页并刷新代码整理
2012/12/21 Javascript
自定义刻度jQuery进度条及插件
2015/09/02 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
深入理解JQuery循环绑定事件
2016/06/02 Javascript
手机Web APP如何实现分享多平台功能
2016/08/19 Javascript
详解vue-validator(vue验证器)
2017/01/16 Javascript
微信小程序实现团购或秒杀批量倒计时
2020/11/01 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
详解react阻止无效重渲染的多种方式
2018/12/11 Javascript
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
JavaScript碰撞检测原理及其实现代码
2020/03/12 Javascript
Python CSV模块使用实例
2015/04/09 Python
python 添加用户设置密码并发邮件给root用户
2016/07/25 Python
PyCharm 常用快捷键和设置方法
2017/12/20 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
python3中sorted函数里cmp参数改变详解
2020/03/12 Python
python中str内置函数用法总结
2020/12/27 Python
利用CSS3实现圆角的outline效果的教程
2015/06/05 HTML / CSS
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
工业学校毕业生自荐书
2014/01/03 职场文书
同事吵架检讨书
2014/02/05 职场文书
企业文化标语口号
2014/06/09 职场文书
计算机系统管理员求职信
2014/06/20 职场文书
公司董事长助理工作职责
2014/07/12 职场文书
java基础——多线程
2021/07/03 Java/Android
nginx rewrite功能使用场景分析
2022/05/30 Servers
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技