憨厚生

----Java's Slave----
***Java's Host***
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  165 随笔 :: 17 文章 :: 90 评论 :: 0 Trackbacks
自己写的日期小控件!

利用业余时间写了个日期小控件,写出来请大家指正一下!
以下是相关代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>date</title>
</head>
<body>
<input name="text" type="text" id="textid" onclick="labelOnClick()" value="click me" />
<script language="javascript">
  /******************************************************************/
  with(document){
writeln("<div onclick='event.cancelBubble=true' style='POSITION:absolute;visibility:hidden;border:1px ridge;width:10;z-index:100;' id=\"divid\">");
writeln("<table style=\"width:130px\" border='0' bgcolor='#6699cc' bordercolor='#0066FF' bordercolordark='#FFFFFF'>");
writeln(" <tr>");
writeln("<td><input type=\"button\" value=\"<\" onclick=reduce() /></td>");
writeln("<td><select size=\"1\" id=\"year\" onchange=\"yearOnchange();\">");
  for(var i=1900;i<=2050;i++){
     if(new Date().getFullYear()==i)
        document.writeln("<option value="+i+" selected=\"selected\">"+i+"年</option>");
     else
        document.writeln("<option value="+i+">"+i+"年</option>"); 
     }
writeln("</select></td><td><select size=\"1\" id=\"month\" onchange=\"monthOnchange();\">");
   for(var i=0;i<12;i++){
     if(new Date().getMonth()==i )
       document.writeln("<option value="+i+" selected=\"selected\">"+(i+1)+"月"+"</option>");
     else
       document.writeln("<option value="+i+">"+(i+1)+"月"+"</option>");
      }
writeln("</select></td>");
writeln("<td><input type=\"button\" value=\">\" onclick=\"add()\"/></td></tr></table>");
writeln("<table id=\"tableidid\" style=\"width:130px\">"
          +"<tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>"
    +"<tr><td>p</td><td>p</td><td>p</td><td>p</td><td>p</td><td>p</td><td>p</td></tr>"
    +"<tr><td>p</td><td>p</td><td>p</td><td>p</td><td>p</td><td>p</td><td>p</td></tr>"
    +"<tr><td>p</td><td>p</td><td>p</td><td>p</td><td>p</td><td>p</td><td>p</td></tr>"
    +"<tr><td>p</td><td>p</td><td>p</td><td>p</td><td>p</td><td>p</td><td>p</td></tr>"
    +"<tr><td>p</td><td>p</td><td>p</td><td>p</td><td>p</td><td>p</td><td>p</td></tr>"
    +"</table>"
    +"<table align=\"center\"><tr><td>");
showDate();
writeln("</td></tr></table></div>")
  }
/******************************************************************/
function DateTd(table,rows_x,cells_y,dateValue,textValue){
  this.rows_number =rows_x;   //单元格所在的行数
  this.cells_number=cells_y;  //单元格所在的列数
  this.table       =table     //封装表格对象
  this.tableObj    =this.table.tableObj; //表格对象
  this.text        =textValue;//文本内容
  this.date        =dateValue;//2007-02-01
  this.day         =null     //星期
  this.td          =this.tableObj.rows[this.rows_number-1].cells[this.cells_number-1]; //单元格
  this.color       ="#000000";    //颜色[#000000 黑色,#FF0000 红色,#D6D6D6 灰色]
  this.background  ="#FFFFFF";    //背景颜色
 // this.checkEvent=false;         //是否添加onclick事件

  /******************************************************************/
  this.getText=Td_getText;
  this.setText=Td_setText;
  this.getDate=Td_getDate;
  this.setDate=Td_setDate;
  this.getDay =Td_getDay;
  this.setColor=Td_setColor;
  this.setBackGround=Td_setBackGround;
  /******************************************************************/
  this.checked=checked;//检查行、列数是否与实际相符合
  }
 
function Td_getText(){
     if(!this.checked())
     return false;  
     var dateTdText=this.tableObj.rows[this.rows_number-1].cells[this.cells_number-1].innerText;
  //return dateTdText;两个都可以
  return this.text;
}

function Td_setText(textValue){
    if(!this.checked())
     return false; 
     this.tableObj.rows[this.rows_number-1].cells[this.cells_number-1].innerText=textValue;
  this.text=textValue;
 }
 
function checked(){
//没有异常为true,有异常为false
     if(this.tableObj.rows.length<this.rows_number)
     return Function.Exception("注意:表格只有"+this.tableObj.rows.length+"行！");
     if(this.tableObj.rows[this.rows_number-1].cells.length<this.cells_number) 
     return Function.Exception("注意:表格第"+this.rows_number+"行只有"+
                      tableObj.rows[this.rows_number-1].cells.length+"列!"); 
  return true;//没有异常返回true     
}

function Td_getDate(){
 return  this.date;
}

function Td_setDate(dateValue){
//dateValue格式为2007-02-01，如果dateValue==null,则返回客户端的日期否则返回dateValue数值
//dateValue数值有可能从服务器端得到
if(dateValue!=null){
   var dateObj=dateValue.split("-");//alert(dateObj.length);
     if(dateObj.length!=3||dateObj[0].length!=4)
        return Function.Exception("日期格式应为YYYY-MM-DD");
  else
     this.date=dateObj[0]+"-"+ dateObj[1]+"-"+dateObj[2];
 }else{
   var dateObj=new Date();
   this.date=dateObj.getFullYear ()+"-"+(dateObj.getMonth()+1)+"-"+dateObj.getDate();
 }
}

function Td_getDay(){
  var dateArray=this.date.split("-");
  var dateObj=new Date(dateArray[0],dateArray[1]-1,dateArray[2]);
      this.day=dateObj.getDay();
      return  this.day;
}

function Td_setColor(){
    if(this.getDate().split("-")[1]==this.table.currentDate.getMonth()+1){
    if(this.getDay()==0||this.getDay()==6) this.color="#FF0000"; //alert(this.day);
   }else{
     this.color="#D6D6D6";
   }
  this.tableObj.rows[this.rows_number-1].cells[this.cells_number-1].style.color=this.color;
}

function Td_setBackGround(){
   var currentDate=new Date();
   var currentYear=currentDate.getFullYear();
   var currentMonth=currentDate.getMonth();
   var currentDateValue=currentDate.getDate();
   var dateArray=this.date.split("-");
   if(currentYear==dateArray[0]&&currentMonth==dateArray[1]-1&&currentDateValue==dateArray[2]){
   this.background="#CCFFFF";}
   this.tableObj.rows[this.rows_number-1].cells[this.cells_number-1].style.background=this.background;
}

Function.prototype.Exception=Exception;
function Exception(content){
  this.content=content;
  alert(content);
  return false;
}

/*****************************************************************************************/
function DateTable(name,id,_top,_left,_date){
  this.name=name;
  this.id=id;
  this.top=_top;
  this.left=_left;
  this.tableObj=document.getElementById(this.id);
  this.setTop=Table_setTop;
  this.setLeft=Table_setLeft;
  if(_date.split("-").length!=3)
    this.currentDate=new Date();
  else
    this.currentDate=new Date(_date.split("-")[0],_date.split("-")[1],_date.split("-")[2]);
  this.currentYear=this.currentDate.getFullYear();
  this.currentMonth=this.currentDate.getMonth();
  this.currentDateValue=this.currentDate.getDate();
 /******************************************************************/
  this.getRows=Table_getRows;    //行数
}

function Table_getRows(){
  var tableObj=document.getElementById(this.id);
  this.rows=tableObj.rows.length;
  return tableObj.rows.length;
}

function Table_setTop(){
  this.tableObj.style.position ="relative";
  this.tableObj.style.top= this.top+10;
  this.top=this.tableObj.style.top;
  return this.top;
}

function Table_setLeft(){
  this.tableObj.style.position ="relative";
  this.tableObj.style.left= this.left;
}

/*****************************************************************************************/ 
 
// tableOb.style.position ="relative";
   var DateArray=new Array();
   var eventArray=new Array();
   var tableOb=null;
function changeTable(date){
   /*此方法的用于操作每个单元格对象的相关属性赋值
    *
 */
   tableOb=new DateTable("name","tableidid",200,50,date);//"2007-3-7" 这里的3,表示的是4月
  
   var currentDate=tableOb.currentDate;
   var currentYear=currentDate.getFullYear();
   var currentMonth=currentDate.getMonth();
   var currentDateValue=currentDate.getDate();
   var currentDate1=new Date(currentYear,currentMonth,1);//月初
   var currentDate2=new Date(currentYear,currentMonth,getDays(currentYear,currentMonth+1));//月末
   var riqi=currentYear+"年"+(currentMonth+1)+"月"+currentDateValue+"日";
   var riqi1=currentDate1.getFullYear ()+"年"+(currentDate1.getMonth()+1)+"月"+currentDate1.getDate()+"日";
   var riqi2=currentDate2.getFullYear ()+"年"+(currentDate2.getMonth()+1)+"月"+currentDate2.getDate()+"日";
   var riqi3=currentYear+"-"+(currentMonth+1)+"-";
   /**********************************************************************/
    var before=currentDate1.getDay();
 var next =6-currentDate2.getDay();
   /**********************************************************************/
   var m=0,n=1;
   for(var i=1;i<tableOb.tableObj.rows.length;i++){
     if(i==1)
     for(var k=before,r=1;k>0;k--){
  DateArray[m]=new DateTd(tableOb,i+1,r++,null,null);
     DateArray[m].setText(getDays(currentYear,currentMonth)-k+1);
  DateArray[m].setDate(currentYear+"-"+currentMonth+"-"+DateArray[m].text);
  DateArray[m].setColor();
  if(eventArray.length>=m&&eventArray[m]!=true){
  DateArray[m].td.attachEvent("onclick",tdOnClick);
  eventArray[m]=true;
  }
  m++;
  }
 
     for(var j=0;j<tableOb.tableObj.rows[0].cells.length;j++){
  if(j==0&&i==1) j=currentDate1.getDay();
  DateArray[m]=new DateTd(tableOb,i+1,j+1,null,n);
     DateArray[m].setText(n);
  DateArray[m].setDate(riqi3+n);
  DateArray[m].setColor();
  DateArray[m].setBackGround();//alert(DateArray[m].checkEvent);
  if(eventArray.length>=m&&eventArray[m]!=true){
  DateArray[m].td.attachEvent("onclick",tdOnClick);
  eventArray[m]=true;
  }
  m++;
  n++;
  if(n>currentDate2.getDate())
  break;
      }
  
 if(i==tableOb.tableObj.rows.length-1)  
 for(var d=1;d<=next;d++){
  DateArray[m]=new DateTd(tableOb,i+1,7-next+d,null,d);
     DateArray[m].setText(d);
  DateArray[m].setDate(currentYear+"-"+(currentMonth+2)+"-"+DateArray[m].text);
  DateArray[m].setColor();
  if(eventArray.length>=m&&eventArray[m]!=true){
  DateArray[m].td.attachEvent("onclick",tdOnClick);
  eventArray[m]=true;
  }
  m++;
 }
  }
     } 
/*****************************************************************************************/ 
function divObj(id,date,tablename,tableid){//封装div对象
  this.id=id;
  this.div=document.getElementById(this.id);
  this.date=date;
  /*******************************************************/
  this.isHidden= checkHidden;
  this.DateTable=new DateTable(tablename,tableid,0,0,date);
  this.inint=divObjInint;
}

function checkHidden(){
  if(this.div.style.visibility=="hidden"||this.div.style.display=="none"){
     return true;
   }else{
     return false;}
}
/*****************************************************************************************/  
function getDays(year,month){
//得到每个月是多少天
var days=0;
var months=new Array("1","3","5","7","8","10","12");
var y=year%4;
if(month==2)
 if(year%4==0&&year%100!=0||year%400==0)
    days=29;
  else
    days=28; 
 for(var i=0;i<months.length;i++){
   if(months[i]==month){
      days=31;
   break;  
   }
 } 
 if(days==0)
   days=30;
  return days;
}
function tdOnClick(){//单击单元格触发函数
   var textValue=event.srcElement.innerText;
   var colorValue=event.srcElement.style.color;
   var m=null;
   for(var i=0;i<DateArray.length;i++){
     if(DateArray[i].text==textValue&&DateArray[i].color==colorValue.toUpperCase()){
  m=i;
  break;
  }
   }
   //alert(DateArray[m].date);
   remain (DateArray[m]);
   }
  
  
 function remain (Obj){
  document.getElementById("textid").value=Obj.date;
  if(obj.isHidden()==false){//再次点击,div隐藏
      document.getElementById(obj.id).style.visibility="hidden";
   }
 }

  
 function reduce(){
   var yearoptions=document.getElementById("year");
   var year=yearoptions.options[yearoptions.selectedIndex].value;
   var monthoptions=document.getElementById("month").options;
       if(monthoptions.selectedIndex>0)
       monthoptions.selectedIndex= monthoptions.selectedIndex-1;
   var month= document.getElementById("month").options[monthoptions.selectedIndex].value;  
   changeTable(year+"-"+month+"-"+new Date().getDate());
 }
  
function add(){
   var yearoptions=document.getElementById("year");
   var year=yearoptions.options[yearoptions.selectedIndex].value;
   var monthoptions=document.getElementById("month").options;
       if(monthoptions.selectedIndex<11)
       monthoptions.selectedIndex= monthoptions.selectedIndex+1;
   var month= document.getElementById("month").options[monthoptions.selectedIndex].value;
   changeTable(year+"-"+month+"-"+new Date().getDate());
}

function yearOnchange(){
   var yearoptions=document.getElementById("year");
   var year=yearoptions.options[yearoptions.selectedIndex].value;
   var monthoptions=document.getElementById("month").options;
   var month= document.getElementById("month").options[monthoptions.selectedIndex].value;
   changeTable(year+"-"+month+"-"+new Date().getDate());
}

function monthOnchange(){
   var yearoptions=document.getElementById("year");
   var year=yearoptions.options[yearoptions.selectedIndex].value;
   var monthoptions=document.getElementById("month").options;
   var month= document.getElementById("month").options[monthoptions.selectedIndex].value;
   changeTable(year+"-"+month+"-"+new Date().getDate());
}

function showdiv(id,divobj){//显示div
   var divObj=divobj;
       divObj.style.visibility="visible";//alert(this.offsetTop);document.getElementById("divid")
    //divObj.style.position ="relative";
   var object=document.getElementById(id); 
    divObj.style.top  =object.style.top+40;
    divObj.style.left =object.style.left;
}

function divObjInint(){
 changeTable("2007-4-7");
 showdiv("textid",this.div);
}

function divHedden(){
  var divObj=document.getElementById("divid");
   //if(divObj.style.visibility)
   document.getElementById("divid").style.visibility="hidden";//alert(document.getElementById("divid").style.visibility);
}

function showDate(){
 var currentDate=new Date();
 var year=currentDate.getFullYear()+"年";
 var month=(currentDate.getMonth()+1)+"月";
 var date=currentDate.getDate()+"日";
     document.writeln("今天是:"+year+month+date);
 }
//document.getElementById("divid").attachEvent("onclick",divHedden);
//changeTable("2007-4-7");
var obj=new divObj("divid","2007-4-7",null,"tableidid");
document.attachEvent("onclick",documentOnClick);

function documentOnClick(){
   if(obj.isHidden()==false)
      document.getElementById(obj.id).style.visibility="hidden"
}
function  labelOnClick(){
   if(obj.isHidden()==false){//再次点击,div隐藏
      document.getElementById(obj.id).style.visibility="hidden";
   return ;
   }
   obj.inint();
   event.cancelBubble=true;//取消事件冒泡
  } 
</script>
</body>
</html>

posted on 2007-05-10 22:56 二胡 阅读(140) 评论(0)  编辑  收藏 所属分类: JS

只有注册用户登录后才能发表评论。
网站导航: