Javascript教程：实用的选择输入日期的特效_Javascript教程_H5之家

<html>

<title>非常实用的选择输入日期的</title>

<head>

<!--

//==================================================== 参数设定部分 =======================================================

var bMoveable=true; //设置日历是否可以拖动

var _VersionInfo="Version:2.0" //版本信息

//==================================================== WEB 页面显示部分 =====================================================

var strFrame; //存放日历层的HTML代码

document.writeln（'<iframe bgcolor="#000000" id=webjxDateLayer Author=wayx frameborder=0 style="position: absolute; width: 186; height: 247; z-index: 9998; display: none"></iframe>'）；

strFrame='<style>';

strFrame+='INPUT.button{BORDER-RIGHT: #B3C9E1 1px solid;BORDER-TOP: #B3C9E1 1px solid;BORDER-LEFT: #B3C9E1 1px solid;';

strFrame+='BORDER-BOTTOM: #ff9900 1px solid;BACKGROUND-COLOR: #EDF2F8;font-family:宋体；}';

strFrame+='TD{FONT-SIZE: 9pt;font-family:宋体；}';

strFrame+='</style>';

strFrame+='<scr' + 'ipt>';

strFrame+='var datelayerx,datelayery; /*存放日历控件的鼠标位置*/';

strFrame+='var bDrag; /*标记是否开始拖动*/';

strFrame+='function document.onmousemove（） /*在鼠标移动事件中，如果开始拖动日历，则移动日历*/';

strFrame+='{if（bDrag && window.event.button==1）';

strFrame+=' {var DateLayer=parent.document.all.webjxDateLayer.style;';

strFrame+=' DateLayer.posLeft += window.event.clientX-datelayerx;/*由于每次移动以后鼠标位置都恢复为初始的位置，因此写法与div中不同*/';

strFrame+=' DateLayer.posTop += window.event.clientY-datelayery;}}';

strFrame+='function DragStart（） /*开始日历拖动*/';

strFrame+='{var DateLayer=parent.document.all.webjxDateLayer.style;';

strFrame+=' datelayerx=window.event.clientX;';

strFrame+=' datelayery=window.event.clientY;';

strFrame+=' bDrag=true;}';

strFrame+='function DragEnd（）{ /*结束日历拖动*/';

strFrame+=' bDrag=false;}';

strFrame+='</scr' + 'ipt>';

strFrame+='<div style="z-index:9999;position: absolute; left:0; top:0;" onselectstart="return false"><span id=tmpSelectYearLayer Author=wayx style="z-index: 9999;position: absolute;top: 3; left: 19;display: none"></span>';

strFrame+='<span id=tmpSelectMonthLayer Author=wayx style="z-index: 9999;position: absolute;top: 3; left: 78;display: none"></span>';

strFrame+='<table style="FILTER:dropshadow（color=#EDEDF8,offx=3.3,offy=3.3,positive=1）；" cellSpacing="0" cellPadding="0" width="100%" border="0"><tr><td>';

// 控件边框颜色

strFrame+='<table border=1 cellspacing=0 cellpadding=0 width=182 height=160 bgColor="#FFFFFF" borderColorLight=#7197CA borderColorDark="#ffffff" Author="wayx">';

strFrame+=' <tr Author="wayx"><td width=182 height=23 Author="wayx" bgcolor=#FFFFFF><table border=0 cellspacing=1 cellpadding=0 width=180 Author="wayx" height=23>';

strFrame+=' <tr align=center Author="wayx"><td width=16 align=center bgcolor=#B6CAE4 style="font-size:12px;cursor: hand;color: #ffffff" ';

strFrame+=' onclick="parent.webjxPrevM（）" title="向前翻 1 月" Author=webjx><b Author=webjx>《/b>';

strFrame+=' </td><td width=60 align=center style="font-size:12px;cursor:default" Author=webjx ';

strFrame+='onmouseover="style.backgroundColor=\'#D7E1F0\'" onmouseout="style.backgroundColor=\'white\'" ';

strFrame+='onclick="parent.tmpSelectYearInnerHTML（this.innerText.substring（0,4））" title="点击这里选择年份"><span Author=webjx id=webjxYearHead></span></td>';

strFrame+='<td width=48 align=center style="font-size:12px;cursor:default" Author=webjx onmouseover="style.backgroundColor=\'#D7E1F0\'" ';

strFrame+=' onmouseout="style.backgroundColor=\'white\'" onclick="parent.tmpSelectMonthInnerHTML（this.innerText.length==3?this.innerText.substring（0,1）：this.innerText.substring（0,2））"';

strFrame+=' title="点击这里选择月份"><span id=webjxMonthHead Author=webjx></span></td>';

strFrame+=' <td width=16 bgcolor=#B6CAE4 align=center style="font-size:12px;cursor: hand;color: #ffffff" ';

strFrame+=' onclick="parent.webjxNextM（）" title="向后翻 1 月" Author=webjx><b Author=webjx》</b></td></tr>';

strFrame+=' </table></td></tr>';

strFrame+=' <tr Author="wayx"><td width=180 height=18 Author="wayx">';

strFrame+='<table border=1 cellspacing=0 cellpadding=0 bgcolor=#618BC5 ' + （bMoveable? 'onmousedown="DragStart（）" onmouseup="DragEnd（）"':''）；