软件开发培训班 >> 编程开发 >> JavaScript

一个日历,兼容多种浏览器

　　本文标签：一个日历,兼容多种浏览器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无标题文档</title>

function Calendar(objName)   
{         
    this.style = { 
     
       borderColor               : "#909eff", //边框颜色 
       headerBackColor            : "#909EFF", //表头背景颜色 
       headerFontColor            : "#ffffff", //表头字体颜色 
       bodyBarBackColor        : "#f4f4f4", //日历标题背景色 
       bodyBarFontColor          : "#000000", //日历标题字体色 
       bodyBackColor             : "#ffffff", //日历背景色 
       bodyFontColor                           : "#000000", //日历字体色  
       bodyHolidayFontColor                : "#ff0000", //假日字体色 
       watermarkColor         : "#d4d4d4"  //背景水印色 
        
    }; 
     
    this.Obj = objName;         
    this.date = null; 
     
    this.mouseOffset = null; 
    this.dateInput = null; 
    this.timer = null; 
     
    this.drag = false;     
};

Calendar.prototype.toString = function() 
{    
   var str = this.getStyle(); 
   str += <div class="calendar" style="display:none;" onselectstart="return false" oncontextmenu="return false" id="Calendar">\n; 
   str += <div class="cdrWatermark" id="cdrWatermark"></div><div style="position:absolute;left:0px;top:0px;z-index:2;width:140px;">; 
   str += this.getHeader(); 
   str += this.getBody();    
   str += </div><div id="cdrMenu" style="position:absolute;left:0px;top:0px;z-index:3;display:none;"  onmouseover=" + this.Obj + .showMenu(null);" onmouseout=" + this.Obj + .hideMenu();"></div></div>; 
   return str; 
};

Calendar.prototype.getStyle = function() 
{ 
    var str = <style type="text/css">\n; 
    str += .calendar{position:absolute;width:142px;height:174px;background-color:+this.style.bodyBackColor+;border:1px solid  + this.style.borderColor + ;left:0px;top:0px;z-index:9999;}\n; 
    str += .cdrHeader{background-color:+ this.style.headerBackColor +;width:140px;height:22px;font-size:12px;color:+this.style.headerFontColor+;}\n; 
    str += .cdrWatermark{position:absolute;left:0px;top:55px;width:140px;font-family: Arial Black;font-size:50px;color:+this.style.watermarkColor+;z-index:1;text-align:center;}\n; 
    str += .cdrBodyBar{background-color: + this.style.bodyBarBackColor + ;font-size:12px;color: + this.style.bodyBarFontColor + ;width:140px;height:20px;}\n; 
    str += .cdrBody{width:140px;font-size:12px;cursor:pointer;color: + this.style.bodyFontColor + ;}\n; 
    str += .dayOver{border:1px solid black;background-color:#f4f4f4;}\n; 
    str += .menuOver{background-color:+this.style.headerBackColor+;color:+this.style.headerFontColor+;font-size:12px;}\n; 
    str += .headerOver{border:1px solid black;background-color:#f4f4f4;color:black;cursor:default;}\n; 
    str += .cdrMenu{font-size:12px;border:1px solid #000000;background-color:#ffffff;cursor:default;width:100%}\n; 
    str += </style>\n;     
    return str; 
     
};

Calendar.prototype.getHeader = function() 
{ 
    var str = <table class="cdrHeader" cellSpacing="2" cellPadding="0"><tr align="center">\n; 
    str += <td onmouseover="this.className=\headerOver\" onmouseout="this.className=\\" id="previousYear" title="上一年份" style="cursor:pointer;width:10px;" onclick="+this.Obj+.onChangeYear(false);"><<</td>\n; 
    str += <td onmouseover="this.className=\headerOver\" onmouseout="this.className=\\" id="previousMonth" title="上一月份" style="cursor:pointer;width:10px;" onclick="+this.Obj+.onChangeMonth(false);"><</td>\n; 
    str += <td onmouseover="this.className=\headerOver\" onmouseout="this.className=\\" id="currentYear" style="width:50px;" onclick=" + this.Obj + .showMenu(true);" onmouseout=" + this.Obj + .hideMenu();">0</td>\n; 
    str += <td onmouseover="this.className=\headerOver\" onmouseout="this.className=\\" id="currentMonth" onclick=" + this.Obj + .showMenu(false);" onmouseout=" + this.Obj + .hideMenu();">0</td>\n; 
    str += <td onmouseover="this.className=\headerOver\" onmouseout="this.className=\\" id="nextMonth" title="下一月份" style="cursor:pointer;width:10px;" onclick="+this.Obj+.onChangeMonth(true);">></td>\n; 
    str += <td onmouseover="this.className=\headerOver\" onmouseout="this.className=\\" id="nextYear" title="下一年份" style="cursor:pointer;width:10px;" onclick="+this.Obj+.onChangeYear(true);">>></td></tr>\n; 
    str += </table>\n; 
    return str; 
};

Calendar.prototype.getBody = function() 
{ 
   var n = 0; 
   var str = <table id="cdrBodyBar" class="cdrBodyBar" onmousedown="+this.Obj+.onDragStart()" onmousemove="+this.Obj+.onMouseMove()" style="cursor:move;" cellSpacing="2" cellPadding="0">\n; 
   str += <tr align="middle"><td>日</td><td>一</td><td>二</td><td>三</TD><td>四</td><td>五</td><td>六</td></tr></table>\n; 
   str += <table class="cdrBody" cellSpacing="2" cellPadding="0">\n; 
   for(i = 0; i < 6; i++) 
    {       
        str += <tr align="center">; 
        for(j = 0; j < 7; j++) 
        { 
             str += <td id="cdrDay+(n++)+" width="13%" height="16"></td>\n; 
        } 
        str += </tr>; 
    } 
   str += </table>\n; 
   str += <table class="cdrBodyBar" cellSpacing="2" cellPadding="0"><tr align="middle"><td style="cursor:pointer;" onclick="+this.Obj+.getToday();">今天</td></tr></table>\n; 
   return str; 
};

Calendar.prototype.getYearMenu = function(year) 
{ 
  
   var str = <table cellSpacing="0" class="cdrMenu" cellPadding="0">\n; 
   for(i = 0; i < 10; i++) 
    {       
        var _year = year + i; 
        var _date = new Date(_year,this.date.getMonth(),this.date.getDate()); 
         
        str += <tr align="center"><td width="13%" height="16" ; 
        if(this.date.getFullYear() != _year) 
        { 
            str += onmouseover="this.className=\menuOver\" onmouseout="this.className=\\" ; 
        } 
        else 
        { 
           str += class="menuOver"; 
        } 
        str += onclick=" + this.Obj + .bindDate(\ + _date.toFormatString("-") + \)"> + _year + 年</td>\n;         
        str += </tr>; 
    }

str += <tr align="center"><td><table style="font-size:12px;width:100%;" cellSpacing="0" cellPadding="0">\n; 
   str += <tr align="center"><td onmouseover="this.className=\menuOver\" onmouseout="this.className=\\" onclick="+this.Obj+.getYearMenu(+ (year - 10) + )"><<</td>\n; 
   str += <td onmouseover="this.className=\menuOver\" onmouseout="this.className=\\" onclick="+this.Obj+.getYearMenu(+ (year + 10) +)">>></td><tr>\n; 
   str += </table></td></tr>\n; 
   str += </table>; 
    
   var _menu = this.getObjById("cdrMenu"); 
    _menu.innerHTML = str; 
    
};

Calendar.prototype.getMonthMenu = function() 
{ 
    
   var str = <table cellSpacing="0" class="cdrMenu" cellPadding="0">\n; 
   for(i = 1; i <= 12; i++) 
    {    
        var _date = new Date(this.date.getFullYear(),i-1,this.date.getDate());         
             
        str += </tr><tr align="center"><td height="16" ; 
        if(this.date.getMonth() + 1 != i) 
        { 
            str += onmouseover="this.className=\menuOver\" onmouseout="this.className=\\" ; 
        } 
        else 
        { 
           str += class="menuOver"; 
        } 
        str += onclick=" + this.Obj + .bindDate(\ + _date.toFormatString("-") + \)">+i+月</td></tr>\n; 
    } 
   str += </table>; 
    
   var _menu = this.getObjById("cdrMenu"); 
    _menu.innerHTML = str;    
};

Calendar.prototype.show = function(arg1, arg2 , arg3) 
{ 
   if (arguments.length >  3  || arguments.length == 0) 
   { 
      alert("对不起！传入参数不对！" ); 
      return; 
    }    
     
   var _date = null; 
   var _evObj = null; 
   var _initValue = null   
     
   for(i = 0; i < arguments.length; i++) 
   { 
      if(typeof(arguments[i]) == "object" && arguments[i].type == "text") 
       {_date = arguments[i];} 
      else if(typeof(arguments[i]) == "object") 
       {_evObj = arguments[i];} 
      else if(typeof(arguments[i]) == "string") 
       {_initValue = arguments[i];}   
   } 
    _evObj = _evObj || _date; 
     
    if(!_date){alert("传入参数错误!"); return;} 
     
   this.dateInput = _date; 
    
   _date = _date.value; 
    
   if(_date == "" && _initValue) _date = _initValue;    
    
   this.bindDate(_date);         
    
   var _target = this.getPosition(_evObj);    
   var _obj = this.getObjById("Calendar"); 
   _obj.style.display = "";  
    
   _obj.style.left = _target.x; 
   if((document.body.clientHeight - (_target.y + _evObj.clientHeight)) >= _obj.clientHeight) 
   {         
      _obj.style.top = _target.y + _evObj.clientHeight; 
    } 
    else 
    {       
       _obj.style.top = _target.y - _obj.clientHeight; 
    } 
         
};

Calendar.prototype.hide = function() 
{ 
    var obj = this.getObjById("Calendar"); 
    obj.style.display = "none";    
};

Calendar.prototype.bindDate = function(date) 
{ 
    
    var _monthDays = new Array(31,30,31,30,31,30,31,31,30,31,30,31);         
    var _day = 1;     
    var _arr = date.split(-);         
    var _date = new Date(_arr[0],_arr[1]-1,_arr[2]);     
    if(isNaN(_date)) _date = new Date();     
    this.date = _date; 
    this.bindHeader();     
    var _year = _date.getFullYear(); 
    var _month = _date.getMonth(); 
    
     _monthDays[1] = ((_year%4==0)&&(_year%100!=0)||(_year%400==0))?29:28;

for(i = 0; i < 42; i++) 
    { 
        var _dayElement = this.getObjById("cdrDay" + i); 
         
        _dayElement.onmouseover = Function(this.Obj + ".onMouseOver(this)"); 
        _dayElement.onmouseout = Function(this.Obj + ".onMouseOut(this)"); 
        _dayElement.onclick = Function(this.Obj + ".onClick(this)"); 
        this.onMouseOut(_dayElement);         
         
        if(i >= new Date(_year,_month,1).getDay() && _day <= _monthDays[_month]) 
        { 
           _dayElement.innerHTML = _day; 
            
           if(_day == _date.getDate()) 
           { 
              this.onMouseOver(_dayElement); 
              _dayElement.onmouseover = Function("");    
              _dayElement.onmouseout = Function("");                                        
           } 
                 
             
           if(this.isHoliday(_year,_month,_day)) 
           { 
              _dayElement.style.color = this.style.bodyHolidayFontColor;               
           } 
            
           _dayElement.title = _year + 年 + (_month + 1)  + 月 + _day + 日; 
           _dayElement.value = _year + - + (_month + 1) + - + _day;     
            
           _day++; 
            
        } 
        else 
        { 
           _dayElement.innerHTML = ""; 
           _dayElement.title = ""; 
        }     
           
    } 
     
    var _menu = this.getObjById("cdrMenu"); 
    _menu.style.display = "none";     
     
};

Calendar.prototype.bindHeader = function() 
{ 
   var _curYear = this.getObjById("currentYear"); 
   var _curMonth = this.getObjById("currentMonth"); 
   var _watermark = this.getObjById("cdrWatermark");

_curYear.innerHTML = this.date.getFullYear() + "年"; 
   _curMonth.innerHTML =  (this.date.getMonth() + 1) + "月"; 
   _watermark.innerHTML = this.date.getFullYear();

};

Calendar.prototype.getObjById = function(obj) 
{ 
   if(document.getElementById) 
   { 
     return document.getElementById(obj); 
   } 
   else 
   { 
     alert("浏览器不支持!"); 
   } 
};

Calendar.prototype.getToday = function() 
{ 
   var _date = new Date(); 
   this.bindDate(_date.toFormatString("-")); 
};

Calendar.prototype.isHoliday = function(year,month,date) 
{ 
   var _date = new Date(year,month,date); 
   return (_date.getDay() == 6 || _date.getDay() == 0); 
};

Calendar.prototype.onMouseOver = function(obj) 
{ 
   obj.className = "dayOver"; 
};

Calendar.prototype.onMouseOut = function(obj) 
{ 
   obj.className = ""; 
};

Calendar.prototype.onClick = function(obj) 
{ 
  if(obj.innerHTML != "")  this.dateInput.value = obj.value; 
  this.hide(); 
};

Calendar.prototype.onChangeYear = function(isnext) 
{ 
   var _year = this.date.getFullYear(); 
   var _month = this.date.getMonth() + 1; 
   var _date = this.date.getDate(); 
       
   if(_year > 999 && _year <10000) 
   { 
        if(isnext){_year++;}else{ _year --;} 
   } 
   else 
   { 
     alert("年份超出范围（1000-9999）!"); 
   } 
   this.bindDate(_year + - + _month + - + _date); 
};

Calendar.prototype.onChangeMonth = function(isnext) 
{ 
   var _year = this.date.getFullYear(); 
   var _month = this.date.getMonth() + 1; 
   var _date = this.date.getDate(); 
    
   if(isnext){ _month ++;} else {_month--;} 
    
   if(_year > 999 && _year <10000) 
   {  
        if(_month < 1) {_month = 12; _year--;} 
        if(_month > 12) {_month = 1; _year++;} 
   } 
   else 
   { 
     alert("年份超出范围（1000-9999）!"); 
   }   
    
   this.bindDate(_year + - + _month + - + _date); 
};

Calendar.prototype.onMouseMove = function (evt) 
{ 
    evt =  evt || window.event;     
     
    if(this.drag && evt.button == 1) 
    { 
      var obj = this.getObjById("Calendar"); 
      var mousePos = this.mouseCoords(evt);  
      obj.style.left = mousePos.x - this.mouseOffset.x; 
      obj.style.top  = mousePos.y - this.mouseOffset.y;       
    } 
}

Calendar.prototype.onDragStart = function (evt) 
{ 
    evt = evt || window.event; 
     
    var obj = this.getObjById("Calendar"); 
    this.mouseOffset = this.getMouseOffset(obj,evt); 
    this.drag = true; 
}

Calendar.prototype.onDragEnd = function (evt) 
{ 
    this.drag = false; 
}

Calendar.prototype.mouseCoords = function(ev) 
{ 
    if(ev.pageX || ev.pageY){ 
        return {x:ev.pageX, y:ev.pageY}; 
    } 
    return { 
        x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, 
        y:ev.clientY + document.body.scrollTop  - document.body.clientTop 
    }; 
}

Calendar.prototype.getPosition = function(e) 
{ 
    var left = 0; 
    var top  = 0; 
    while (e.offsetParent){ 
        left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0); 
        top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0); 
        e     = e.offsetParent; 
    }

left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0); 
    top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);

return {x:left, y:top}; 
}

Calendar.prototype.getMouseOffset = function(target, ev) 
{ 
    ev = ev || window.event; 
    var docPos    = this.getPosition(target); 
    var mousePos  = this.mouseCoords(ev); 
    return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y}; 
}

Calendar.prototype.showMenu = function(isyear) 
{ 
  var _menu = this.getObjById("cdrMenu"); 
   
  if(isyear != null) 
  { 
     
    var _obj = (isyear)? this.getObjById("currentYear") : this.getObjById("currentMonth"); 
     
    if(isyear) 
    { 
       this.getYearMenu(this.date.getFullYear() - 5);        
    } 
     else 
    { 
       this.getMonthMenu();        
    } 
     
    _menu.style.top = _obj.offsetTop + _obj.offsetHeight; 
    _menu.style.left = _obj.offsetLeft;     
    _menu.style.width = _obj.offsetWidth; 
     
   } 
     
    if (this.timer != null) clearTimeout(this.timer); 
     
    _menu.style.display=""; 
     
}

Calendar.prototype.hideMenu = function() 
{ 
    var _obj = this.getObjById("cdrMenu"); 
    this.timer = window.setTimeout(function(){_obj.style.display=none;},500);     
}

Number.prototype.NaN0 = function() 
{ 
    return isNaN(this) ? 0 : this; 
}

Date.prototype.toFormatString = function(fs) 
{ 
    return this.getFullYear() + fs + (this.getMonth() + 1) + fs + this.getDate();  
}

/*****************************************************结束************************************************************/ 
</script>

</head>

<body>

普通调用:<input type="text" name="txt"  onfocus="c.show(this,1980-01-01);"/>

</form></body> 
</html>

技术文章快速查找

JS复制内容到剪切板的实例代码(兼容IE与火狐)

jquery 关键字“拖曳搜索”之“拖曳”以及图片“提示自适应放大”效果的实现

25个优雅的jQuery Tooltip插件推荐

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建