网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 原生js制作日历控件实例分享
内容
    本文实例为大家分享了js实现一个简单的日历控件，供大家参考，具体内容如下
    效果图：
    名单
    具体代码：
    <!DOCTYPE html>
    <html>
    <head>
     <meta charset="utf-8">
     <title>date</title>
     <style type="text/css">
     *{ margin:0; padding:0;}
     a{ text-decoration:none; outline:none;}
     body a{outline:none;blr:expression(this.onFocus=this.blur());}
     img{ border:none;}
     ul{ list-style:none;}
     body{ color:#666666; font-size:14px; font-family:"微软雅黑"; background-color:#fff; height:100%; overflow-y:scroll;*overflow-y:inherit;}
     /*html{ height:100%;}*/
     .clearfix:after{ content:"."; display:block; height:0; clear:both; overflow:hidden;}
     .clearfix{ zoom:1;}
     #box{width:350px; position:absolute;}
     #title{width:350px; height:50px;}
     #month{ float:left;width:60px; height:50px;text-align:center;cursor:pointer;line-height:50px;}
     #year{float:left;width:80px; height:50px;text-align:center;cursor:pointer;line-height:50px;}
     #week{ width:350px;height:50px;}
     #week div{ float:left; width:48px; height:48px; margin:1px; background:#C90; color:#fff; text-align:center; line-height:48px; cursor:pointer;}
     #con{ width:350px;}
     #con div{ float:left; width:48px; height:48px; margin:1px; background:#CCC; color:#333; text-align:center; line-height:48px; cursor:pointer;}
     #con .edate{background:#999;}
     #con .edate:hover{background:#09F; color:#fff;}
     #con div.now{background:#09F; color:#fff;}
     #prevmonth,#nextmonth,#prevyear,#nextyear{float:left;width:50px; height:50px;text-align:center;cursor:pointer;line-height:50px;}
     #btns{width:350px; height:40px;}
     #nowtime{ float:left; margin:5px; height:30px; line-height:30px; padding:0 5px; background:#09F; cursor:pointer; border-radius:5px;}
     #nowtime:hover{background:#ddd;}
     #cleartime{float:left; margin:5px; height:30px; line-height:30px; padding:0 5px; background:#09F; cursor:pointer; border-radius:5px;}
     </style>
    </head>
    <body>
     <p>选择日期：<input type="text" id="date" value=""/></p>
    </body>
    <script type="text/javascript">
    window.onload=function(){ 
     //创建日历控件基本结构 
     var obody=document.body;
     createbox();
     function createbox(){
      var ddbox=document.createElement("div");
      ddbox.id="box";
      ddbox.style.display="none";
      var str="";
      str+='<div id="title"><div id="prevyear"><<</div><div id="prevmonth"><</div><div id="month"></div><div id="year"></div><div id="nextmonth">></div><div id="nextyear">>></div></div>';
      str+='<div id="week"><div>日</div><div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div></div>';
      str+='<div id="con"></div>';
      str+='<div id="btns"><div id="nowtime">当前时间</div><div id="cleartime">清空</div></div>';
      ddbox.innerHTML=str;
      obody.appendChild(ddbox);   
     };
     //===================get ele=============================== 
     var omonth=document.getElementById("month");
     var oyear=document.getElementById("year");
     var con=document.getElementById("con");
     var prevmonth=document.getElementById("prevmonth");
     var nextmonth=document.getElementById("nextmonth");
     var prevyear=document.getElementById("prevyear");
     var nextyear=document.getElementById("nextyear");
     var nowtime=document.getElementById("nowtime");
     var date=document.getElementById("date");
     var box=document.getElementById("box");
     var cleartime=document.getElementById("cleartime");
     //===================show date===============================
     date.onfocus=function(){//显示控件
      var datel=this.getBoundingClientRect().left;
      var datet=this.getBoundingClientRect().top+40;
      box.style.left=datel+"px";
      box.style.top=datet+"px";
      box.style.display="block";
     }; 
     con.onclick=function(event){
      if(event.target.tagName=="DIV" && event.target.nodeType=="1" && hasclass(event.target.className,"edate")){
       date.value="";
       date.value=dateObj.getFullYear()+"-"+toyear(dateObj)+"-"+event.target.innerHTML;
       box.style.display="none";
      };
     };
     cleartime.onclick=function(event){
      date.value="";
     };
     //===================set year month===============================
     //默认时间对象
     var dateObj = new Date();
     //动态控制
     prevmonth.onclick=function(){//上一月
      var ddm=null;
      var ddy=null;
      if((dateObj.getMonth()-1)==-1){
       ddm=11;
       ddy=dateObj.getFullYear()-1;
      }else{
       ddm=dateObj.getMonth()-1;
       ddy=dateObj.getFullYear();
      };
      dateObj.setFullYear(ddy);
      dateObj.setMonth(ddm);
      omonth.innerHTML=toyear(dateObj)+"月";
      oyear.innerHTML=dateObj.getFullYear()+"年";
      remove();
      oneweek=oneyearoneday(dateObj);
      alld=alldays(dateObj);
      nowd=nowday(dateObj);
      init(oneweek,alld,nowd);
     };
     nextmonth.onclick=function(){//下一月
      var ddm=null;
      var ddy=null;
      if((dateObj.getMonth()+1)==12){
       ddm=0;
       ddy=dateObj.getFullYear()+1;
      }else{
       ddm=dateObj.getMonth()+1;
       ddy=dateObj.getFullYear();
      };
      dateObj.setFullYear(ddy);
      dateObj.setMonth(ddm);
      omonth.innerHTML=toyear(dateObj)+"月";
      oyear.innerHTML=dateObj.getFullYear()+"年";
      remove();
      oneweek=oneyearoneday(dateObj);
      alld=alldays(dateObj);
      nowd=nowday(dateObj);
      init(oneweek,alld,nowd);  
     };
     prevyear.onclick=function(){//上一年
      var ddy=dateObj.getFullYear()-1;
      dateObj.setFullYear(ddy);
      oyear.innerHTML=dateObj.getFullYear()+"年";
      remove();
      oneweek=oneyearoneday(dateObj);
      alld=alldays(dateObj);
      nowd=nowday(dateObj);
      init(oneweek,alld,nowd);
     };
     nextyear.onclick=function(){//下一年
      var ddy=dateObj.getFullYear()+1;
      dateObj.setFullYear(ddy);
      oyear.innerHTML=dateObj.getFullYear()+"年";
      remove();
      oneweek=oneyearoneday(dateObj);
      alld=alldays(dateObj);
      nowd=nowday(dateObj);
      init(oneweek,alld,nowd);  
     }; 
     //返回到今时今日
     nowtime.onclick=function(){
      var dddate=new Date();
      var ddm=dddate.getMonth();
      var ddy=dddate.getFullYear();
      dateObj.setFullYear(ddy);
      dateObj.setMonth(ddm);
      omonth.innerHTML=toyear(dateObj)+"月";
      oyear.innerHTML=dateObj.getFullYear()+"年";
      remove();
      oneweek=oneyearoneday(dateObj);
      alld=alldays(dateObj);
      nowd=nowday(dateObj);
      init(oneweek,alld,nowd);  
     };
     //年月获取 
     var year=dateObj.getFullYear();
     var month=toyear(dateObj);//0是12月
     //月年的显示
     omonth.innerHTML=month+"月";
     oyear.innerHTML=year+"年";
     //===================set day===============================
      
     //获取本月1号的周值
     var oneweek=oneyearoneday(dateObj);
     //本月总日数
     var alld=alldays(dateObj);
     //当前是几
     var nowd=nowday(dateObj);
     //初始化显示本月信息
     init(oneweek,alld,nowd);
     //===================function===============================
     //有无指定类名的判断
     function hasclass(str,cla){
      var i=str.search(cla);
      if(i==-1){
       return false;
      }else{
       return true;
      };
     };
     //初始化日期显示方法
     function remove(){
      con.innerHTML="";
     };
     function init(oneweek,alld,nowd){
      for(var i=1;i<=oneweek;i++){//留空
       var eday=document.createElement("div");
       eday.innerHTML="";
       con.appendChild(eday);
      };
      for(var i=1;i<=alld;i++){//正常区域
       var eday=document.createElement("div");
       if(i==nowd){     
        eday.innerHTML=i;
        eday.className="now edate";
        con.appendChild(eday);
       }else{
        eday.innerHTML=i;
        eday.className="edate";
        con.appendChild(eday);
       };
      };
     };
     //获取本月1号的周值
     function oneyearoneday(dateObj){
      var oneyear = new Date();
      var year=dateObj.getFullYear();
      var month=dateObj.getMonth();//0是12月
      oneyear.setFullYear(year);
      oneyear.setMonth(month);//0是12月
      oneyear.setDate(1);
      return oneyear.getDay();  
     };
     //当前是几
     function nowday(dateObj){
      return dateObj.getDate();
     };
     //获取本月总日数方法
     function alldays(dateObj){
      var year=dateObj.getFullYear();
      var month=dateObj.getMonth();
      if(isLeapYear(year)){//闰年
       switch(month) { 
       case 0: return "31"; break; 
       case 1: return "29"; break; //2月
       case 2: return "31"; break; 
       case 3: return "30"; break; 
       case 4: return "31"; break; 
       case 5: return "30"; break; 
       case 6: return "31"; break; 
       case 7: return "31"; break; 
       case 8: return "30"; break; 
       case 9: return "31"; break; 
       case 10: return "30"; break; 
       case 11: return "31"; break;   
       default:  
       };
      }else{//平年
       switch(month) { 
       case 0: return "31"; break; 
       case 1: return "28"; break; //2月 
       case 2: return "31"; break; 
       case 3: return "30"; break; 
       case 4: return "31"; break; 
       case 5: return "30"; break; 
       case 6: return "31"; break; 
       case 7: return "31"; break; 
       case 8: return "30"; break; 
       case 9: return "31"; break; 
       case 10: return "30"; break; 
       case 11: return "31"; break;   
       default:  
       };   
      };
     };
     //闰年判断函数
     function isLeapYear(year){ 
      if( (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0)){
       return true;
      }else{
       return false;
      }; 
     };
     //月份转化方法
     function toyear(dateObj){ 
      var month=dateObj.getMonth()
      switch(month) { 
      case 0: return "1"; break; 
      case 1: return "2"; break; 
      case 2: return "3"; break; 
      case 3: return "4"; break; 
      case 4: return "5"; break; 
      case 5: return "6"; break; 
      case 6: return "7"; break; 
      case 7: return "8"; break; 
      case 8: return "9"; break; 
      case 9: return "10"; break; 
      case 10: return "11"; break; 
      case 11: return "12"; break;   
      default: 
      }; 
     };
    };
    </script>
    </html>
    希望本文所述对大家学习javascript程序设计有所帮助。
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/23 3:40:20