javascript实现日历控件(年月日关闭按钮)


Posted in Javascript onDecember 12, 2012

经常使用google的朋友一定对google绚丽的日历控件记忆犹新吧,那我们也来实现一个,虽然功能和效果比不上,但重要的是实现的过程.
下面是要实现的html结构:
<div id="a"><div id="head"><span id="yface">年:<select id="year"></select></span><span id="mface">月:<select id="month"></select></span></div><div id="biaoti"></div><div id="body"></div></div>
先说一下日历查询的算法:
w=y+parseInt(y/4)+parseInt(c/4)-2*c+parseInt(26*(m+1)/10)+d-1 ;
下面是详细的说明过程,有兴趣的可以去看下: 
https://3water.com/article/32572.htm
以下是实现的javascript代码:

sx.activex.calender={ 
bind:function(target){ 
var a=document.createElement("div"); 
var head=document.createElement("div"); 
var biaoti=document.createElement("div"); 
var select=document.createElement("select"); 
var yface=document.createElement("span"); 
var mface=document.createElement("span"); 
var body=document.createElement("div"); 
var select1=document.createElement("select"); 
yface.appendChild(select); 
mface.appendChild(select1); 
head.appendChild(yface); 
head.appendChild(mface); 
a.appendChild(head); 
a.appendChild(biaoti); 
a.appendChild(body); 
yface.insertBefore(document.createTextNode("年 "),yface.firstChild) 
mface.insertBefore(document.createTextNode("月 "),mface.firstChild) 
a.style.position="absolute"; 
biaoti.style.height="10%"; 
for(var i=0;i<7;i++){ 
var can=document.createElement("span") 
can.style.width="14%"; 
can.style.height="100%"; 
can.style.textAlign="center"; 
biaoti.appendChild(can); 
} 
biaoti.all[0].innerText="日" 
biaoti.all[1].innerText="一" 
biaoti.all[2].innerText="二" 
biaoti.all[3].innerText="三" 
biaoti.all[4].innerText="四" 
biaoti.all[5].innerText="五" 
biaoti.all[6].innerText="六" 
head.style.height="20%"; 
a.style.position="absolute"; 
a.style.height="200px"; 
a.style.width="302px"; 
a.style.border="1px red solid"; 
yface.style.width="50%"; 
yface.style.padding="5px"; 
yface.style.height="100%"; 
select.style.width="80%"; 
for(var i=1960;i<2010;i++){ 
var option=document.createElement("option"); 
option.text=i; 
select.add(option); 
} 
mface.style.width="50%"; 
mface.style.padding="5px"; 
mface.style.height="100%"; 
select1.style.width="80%"; 
for(var i=1;i<=12;i++){ 
var option=document.createElement("option"); 
option.text=i; 
select1.add(option); 
} 
body.style.height="70%"; 
for(var i=0;i<42;i++){ 
var span=document.createElement("span"); 
span.style.width="14%"; 
span.style.height="16%"; 
span.style.textAlign="center"; 
span.onmouseover=function(){ 
this.style.cursor="hand"; 
this.tempcolor=this.style.backgroundColor; 
this.style.backgroundColor="lightblue"; 
} 
span.onmouseout=function(){ 
this.style.backgroundColor=this.tempcolor; 
} 
span.onclick=function(){ 
target.value=select.options[select.selectedIndex].text+"年"+select1.options[select1.selectedIndex].text+"月"+this.innerText+"日"; 
a.parentNode.removeChild(a); 
} 
body.appendChild(span); 
} 
select.onchange=function(){ 
for(var o in body.all){ 
body.all[o].innerText=""; 
if(o.toString()!="length") 
body.all[o].style.backgroundColor=""; 
} 
var year1=this.options[this.selectedIndex].text; 
var month1=select1.options[select1.selectedIndex].text; 
var y=parseInt(year1.substr(2,2)-0); 
var c=parseInt(year1.substr(0,2));; 
var m=parseInt(month1);; 
m=m>=3?m:(y=y-1,m+12); 
var d=1; 
var w=y+parseInt(y/4)+parseInt(c/4)-2*c+parseInt(26*(m+1)/10)+d-1 ; 
if(w<0) w=w+700; 
w=w%7; 
switch(parseInt(month1)){ 
case 2: 
if(parseInt(year1)%4==0) 
var r=29; 
else 
var r=28; 
var day=w; 
for(var d=1;d<=r;d++){ 
body.all[day++].innerText=d; 
if(parseInt(year1)==(new Date()).getYear() && parseInt(month1)==(new Date()).getMonth()+1 && d==(new Date()).getDate()) 
body.all[day-1].style.backgroundColor="red"; 
body.all[41].innerText="关闭"; 
} 
break; 
default: if(parseInt(month1)==1 || parseInt(month1)==3 || parseInt(month1)==5 || parseInt(month1)==7 || parseInt(month1)==8 || parseInt(month1)==10 || parseInt(month1)==12) 
var r=31; 
else 
var r=30; 
var day=w; 
for(var d=1;d<=r;d++){ 
body.all[day++].innerText=d; 
if(parseInt(year1)==(new Date()).getYear() && parseInt(month1)==(new Date()).getMonth()+1 && d==(new Date()).getDate()) 
body.all[day-1].style.backgroundColor="red"; 
body.all[41].innerText="关闭"; 
} 
break; 

} 
} 
select1.onchange=function(){ 
for(var o in body.all){ 
body.all[o].innerText=""; 
if(o.toString()!="length") 
body.all[o].style.backgroundColor=""; 
} 
var month1=this.options[this.selectedIndex].text; 
var year1=select.options[select.selectedIndex].text; 
var y=parseInt(year1.substr(2,2)-0); 
var c=parseInt(year1.substr(0,2)); 
var m=parseInt(month1); 
m=m>=3?m:(y=y-1,m+12); 
var d=1; 
var w=y+parseInt(y/4)+parseInt(c/4)-2*c+parseInt(26*(m+1)/10)+d-1 ; 
if(w<0) w=w+700; 
w=w%7; 
switch(parseInt(month1)){ 
case 2: 
if(parseInt(year1)%4==0) 
var r=29; 
else 
var r=28; 
var day=w; 
for(var d=1;d<=r;d++){ 
body.all[day++].innerText=d; 
if(parseInt(year1)==(new Date()).getYear() && parseInt(month1)==(new Date()).getMonth()+1 && d==(new Date()).getDate()) 
body.all[day-1].style.backgroundColor="red"; 
body.all[41].innerText="关闭"; 
} 
break; 
default: 
if(parseInt(month1)==1 || parseInt(month1)==3 || parseInt(month1)==5 || parseInt(month1)==7 || parseInt(month1)==8 || parseInt(month1)==10 || parseInt(month1)==12) 
var r=31; 
else 
var r=30; 
var day=w; 
for(var d=1;d<=r;d++){ 
body.all[day++].innerText=d; 
if(parseInt(year1)==(new Date()).getYear() && parseInt(month1)==(new Date()).getMonth()+1 && d==(new Date()).getDate()) 
body.all[day-1].style.backgroundColor="red"; 
body.all[41].innerText="关闭"; 
} 
break; 

} 
} 
var date=new Date(); 
for(var s1=0;s1<select.options.length;s1++){ 
if(parseInt(select.options[s1].text)==parseInt(date.getYear())){ 
select.options[s1].selected=true; 
break; 
} 
} 
for(var s2=0;s2<select1.options.length;s2++){ 
if(parseInt(select1.options[s2].text)==parseInt(date.getMonth())+1){ 
select1.options[s2].selected=true; 
break; 
} 
} 
select.onchange(); 
for(var i in body.all){ 
if(body.all[i].innerText==date.getDate()){ 
body.all[i].style.backgroundColor="red"; 
} 
} 
target.onfocus=function(){ 
document.body.appendChild(a); 
a.style.left=target.offsetLeft+"px";; 
a.style.top=target.offsetTop+target.offsetHeight+"px"; 
} 
target.onblur=function(){ 
if(a && window.event.clientY>a.offsetTop && window.event.clientY<a.offsetTop+a.offsetHeight && window.event.clientX>a.offsetLeft && window.event.clientX<a.offsetLeft+a.offsetWidth) 
return; 
if(!a) return; 
a.parentNode.removeChild(a); 
} 
body.all[41].innerText="关闭"; 
body.all[41].onclick=function(){ 
this.style.backgroundColor=""; 
a.parentNode.removeChild(a); 
} 
} 
}

入口参数是要绑定的html对象,这里一般是text input.
下面是调用代码:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script src="kongjian.js"></script>
<input type="text" id="a">
<script>
sx.activex.calender.bind(document.getElementById("a"));
</script>
</body>
</html>
差不多就这样,代码比较冗长,不是很好,如果哪位朋友有更好的办法,请与我多多交流啊.
Javascript 相关文章推荐
DWR实现模拟Google搜索效果实现原理及代码
Jan 30 Javascript
有关于JS辅助函数inherit()的问题
Apr 07 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
Aug 07 Javascript
利用Node.js制作爬取大众点评的爬虫
Sep 22 Javascript
JS中常用的正则表达式
Sep 29 Javascript
JavaScript的继承实现小结
May 07 Javascript
JS实现前端缓存的方法
Sep 21 Javascript
vue.js 实现点击展开收起动画效果
Jul 07 Javascript
ES6 系列之 Generator 的自动执行的方法示例
Oct 19 Javascript
利用Vue构造器创建Form组件的通用解决方法
Dec 03 Javascript
Javascript删除数组里的某个元素
Feb 28 Javascript
angular6开发steps步骤条组件
Jul 04 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
Dec 11 #Javascript
用js判断页面是否加载完成实现代码
Dec 11 #Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
Dec 11 #Javascript
IE6浏览器下resize事件被执行了多次解决方法
Dec 11 #Javascript
什么是json和jsonp,jQuery json实例详详细说明
Dec 11 #Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
Dec 11 #Javascript
javascript中window.event事件用法详解
Dec 11 #Javascript
You might like
深入理解PHP原理之Session Gc的一个小概率Notice
2011/04/12 PHP
利用PHP实现智能文件类型检测的实现代码
2011/08/02 PHP
php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法
2013/09/28 PHP
CI框架源码解读之URI.php中_fetch_uri_string()函数用法分析
2016/05/18 PHP
PHP实现原生态图片上传封装类方法
2016/11/08 PHP
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
JavaScript中的包装对象介绍
2015/01/27 Javascript
JavaScript实现MIPS乘法模拟的方法
2015/04/17 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
jQuery按需加载轮播图(web前端性能优化)
2017/02/17 Javascript
jQuery给表格添加分页效果
2017/03/02 Javascript
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
vue中的适配px2rem示例代码
2018/11/19 Javascript
js常用正则表达式集锦
2019/05/17 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
[01:00:25]NB vs Secret 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
python装饰器使用方法实例
2013/11/21 Python
用Python的Django框架编写从Google Adsense中获得报表的应用
2015/04/17 Python
python中redis的安装和使用
2016/12/04 Python
Python数据结构与算法之图的最短路径(Dijkstra算法)完整实例
2017/12/12 Python
用pycharm开发django项目示例代码
2019/06/13 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
Python趣味入门教程之循环语句while
2020/08/26 Python
Python全局变量与global关键字常见错误解决方案
2020/10/05 Python
使用CSS3设计地图上的雷达定位提示效果
2016/04/05 HTML / CSS
HTML5对比HTML4的主要改变和改进总结
2016/05/27 HTML / CSS
韩国11街:11STREET
2018/03/27 全球购物
MONNIER Frères英国官网:源自巴黎女士奢侈品配饰电商平台
2018/12/06 全球购物
中专毕业生自我鉴定范文
2013/11/09 职场文书
大学生简历的个人自我评价
2013/12/04 职场文书
魅力教师事迹材料
2014/01/10 职场文书
应届优秀本科大学毕业生自我鉴定
2014/01/21 职场文书
《故乡》教学反思
2014/04/10 职场文书
教师考核评语大全
2014/12/31 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书
css3 实现文字闪烁效果的三种方式示例代码
2021/04/25 HTML / CSS