纯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 相关文章推荐
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
Apr 20 Javascript
用Javascript实现Sleep暂停功能代码
Sep 03 Javascript
JavaScript中几种常见排序算法小结
Feb 22 Javascript
JavaScript Math.ceil() 函数使用介绍
Dec 11 Javascript
10个JavaScript中易犯小错误
Feb 14 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
Jul 25 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
Dec 05 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
Jan 17 Javascript
Bootstrap入门教程一Hello Bootstrap初识
Mar 02 Javascript
再谈Angular4 脏值检测(性能优化)
Apr 23 Javascript
vue项目持久化存储数据的实现代码
Oct 01 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
Nov 01 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
Syphon 秘笈
2021/03/03 冲泡冲煮
dede3.1分页文字采集过滤规则详说(图文教程)续二
2007/04/03 PHP
PHP Parse Error: syntax error, unexpected $end 错误的解决办法
2012/06/05 PHP
JS 自定义带默认值的函数
2011/07/21 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
Javascript 数组排序详解
2014/10/22 Javascript
jQuery继承extend用法详解
2016/10/10 Javascript
jquery-mobile基础属性与用法详解
2016/11/23 Javascript
EasyUI学习之DataGird分页显示数据
2016/12/29 Javascript
详解Angular5 服务端渲染实战
2018/01/04 Javascript
ES6入门教程之let、const的使用方法
2019/04/13 Javascript
javascript实现简易聊天室
2019/07/12 Javascript
详解Typescript里的This的使用方法
2021/01/08 Javascript
[05:05]给小松五分钟系列 第二期介绍为什么打DOTA2
2014/07/02 DOTA
跟老齐学Python之编写类之四再论继承
2014/10/11 Python
在Django中同时使用多个配置文件的方法
2015/07/22 Python
python flask安装和命令详解
2019/04/02 Python
Python3.5 Pandas模块之Series用法实例分析
2019/04/23 Python
Python爬取视频(其实是一篇福利)过程解析
2019/08/01 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
python中Lambda表达式详解
2019/11/20 Python
TFRecord格式存储数据与队列读取实例
2020/01/21 Python
有趣的Python图片制作之如何用QQ好友头像拼接出里昂
2020/04/22 Python
获取CSDN文章内容并转换为markdown文本的python
2020/09/06 Python
Spy++的使用方法及下载教程
2021/01/29 Python
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
27个经典Linux面试题及答案,你知道几个?
2014/03/11 面试题
党校学习思想汇报
2014/01/06 职场文书
英语感恩演讲稿
2014/01/14 职场文书
初二学习计划书范文
2014/04/27 职场文书
对照检查剖析材料
2014/09/30 职场文书
防汛工作情况汇报
2014/10/28 职场文书
2016年高校自主招生自荐信范文
2015/03/24 职场文书
《卖火柴的小女孩》教学反思
2016/02/19 职场文书
会计专业自荐信范文
2019/05/22 职场文书
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/06 其他游戏