课程咨询 :186 8716 1620      qq:2066486918

昆明Java培训 > 达内新闻 > javascript实现日历控件
  • javascript实现日历控件

    发布:昆明Java培训      来源:达内新闻      时间:2016-03-09


  •    google绚丽的日历控件有知道的小伙伴们, 昆明java培训带大家来实现一个,虽然功能和效果比不上, 但重要的是实现的过程.

      下面是要实现的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 ;

    以下是实现的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>

         

         代码比较冗长,如果哪位同学有更好的办法,请昆明java培训中心多多交流啊,我们需要集思广益。

     


     

    推荐文章

上一篇:js在子窗口ModalDialog中操作

下一篇:javascript仿qq界面的折叠菜单

最新开班日期  |  更多

Java--零基础全日制班

Java--零基础全日制班

开班日期:11/30

Java--零基础业余班

Java--零基础业余班

开班日期:11/30

Java--周末提升班

Java--周末提升班

开班日期:11/30

Java--零基础周末班

Java--零基础周末班

开班日期:11/30

  • 网址:http://km .java.tedu.cn      地址:昆明市官渡区春城路62号证券大厦附楼6楼
  • 课程培训电话:186 8716 1620      qq:2066486918    全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tedu.cn
  • 2001-2016 达内国际公司(TARENA INTERNATIONAL,INC.) 版权所有 京ICP证08000853号-56