八款不同风格的日历控件(JS+CSS)5资源-CSDN文库

共1个文件

js：1个

日历控件,JS,CSS

需积分: 6 134 浏览量 2008-11-17 21:10:44 上传评论收藏 5KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

Calendar5.rar （1个子文件）

Calendar5.js 17KB

// <script src="../JS/calendar5.js" type="text/javascript"></script> // <script type="text/javascript"> // var c = new Calendar("c"); // document.write(c); // </script> //</head> //<body> // <form id="form1" runat="server"> // <div> // 普通调用:<input type="text" name="txt2" onfocus="c.showMoreDay = false;c.show(this);" /><br /> // <div style="height: 262px"> // </div> // 按钮调用:<input type="text" name="btntxt" id="btntxt" /><input name="button" value="*" // id="button" type="button" onclick="c.showMoreDay = true;c.show(getObjById('btntxt'),'1982-1-1',this)" /> // <br /> //                  // <input type="text" name="btntxt3" id="btntxt3" /><input name="button3" value="*" // id="button3" type="button" onclick="c.showMoreDay = true;c.show(this,getObjById('btntxt3'))" /> // </div> // </form> //</body> function Calendar(objName) { this.style = { borderColor : "#909eff", //边框颜色 headerBackColor : "#909EFF", //表头背景颜色 headerFontColor : "#ffffff", //表头字体颜色 bodyBarBackColor : "#f4f4f4", //日历标题背景色 bodyBarFontColor : "#000000", //日历标题字体色 bodyBackColor : "#ffffff", //日历背景色 bodyFontColor : "#000000", //日历字体色 bodyHolidayFontColor : "#ff0000", //假日字体色 watermarkColor : "#d4d4d4", //背景水印色 moreDayColor : "#cccccc" }; this.showMoreDay = false; //是否显示上月和下月的日期 this.Obj = objName; this.date = null; this.mouseOffset = null; this.dateInput = null; this.timer = null; }; Calendar.prototype.toString = function() { var str = this.getStyle(); str += '<div Author="alin" class="calendar" style="display:none;" onselectstart="return false" oncontextmenu="return false" id="Calendar">\n'; str += '<div Author="alin" class="cdrWatermark" id="cdrWatermark"></div><div id="cdrBody" style="position:absolute;left:0px;top:0px;z-index:2;width:140px;">'; str += this.getHeader(); str += this.getBody(); str += '</div><div Author="alin" 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:140px!important;width /**/:142px;height:184px!important;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;height:122px!important; height /**/:110px;font-size:12px;cursor:pointer;color:' + this.style.bodyFontColor + ';}\n'; str += '.dayOver{height:16px;padding:0px;border:1px solid black;background-color:#f4f4f4;}\n'; str += '.dayOut{padding:1px;border:none;height:16px;}\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 += 'html>body #Calendar{width:142px;174px;}'; str += '</style>\n'; return str; }; Calendar.prototype.getHeader = function() { var str = '<table Author="alin" class="cdrHeader" cellSpacing="2" cellPadding="0"><tr Author="alin" align="center">\n'; str += '<td Author="alin" onmouseover="this.className=\'headerOver\'" onmouseout="this.className=\'\'" id="previousYear" title="上一年份" style="cursor:pointer;width:10px;" onclick="'+this.Obj+'.onChangeYear(false);"><<</td>\n'; str += '<td Author="alin" onmouseover="this.className=\'headerOver\'" onmouseout="this.className=\'\'" id="previousMonth" title="上一月份" style="cursor:pointer;width:10px;" onclick="'+this.Obj+'.onChangeMonth(false);"><</td>\n'; str += '<td Author="alin" onmouseover="this.className=\'headerOver\'" id="currentYear" style="width:50px;" onclick="' + this.Obj + '.showMenu(true);" onmouseout="' + this.Obj + '.hideMenu();this.className=\'\';">0</td>\n'; str += '<td Author="alin" onmouseover="this.className=\'headerOver\'" id="currentMonth" onclick="' + this.Obj + '.showMenu(false);" onmouseout="' + this.Obj + '.hideMenu();this.className=\'\';">0</td>\n'; str += '<td Author="alin" onmouseover="this.className=\'headerOver\'" onmouseout="this.className=\'\'" id="nextMonth" title="下一月份" style="cursor:pointer;width:10px;" onclick="'+this.Obj+'.onChangeMonth(true);">></td>\n'; str += '<td Author="alin" 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 = this.getBodyBar(); str += '<table Author="alin" class="cdrBody" cellSpacing="2" cellPadding="0">\n'; for(i = 0; i < 6; i++) { str += '<tr Author="alin" align="center">'; for(j = 0; j < 7; j++) { str += '<td Author="alin" class="dayOut" id="cdrDay'+(n++)+'" width="13%"></td>\n'; } str += '</tr>'; } str += '</table>\n'; str += '<table Author="alin" class="cdrBodyBar" cellSpacing="2" cellPadding="0"><tr align="center" Author="alin"><td Author="alin" style="cursor:pointer;" onclick="'+this.Obj+'.getToday();">今天：'+new Date().toFormatString("yyyy年mm月dd日")+'</td></tr></table>\n'; return str; }; Calendar.prototype.getBodyBar = function() { var str = '<table Author="alin_bar" id="cdrBodyBar" class="cdrBodyBar" style="cursor:move;" cellSpacing="2" cellPadding="0"><tr Author="alin_bar" align="center">\n'; var day = new Array('日','一','二','三','四','五','六'); for(i = 0; i < 7; i++) { str += '<td Author="alin_bar">' + day[i] + '</td>\n'; } str += '</tr></table>'; return str; } Calendar.prototype.getYearMenu = function(year) { var str = '<table Author="alin" 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 Author="alin" align="center"><td Author="alin" 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 Author="alin" align="center"><td Author="alin"><table Author="alin" style="font-size:12px;width:100%;" cellSpacing="0" cellPadding="0">\n'; str += '<tr Author="alin" align="center"><td Author="alin" onmouseover="this.className=\'menuOver\'" onmouseout="this.className=\'\'" onclick="'+this.Obj+'.getYearMenu('+ (year - 10) + ')"><<</td>\n'; str += '<td Author="alin" 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 = getObjById("cdrMenu"); _menu

评论收藏

内容反馈