日历JS脚本
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
strFrame+='var bDrag; /*標記是否開始拖動*/';
strFrame+='function document.onmousemove() /*在滑鼠移動事件中，如果開始拖動日曆，則移動日曆*/';
strFrame+='{if(bDrag && window.event.button==1)';
strFrame+=' datelayerx=window.event.clientX;';
strFrame+=' datelayery=window.event.clientY;';
strFrame+=' bDrag=true;}';
strFrame+='function DragEnd(){ /*結束日曆拖動*/';
var strFrame; //存放日曆層的HTML代碼
document.writeln('<iframe id=meizzDateLayer frameborder=0 style="position: absolute; width: 144; height: 211; z-index: 9998; display: none"></iframe>');
strFrame+='<td style="font-size:12px;color:#FFFFFF">三</td><td style="font-size:12px;color:#FFFFFF">四</td>';
strFrame+='<td style="font-size:12px;color:#FFFFFF">五</td><td style="font-size:12px;color:#FFFFFF">六</td></tr>';
strFrame+=' DateLayer.posTop += window.event.clientY-datelayery;}}';
strFrame+='function DragStart() /*開始日曆拖動*/';
strFrame+='{var DateLayer=parent.document.all.meizzDateLayer.style;';
strFrame+='<td width=48 align=center style="font-size:12px;cursor:default" onmouseover="style.backgroundColor=\'#FFD700\'" ';
strFrame+=' onmouseout="style.backgroundColor=\'white\'" onclick="parent.tmpSelectMonthInnerHTML(this.innerText.length==3?this.innerText.substring(0,1):this.innerText.substring(0,2))"';
var n=0; for (j=0;j<5;j++){ strFrame+= ' <tr align=center>';
for (i=0;i<7;i++)
{
strFrame+='<td width=20 height=20 id=meizzDay'+n+' style="font-size:12px" onclick=parent.meizzDayClick(this.innerText,0)></td>';n++;}
strFrame+='onmouseover="style.backgroundColor=\'#FFD700\'" onmouseout="style.backgroundColor=\'white\'" ';
strFrame+='onclick="parent.tmpSelectYearInnerHTML(this.innerText.substring(0,4))" title="點擊這裏選擇年份"><span id=meizzYearHead></span></td>';
strFrame+=' onclick="parent.meizzPrevM()" title="向前翻 1 月"><b><</b>';
strFrame+=' </td><td width=60 align=center style="font-size:12px;cursor:default" ';
// 一、<input name=txt><input type=button value=setday onclick="setday(this,document.all.txt)">
// 二、<input onfocus="setday(this)">
// 本日曆的年份限制是（1000 - 9999）
strFrame+='</tr>';
}
strFrame+=' <tr align=center>';
strFrame+=' title="點擊這裏選擇月份"><span id=meizzMonthHead></span></td>';
strFrame+=' <td width=16 bgcolor=#C6D7F1 align=center style="font-size:12px;cursor: hand;color: #ffffff" ';
var bMoveable=true; //設置日曆是否可以拖動
var _VersionInfo="" //版本資訊
//==================================================== WEB 頁面顯示部分 =====================================================
strFrame+='<tr align=center valign=bottom><td style="font-size:12px;color:#FFFFFF">日</td>';
strFrame+='<td style="font-size:12px;color:#FFFFFF">一</td><td style="font-size:12px;color:#FFFFFF">二</td>';
strFrame+='<span id=tmpSelectMonthLayer style="z-index: 9999;position: absolute;top: 3; left: 78;display: none"></span>';
strFrame+='<table border=1 cellspacing=0 cellpadding=0 width=142 height=160 bordercolor=#C6D7F1 bgcolor=#C6D7F1>';
strFrame+='<table border=1 cellspacing=0 cellpadding=0 bgcolor=#C6D7F1 ' + (bMoveable? 'onmousedown="DragStart()" onmouseup="DragEnd()"':'');
strFrame+=' BORDERCOLORLIGHT=#C6D7F1 BORDERCOLORDARK=#FFFFFF width=140 height=20 style="cursor:' + (bMoveable ? 'move':'default') + '">';
strFrame='<style>';
strFrame+='INPUT.button{BORDER-RIGHT: #C6D7F1 1px solid;BORDER-TOP: #C6D7F1 1px solid;BORDER-LEFT: #C6D7F1 1px solid;';
strFrame+='BORDER-BOTTOM: #C6D7F1 1px solid;BACKGROUND-COLOR: #fff8ec;font-family:宋體;}';
// 按ESC鍵關閉該控制項
// 在年和月的顯示地方點擊時會分別出年與月的下拉清單
// 控制項外任意點擊一點即可關閉該控制項
// 說明：受到iframe的限制，如果拖動出日曆視窗，則日曆會停止移動。
//==================================================== 參數設定部分 =======================================================
strFrame+=' {var DateLayer=parent.document.all.meizzDateLayer.style;';
strFrame+=' DateLayer.posLeft += window.event.clientX-datelayerx;/*由於每次移動以後滑鼠位置都恢復為初始的位置，因此寫法與div中不同*/';
strFrame+=' <tr><td width=142 height=23 bgcolor=#FFFFFF><table border=0 cellspacing=1 cellpadding=0 width=140 height=23>';
strFrame+=' <tr align=center><td width=16 align=center bgcolor=#C6D7F1 style="font-size:12px;cursor: hand;color: #ffffff" ';
strFrame+=' bDrag=false;}';
strFrame+='</scr' + 'ipt>';
strFrame+='<div style="z-index:9999;position: absolute; left:0; top:0;" onselectstart="return false"><span id=tmpSelectYearLayer style="z-index: 9999;position: absolute;top: 3; left: 19;display: none"></span>';
strFrame+='TD{FONT-SIZE: 9pt;font-family:宋體;}';
strFrame+='&l'<scr' + 'ipt>';
strFrame+='var datelayerx,datelayery; /*存放日曆控制項的滑鼠位置*/';
strFrame+=' onclick="parent.meizzNextM()" title="向後翻 1 月"><b>></b></td></tr>';
strFrame+=' </table></td></tr>';
strFrame+=' <tr><td width=142 height=18>';
strFrame+='</table></td></tr>';
strFrame+=' <tr><td width=142 height=120>';
strFrame+=' <table border=1 cellspacing=2 cellpadding=0 BORDERCOLORLIGHT=#C6D7F1 BORDERCOLORDARK=#FFFFFF bgcolor=#fff8ec width=140 height=120>';
//============================================================================
// 主調用函數是 setday(this,[object])和setday(this)，[object]是控制項輸出的控制項名，舉兩個例子：
strFrame+='function document.onmousemove() /*在滑鼠移動事件中，如果開始拖動日曆，則移動日曆*/';
strFrame+='{if(bDrag && window.event.button==1)';
strFrame+=' datelayerx=window.event.clientX;';
strFrame+=' datelayery=window.event.clientY;';
strFrame+=' bDrag=true;}';
strFrame+='function DragEnd(){ /*結束日曆拖動*/';
var strFrame; //存放日曆層的HTML代碼
document.writeln('<iframe id=meizzDateLayer frameborder=0 style="position: absolute; width: 144; height: 211; z-index: 9998; display: none"></iframe>');
strFrame+='<td style="font-size:12px;color:#FFFFFF">三</td><td style="font-size:12px;color:#FFFFFF">四</td>';
strFrame+='<td style="font-size:12px;color:#FFFFFF">五</td><td style="font-size:12px;color:#FFFFFF">六</td></tr>';
strFrame+=' DateLayer.posTop += window.event.clientY-datelayery;}}';
strFrame+='function DragStart() /*開始日曆拖動*/';
strFrame+='{var DateLayer=parent.document.all.meizzDateLayer.style;';
strFrame+='<td width=48 align=center style="font-size:12px;cursor:default" onmouseover="style.backgroundColor=\'#FFD700\'" ';
strFrame+=' onmouseout="style.backgroundColor=\'white\'" onclick="parent.tmpSelectMonthInnerHTML(this.innerText.length==3?this.innerText.substring(0,1):this.innerText.substring(0,2))"';
var n=0; for (j=0;j<5;j++){ strFrame+= ' <tr align=center>';
for (i=0;i<7;i++)
{
strFrame+='<td width=20 height=20 id=meizzDay'+n+' style="font-size:12px" onclick=parent.meizzDayClick(this.innerText,0)></td>';n++;}
strFrame+='onmouseover="style.backgroundColor=\'#FFD700\'" onmouseout="style.backgroundColor=\'white\'" ';
strFrame+='onclick="parent.tmpSelectYearInnerHTML(this.innerText.substring(0,4))" title="點擊這裏選擇年份"><span id=meizzYearHead></span></td>';
strFrame+=' onclick="parent.meizzPrevM()" title="向前翻 1 月"><b><</b>';
strFrame+=' </td><td width=60 align=center style="font-size:12px;cursor:default" ';
// 一、<input name=txt><input type=button value=setday onclick="setday(this,document.all.txt)">
// 二、<input onfocus="setday(this)">
// 本日曆的年份限制是（1000 - 9999）
strFrame+='</tr>';
}
strFrame+=' <tr align=center>';
strFrame+=' title="點擊這裏選擇月份"><span id=meizzMonthHead></span></td>';
strFrame+=' <td width=16 bgcolor=#C6D7F1 align=center style="font-size:12px;cursor: hand;color: #ffffff" ';
var bMoveable=true; //設置日曆是否可以拖動
var _VersionInfo="" //版本資訊
//==================================================== WEB 頁面顯示部分 =====================================================
strFrame+='<tr align=center valign=bottom><td style="font-size:12px;color:#FFFFFF">日</td>';
strFrame+='<td style="font-size:12px;color:#FFFFFF">一</td><td style="font-size:12px;color:#FFFFFF">二</td>';
strFrame+='<span id=tmpSelectMonthLayer style="z-index: 9999;position: absolute;top: 3; left: 78;display: none"></span>';
strFrame+='<table border=1 cellspacing=0 cellpadding=0 width=142 height=160 bordercolor=#C6D7F1 bgcolor=#C6D7F1>';
strFrame+='<table border=1 cellspacing=0 cellpadding=0 bgcolor=#C6D7F1 ' + (bMoveable? 'onmousedown="DragStart()" onmouseup="DragEnd()"':'');
strFrame+=' BORDERCOLORLIGHT=#C6D7F1 BORDERCOLORDARK=#FFFFFF width=140 height=20 style="cursor:' + (bMoveable ? 'move':'default') + '">';
strFrame='<style>';
strFrame+='INPUT.button{BORDER-RIGHT: #C6D7F1 1px solid;BORDER-TOP: #C6D7F1 1px solid;BORDER-LEFT: #C6D7F1 1px solid;';
strFrame+='BORDER-BOTTOM: #C6D7F1 1px solid;BACKGROUND-COLOR: #fff8ec;font-family:宋體;}';
// 按ESC鍵關閉該控制項
// 在年和月的顯示地方點擊時會分別出年與月的下拉清單
// 控制項外任意點擊一點即可關閉該控制項
// 說明：受到iframe的限制，如果拖動出日曆視窗，則日曆會停止移動。
//==================================================== 參數設定部分 =======================================================
strFrame+=' {var DateLayer=parent.document.all.meizzDateLayer.style;';
strFrame+=' DateLayer.posLeft += window.event.clientX-datelayerx;/*由於每次移動以後滑鼠位置都恢復為初始的位置，因此寫法與div中不同*/';
strFrame+=' <tr><td width=142 height=23 bgcolor=#FFFFFF><table border=0 cellspacing=1 cellpadding=0 width=140 height=23>';
strFrame+=' <tr align=center><td width=16 align=center bgcolor=#C6D7F1 style="font-size:12px;cursor: hand;color: #ffffff" ';
strFrame+=' bDrag=false;}';
strFrame+='</scr' + 'ipt>';
strFrame+='<div style="z-index:9999;position: absolute; left:0; top:0;" onselectstart="return false"><span id=tmpSelectYearLayer style="z-index: 9999;position: absolute;top: 3; left: 19;display: none"></span>';
strFrame+='TD{FONT-SIZE: 9pt;font-family:宋體;}';
strFrame+='&l'<scr' + 'ipt>';
strFrame+='var datelayerx,datelayery; /*存放日曆控制項的滑鼠位置*/';
strFrame+=' onclick="parent.meizzNextM()" title="向後翻 1 月"><b>></b></td></tr>';
strFrame+=' </table></td></tr>';
strFrame+=' <tr><td width=142 height=18>';
strFrame+='</table></td></tr>';
strFrame+=' <tr><td width=142 height=120>';
strFrame+=' <table border=1 cellspacing=2 cellpadding=0 BORDERCOLORLIGHT=#C6D7F1 BORDERCOLORDARK=#FFFFFF bgcolor=#fff8ec width=140 height=120>';
//============================================================================
// 主調用函數是 setday(this,[object])和setday(this)，[object]是控制項輸出的控制項名，舉兩個例子：