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 相关文章推荐
javascript 用原型继承来实现对象系统
Mar 22 Javascript
初学js 新节点的创建 删除 的步骤
Jul 04 Javascript
Jquery 点击按钮自动高亮实现原理及代码
Apr 25 Javascript
jquery学习总结(超级详细)
Sep 04 Javascript
js获取当前日期前七天的方法
Feb 28 Javascript
基于Javascript实现弹出页面效果
Jan 01 Javascript
微信小程序 picker-view 组件详解及简单实例
Jan 10 Javascript
BootStrap表单验证实例代码
Jan 13 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
Aug 25 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
Apr 29 Javascript
react PropTypes校验传递的值操作示例
Apr 28 Javascript
javascript实现扫雷简易版
Aug 18 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
ThinkPHP模板范围判断输出In标签与Range标签用法详解
2014/06/30 PHP
php实现的简单日志写入函数
2015/03/31 PHP
php+mysql实现简单的增删改查功能
2015/07/13 PHP
PHP中常用的数组操作方法笔记整理
2016/05/16 PHP
PHP中串行化用法示例
2016/11/16 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
js获取滚动距离的方法
2015/05/30 Javascript
js闭包所用的场合以及优缺点分析
2015/06/22 Javascript
跟我学习javascript的闭包
2015/11/16 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
bootstrap table sum总数量统计实现方法
2017/10/29 Javascript
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
JS实现的简单tab切换功能完整示例
2019/06/20 Javascript
优雅的使用javascript递归画一棵结构树示例代码
2019/09/22 Javascript
layui 上传文件_批量导入数据UI的方法
2019/09/23 Javascript
vue点击自增和求和的实例代码
2019/11/06 Javascript
JavaScript回调函数callback用法解析
2020/01/14 Javascript
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
python解决字典中的值是列表问题的方法
2013/03/04 Python
用Python编写脚本使IE实现代理上网的教程
2015/04/23 Python
在unittest中使用 logging 模块记录测试数据的方法
2018/11/30 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
python 标准差计算的实现(std)
2019/07/29 Python
Python+Tensorflow+CNN实现车牌识别的示例代码
2019/10/11 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
python单例设计模式实现解析
2020/01/07 Python
HTML5 device access 设备访问详解
2018/05/24 HTML / CSS
凯伦·米莲女装网上商店:Karen Millen
2017/11/07 全球购物
英国儿童设计师服装的领先零售商:Base
2019/03/17 全球购物
岗位说明书怎么写
2014/07/30 职场文书
上班离岗检讨书
2014/09/10 职场文书
实习单位鉴定意见
2015/06/04 职场文书
总经理年会致辞
2015/07/29 职场文书
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js