JS实现漂亮的时间选择框效果

2024-03-14 00:52:04 49

本文实例讲述了JS实现漂亮的时间选择框效果。分享给大家供大家参考，具体如下：

HTML代码部分：

<html>
<scriptlanguage=javascriptsrc="dataone.js"></script>
<tablealign="center">
<tr>
<td>
<body>
(1)只选择日期<inputtype="text"name="date"readOnlyonClick="setDay(this);"><br/>
(2)选择日期和小时<inputtype="text"name="dateh"readOnlyonClick="setDayH(this);"><br/>
(3)选择日期和小时及分钟<inputtype="text"name="datehm"readOnlyonClick="setDayHM(this);">
</body>
</td>
</tr>
</table>
</html>

dataone.js代码：

/**
*使用方法：
*(1)只选择日期<inputtype="text"name="date"readOnlyonClick="setDay(this);">
*(2)选择日期和小时<inputtype="text"name="dateh"readOnlyonClick="setDayH(this);">
*(3)选择日期和小时及分钟<inputtype="text"name="datehm"readOnlyonClick="setDayHM(this);">
*设置参数的方法
*(1)设置日期分隔符setDateSplit(strSplit);默认为"-"
*(2)设置日期与时间之间的分隔符setDateTimeSplit(strSplit);默认为""
*(3)设置时间分隔符setTimeSplit(strSplit);默认为":"
*(4)设置(1),(2),(3)中的分隔符setSplit(strDateSplit,strDateTimeSplit,strTimeSplit);
*(5)设置开始和结束年份setYearPeriod(intDateBeg,intDateEnd)
*说明：
*默认返回的日期时间格式如同：2005-02-0208:08
*/
//------------------样式定义---------------------------//
//功能按钮同样样式
vars_tiannet_turn_base="height:16px;font-size:9pt;color:white;border:0solid#CCCCCC;cursor:hand;background-color:#2650A6;";
//翻年、月等的按钮
vars_tiannet_turn="width:28px;"+s_tiannet_turn_base;
//关闭、清空等按钮样式
vars_tiannet_turn2="width:22px;"+s_tiannet_turn_base;
//年选择下拉框
vars_tiannet_select="width:64px;display:none;";
//月、时、分选择下拉框
vars_tiannet_select2="width:46px;display:none;";
//日期选择控件体的样式
vars_tiannet_body="width:150;background-color:#2650A6;display:none;z-index:9998;position:absolute;"+
"border-left:1solid#CCCCCC;border-top:1solid#CCCCCC;border-right:1solid#999999;border-bottom:1solid#999999;";
//显示日的td的样式
vars_tiannet_day="width:21px;height:20px;background-color:#D8F0FC;font-size:10pt;";
//字体样式
vars_tiannet_font="color:#FFCC00;font-size:9pt;cursor:hand;";
//链接的样式
vars_tiannet_link="text-decoration:none;font-size:9pt;color:#2650A6;";
//横线
vars_tiannet_line="border-bottom:1solid#6699CC";
//------------------变量定义---------------------------//
vartiannetYearSt=1950;//可选择的开始年份
vartiannetYearEnd=2010;//可选择的结束年份
vartiannetDateNow=newDate();
vartiannetYear=tiannetDateNow.getFullYear();//定义年的变量的初始值
vartiannetMonth=tiannetDateNow.getMonth()+1;//定义月的变量的初始值
vartiannetDay=tiannetDateNow.getDate();
vartiannetHour=8;//tiannetDateNow.getHours();
vartiannetMinute=0;//tiannetDateNow.getMinutes();
vartiannetArrDay=newArray(42);//定义写日期的数组
vartiannetDateSplit="-";//日期的分隔符号
vartiannetDateTimeSplit="";//日期与时间之间的分隔符
vartiannetTimeSplit=":";//时间的分隔符号
vartiannetOutObject;//接收日期时间的对象
vararrTiannetHide=newArray();//被强制隐藏的标签
varm_bolShowHour=false;//是否显示小时
varm_bolShowMinute=false;//是否显示分钟
varm_aMonHead=newArray(12);//定义阳历中每个月的最大天数
m_aMonHead[0]=31;m_aMonHead[1]=28;m_aMonHead[2]=31;m_aMonHead[3]=30;m_aMonHead[4]=31;m_aMonHead[5]=30;
m_aMonHead[6]=31;m_aMonHead[7]=31;m_aMonHead[8]=30;m_aMonHead[9]=31;m_aMonHead[10]=30;m_aMonHead[11]=31;
//----------------------用户可调用的函数-----------------------------//
//用户主调函数－只选择日期
functionsetDay(obj){
tiannetOutObject=obj;
//如果标签中有值，则将日期初始化为当前值
varstrValue=tiannetTrim(tiannetOutObject.value);
if(strValue!=""){
tiannetInitDate(strValue);
}
tiannetPopCalendar();
}
//用户主调函数－选择日期和小时
functionsetDayH(obj){
tiannetOutObject=obj;
m_bolShowHour=true;
//如果标签中有值，则将日期和小时初始化为当前值
varstrValue=tiannetTrim(tiannetOutObject.value);
if(strValue!=""){
tiannetInitDate(strValue.substring(0,10));
varhour=strValue.substring(11,13);
if(hour<10)tiannetHour=hour.substring(1,2);
}
tiannetPopCalendar();
}
//用户主调函数－选择日期和小时及分钟
functionsetDayHM(obj){
tiannetOutObject=obj;
m_bolShowHour=true;
m_bolShowMinute=true;
//如果标签中有值，则将日期和小时及分钟初始化为当前值
varstrValue=tiannetTrim(tiannetOutObject.value);
if(strValue!=""){
tiannetInitDate(strValue.substring(0,10));
vartime=strValue.substring(11,16);
vararr=time.split(tiannetTimeSplit);
tiannetHour=arr[0];
tiannetMinute=arr[1];
if(tiannetHour<10)tiannetHour=tiannetHour.substring(1,2);
if(tiannetMinute<10)tiannetMinute=tiannetMinute.substring(1,2);
}
tiannetPopCalendar();
}
//设置开始日期和结束日期
functionsetYearPeriod(intDateBeg,intDateEnd){
tiannetYearSt=intDateBeg;
tiannetYearEnd=intDateEnd;
}
//设置日期分隔符。默认为"-"
functionsetDateSplit(strDateSplit){
tiannetDateSplit=strDateSplit;
}
//设置日期与时间之间的分隔符。默认为""
functionsetDateTimeSplit(strDateTimeSplit){
tiannetDateTimeSplit=strDateTimeSplit;
}
//设置时间分隔符。默认为":"
functionsetTimeSplit(strTimeSplit){
tiannetTimeSplit=strTimeSplit;
}
//设置分隔符
functionsetSplit(strDateSplit,strDateTimeSplit,strTimeSplit){
tiannetDateSplit(strDateSplit);
tiannetDateTimeSplit(strDateTimeSplit);
tiannetTimeSplit(strTimeSplit);
}
//设置默认的日期。格式为：YYYY-MM-DD
functionsetDefaultDate(strDate){
tiannetYear=strDate.substring(0,4);
tiannetMonth=strDate.substring(5,7);
tiannetDay=strDate.substring(8,10);
}
//设置默认的时间。格式为：HH24:MI
functionsetDefaultTime(strTime){
tiannetHour=strTime.substring(0,2);
tiannetMinute=strTime.substring(3,5);
}
//----------------------end用户可调用的函数-----------------------------//
//------------------begin页面显示部分---------------------------//
varweekName=newArray("日","一","二","三","四","五","六");
document.write('<divid="divTiannetDate"style="'+s_tiannet_body+'"style="本日历选择控件由tiannet根据前人经验完善而成！">');
document.write('<divalign="center"id="divTiannetDateText"Author="tiannet"style="padding-top:2px;">');
document.write('<spanid="tiannetYearHead"Author="tiannet"style="'+s_tiannet_font+'"'+
'onclick="spanYearCEvent();">&nbsp;年</span>');
document.write('<selectid="selTianYear"style="'+s_tiannet_select+'"Author="tiannet"'+
'onChange="tiannetYear=this.value;tiannetSetDay(tiannetYear,tiannetMonth);document.all.tiannetYearHead.style.display=\'\';'+
'this.style.display=\'none\';">');
for(vari=tiannetYearSt;i<=tiannetYearEnd;i++){
document.writeln('<optionvalue="'+i+'">'+i+'年</option>');
}
document.write('</select>');
document.write('<spanid="tiannetMonthHead"Author="tiannet"style="'+s_tiannet_font+'"'+
'onclick="spanMonthCEvent();">&nbsp;&nbsp;月</span>');
document.write('<selectid="selTianMonth"style="'+s_tiannet_select2+'"Author="tiannet"'+
'onChange="tiannetMonth=this.value;tiannetSetDay(tiannetYear,tiannetMonth);document.all.tiannetMonthHead.style.display=\'\';'+
'this.style.display=\'none\';">');
for(vari=1;i<=12;i++){
document.writeln('<optionvalue="'+i+'">'+i+'月</option>');
}
document.write('</select>');
//document.write('</div>');
//document.write('<divalign="center"id="divTiannetTimeText"Author="tiannet">');
document.write('<spanid="tiannetHourHead"Author="tiannet"style="'+s_tiannet_font+'display:none;"'+
'onclick="spanHourCEvent();">&nbsp;时</span>');
document.write('<selectid="selTianHour"style="'+s_tiannet_select2+'display:none;"Author="tiannet"'+
'onChange="tiannetHour=this.value;tiannetWriteHead();document.all.tiannetHourHead.style.display=\'\';'+
'this.style.display=\'none\';">');
for(vari=0;i<=23;i++){
document.writeln('<optionvalue="'+i+'">'+i+'时</option>');
}
document.write('</select>');
document.write('<spanid="tiannetMinuteHead"Author="tiannet"style="'+s_tiannet_font+'display:none;"'+
'onclick="spanMinuteCEvent();">&nbsp;&nbsp;分</span>');
document.write('<selectid="selTianMinute"style="'+s_tiannet_select2+'display:none;"Author="tiannet"'+
'onChange="tiannetMinute=this.value;tiannetWriteHead();document.all.tiannetMinuteHead.style.display=\'\';'+
'this.style.display=\'none\';">');
for(vari=0;i<=59;i++){
document.writeln('<optionvalue="'+i+'">'+i+'分</option>');
}
document.write('</select>');
document.write('</div>');
//输出一条横线
document.write('<divstyle="'+s_tiannet_line+'"></div>');
document.write('<divalign="center"id="divTiannetTurn"style="border:0;"Author="tiannet">');
document.write('<inputtype="button"style="'+s_tiannet_turn+'"value="年↑"title="上一年"onClick="tiannetPrevYear();">');
document.write('<inputtype="button"style="'+s_tiannet_turn+'"value="年↓"title="下一年"onClick="tiannetNextYear();">&nbsp;');
document.write('<inputtype="button"style="'+s_tiannet_turn+'"value="月↑"title="上一月"onClick="tiannetPrevMonth();">');
document.write('<inputtype="button"style="'+s_tiannet_turn+'"value="月↓"title="下一月"onClick="tiannetNextMonth();">');
document.write('</div>');
//输出一条横线
document.write('<divstyle="'+s_tiannet_line+'"></div>');
document.write('<tableborder=0cellspacing=0cellpadding=0bgcolor=whiteonselectstart="returnfalse">');
document.write('<trstyle="background-color:#2650A6;font-size:10pt;color:white;height:22px;"Author="tiannet">');
for(vari=0;i<weekName.length;i++){
//输出星期
document.write('<tdwidth="21"align="center"Author="tiannet">'+weekName[i]+'</td>');
}
document.write('</tr>');
document.write('</table>');
//输出天的选择
document.write('<tableborder=0cellspacing=1cellpadding=0bgcolor=whiteonselectstart="returnfalse">');
varn=0;
for(vari=0;i<5;i++){
document.write('<tralign=centerid="trTiannetDay'+i+'">');
for(varj=0;j<7;j++){
document.write('<tdalign="center"id="tdTiannetDay'+n+'"'+
'onClick="tiannetDay=this.innerText;tiannetSetValue(true);"'
+'style="'+s_tiannet_day+'">&nbsp;</td>');
n++;
}
document.write('</tr>');
}
document.write('<tralign=centerid="trTiannetDay5">');
document.write('<tdalign="center"id="tdTiannetDay35"onClick="tiannetDay=this.innerText;tiannetSetValue(true);"'
+'style="'+s_tiannet_day+'">&nbsp;</td>');
document.write('<tdalign="center"id="tdTiannetDay36"onClick="tiannetDay=this.innerText;tiannetSetValue(true);"'
+'style="'+s_tiannet_day+'">&nbsp;</td>');
document.write('<tdalign="right"colspan="5"><ahref="javascript:tiannetClear();"style="'+s_tiannet_link+'">清空</a>'+
'&nbsp;<ahref="javascript:tiannetHideControl();"style="'+s_tiannet_link+'">关闭</a>'+
'&nbsp;<ahref="javascript:tiannetSetValue(true);"style="'+s_tiannet_link+'">确定</a>&nbsp;'+
'</td>');
document.write('</tr>');
document.write('</table>');
document.write('</div>');
//------------------end页面显示部分---------------------------//
//------------------显示日期时间的span标签响应事件---------------------------//
//单击年份span标签响应
functionspanYearCEvent(){
hideElementsById(newArray("selTianYear","tiannetMonthHead"),false);
if(m_bolShowHour)hideElementsById(newArray("tiannetHourHead"),false);
if(m_bolShowMinute)hideElementsById(newArray("tiannetMinuteHead"),false);
hideElementsById(newArray("tiannetYearHead","selTianMonth","selTianHour","selTianMinute"),true);
}
//单击月份span标签响应
functionspanMonthCEvent(){
hideElementsById(newArray("selTianMonth","tiannetYearHead"),false);
if(m_bolShowHour)hideElementsById(newArray("tiannetHourHead"),false);
if(m_bolShowMinute)hideElementsById(newArray("tiannetMinuteHead"),false);
hideElementsById(newArray("tiannetMonthHead","selTianYear","selTianHour","selTianMinute"),true);
}
//单击小时span标签响应
functionspanHourCEvent(){
hideElementsById(newArray("tiannetYearHead","tiannetMonthHead"),false);
if(m_bolShowHour)hideElementsById(newArray("selTianHour"),false);
if(m_bolShowMinute)hideElementsById(newArray("tiannetMinuteHead"),false);
hideElementsById(newArray("tiannetHourHead","selTianYear","selTianMonth","selTianMinute"),true);
}
//单击分钟span标签响应
functionspanMinuteCEvent(){
hideElementsById(newArray("tiannetYearHead","tiannetMonthHead"),false);
if(m_bolShowHour)hideElementsById(newArray("tiannetHourHead"),false);
if(m_bolShowMinute)hideElementsById(newArray("selTianMinute"),false);
hideElementsById(newArray("tiannetMinuteHead","selTianYear","selTianMonth","selTianHour"),true);
}
//根据标签id隐藏或显示标签
functionhideElementsById(arrId,bolHide){
varstrDisplay="";
if(bolHide)strDisplay="none";
for(vari=0;i<arrId.length;i++){
varobj=document.getElementById(arrId[i]);
obj.style.display=strDisplay;
}
}
//------------------end显示日期时间的span标签响应事件---------------------------//
//判断某年是否为闰年
functionisPinYear(year){
varbolRet=false;
if(0==year%4&&((year%100!=0)||(year%400==0))){
bolRet=true;
}
returnbolRet;
}
//得到一个月的天数，闰年为29天
functiongetMonthCount(year,month){
varc=m_aMonHead[month-1];
if((month==2)&&isPinYear(year))c++;
returnc;
}
//重新设置当前的日。主要是防止在翻年、翻月时，当前日大于当月的最大日
functionsetRealDayCount(){
if(tiannetDay>getMonthCount(tiannetYear,tiannetMonth)){
//如果当前的日大于当月的最大日，则取当月最大日
tiannetDay=getMonthCount(tiannetYear,tiannetMonth);
}
}
//在个位数前加零
functionaddZero(value){
if(value<10){
value="0"+value;
}
returnvalue;
}
//取出空格
functiontiannetTrim(str){
returnstr.replace(/(^\s*)|(\s*$)/g,"");
}
//为select创建一个option
functioncreateOption(objSelect,value,text){
varoption=document.createElement("OPTION");
option.value=value;
option.text=text;
objSelect.options.add(option);
}
//往前翻Year
functiontiannetPrevYear(){
if(tiannetYear>999&&tiannetYear<10000){tiannetYear--;}
else{alert("年份超出范围（1000-9999）！");}
tiannetSetDay(tiannetYear,tiannetMonth);
//如果年份小于允许的最小年份，则创建对应的option
if(tiannetYear<tiannetYearSt){
tiannetYearSt=tiannetYear;
createOption(document.all.selTianYear,tiannetYear,tiannetYear+"年");
}
checkSelect(document.all.selTianYear,tiannetYear);
tiannetWriteHead();
}
//往后翻Year
functiontiannetNextYear(){
if(tiannetYear>999&&tiannetYear<10000){tiannetYear++;}
else{alert("年份超出范围（1000-9999）！");return;}
tiannetSetDay(tiannetYear,tiannetMonth);
//如果年份超过允许的最大年份，则创建对应的option
if(tiannetYear>tiannetYearEnd){
tiannetYearEnd=tiannetYear;
createOption(document.all.selTianYear,tiannetYear,tiannetYear+"年");
}
checkSelect(document.all.selTianYear,tiannetYear);
tiannetWriteHead();
}
//选择今天
functiontiannetToday(){
tiannetYear=tiannetDateNow.getFullYear();
tiannetMonth=tiannetDateNow.getMonth()+1;
tiannetDay=tiannetDateNow.getDate();
tiannetSetValue(true);
//tiannetSetDay(tiannetYear,tiannetMonth);
//selectObject();
}
//往前翻月份
functiontiannetPrevMonth(){
if(tiannetMonth>1){tiannetMonth--}else{tiannetYear--;tiannetMonth=12;}
tiannetSetDay(tiannetYear,tiannetMonth);
checkSelect(document.all.selTianMonth,tiannetMonth);
tiannetWriteHead();
}
//往后翻月份
functiontiannetNextMonth(){
if(tiannetMonth==12){tiannetYear++;tiannetMonth=1}else{tiannetMonth++}
tiannetSetDay(tiannetYear,tiannetMonth);
checkSelect(document.all.selTianMonth,tiannetMonth);
tiannetWriteHead();
}
//向span标签中写入年、月、时、分等数据
functiontiannetWriteHead(){
document.all.tiannetYearHead.innerText=tiannetYear+"年";
document.all.tiannetMonthHead.innerText=tiannetMonth+"月";
if(m_bolShowHour)document.all.tiannetHourHead.innerText=""+tiannetHour+"时";
if(m_bolShowMinute)document.all.tiannetMinuteHead.innerText=tiannetMinute+"分";
tiannetSetValue(false);//给文本框赋值，但不隐藏本控件
}
//设置显示天
functiontiannetSetDay(yy,mm){
setRealDayCount();//设置当月真实的日
tiannetWriteHead();
varstrDateFont1="",strDateFont2=""//处理日期显示的风格
for(vari=0;i<37;i++){tiannetArrDay[i]=""};//将显示框的内容全部清空
varday1=1;
varfirstday=newDate(yy,mm-1,1).getDay();//某月第一天的星期几
for(vari=firstday;day1<getMonthCount(yy,mm)+1;i++){
tiannetArrDay[i]=day1;day1++;
}
//如果用于显示日的最后一行的第一个单元格的值为空，则隐藏整行。
//if(tiannetArrDay[35]==""){
//document.all.trTiannetDay5.style.display="none";
//}else{
//document.all.trTiannetDay5.style.display="";
//}
for(vari=0;i<37;i++){
varda=eval("document.all.tdTiannetDay"+i)//书写新的一个月的日期星期排列
if(tiannetArrDay[i]!=""){
//判断是否为周末，如果是周末，则改为红色字体
if(i%7==0||(i+1)%7==0){
strDateFont1="<fontcolor=#f0000>"
strDateFont2="</font>"
}else{
strDateFont1="";
strDateFont2=""
}
da.innerHTML=strDateFont1+tiannetArrDay[i]+strDateFont2;
//如果是当前选择的天，则改变颜色
if(tiannetArrDay[i]==tiannetDay){
da.style.backgroundColor="#CCCCCC";
}else{
da.style.backgroundColor="#EFEFEF";
}
da.style.cursor="hand"
}else{
da.innerHTML="";da.style.backgroundColor="";da.style.cursor="default"
}
}//endfor
tiannetSetValue(false);//给文本框赋值，但不隐藏本控件
}//endfunctiontiannetSetDay
//根据option的值选中option
functioncheckSelect(objSelect,selectValue){
varcount=parseInt(objSelect.length);
if(selectValue<10&&selectValue.toString().length==2){
selectValue=selectValue.substring(1,2);
}
for(vari=0;i<count;i++){
if(objSelect.options[i].value==selectValue){
objSelect.selectedIndex=i;
break;
}
}//for
}
//选中年、月、时、分等下拉框
functionselectObject(){
//如果年份小于允许的最小年份，则创建对应的option
if(tiannetYear<tiannetYearSt){
for(vari=tiannetYear;i<tiannetYearSt;i++){
createOption(document.all.selTianYear,i,i+"年");
}
tiannetYearSt=tiannetYear;
}
//如果年份超过允许的最大年份，则创建对应的option
if(tiannetYear>tiannetYearEnd){
for(vari=tiannetYearEnd+1;i<=tiannetYear;i++){
createOption(document.all.selTianYear,i,i+"年");
}
tiannetYearEnd=tiannetYear;
}
checkSelect(document.all.selTianYear,tiannetYear);
checkSelect(document.all.selTianMonth,tiannetMonth);
if(m_bolShowHour)checkSelect(document.all.selTianHour,tiannetHour);
if(m_bolShowMinute)checkSelect(document.all.selTianMinute,tiannetMinute);
}
//给接受日期时间的控件赋值
//参数bolHideControl-是否隐藏控件
functiontiannetSetValue(bolHideControl){
varvalue="";
if(!tiannetDay||tiannetDay==""){
tiannetOutObject.value=value;
return;
}
varmm=tiannetMonth;
varday=tiannetDay;
if(mm<10&&mm.toString().length==1)mm="0"+mm;
if(day<10&&day.toString().length==1)day="0"+day;
value=tiannetYear+tiannetDateSplit+mm+tiannetDateSplit+day;
if(m_bolShowHour){
varhour=tiannetHour;
if(hour<10&&hour.toString().length==1)hour="0"+hour;
value+=tiannetDateTimeSplit+hour;
}
if(m_bolShowMinute){
varminute=tiannetMinute;
if(minute<10&&minute.toString().length==1)minute="0"+minute;
value+=tiannetTimeSplit+minute;
}
tiannetOutObject.value=value;
//document.all.divTiannetDate.style.display="none";
if(bolHideControl){
tiannetHideControl();
}
}
//是否显示时间
functionshowTime(){
if(!m_bolShowHour&&m_bolShowMinute){
alert("如果要选择分钟，则必须可以选择小时！");
return;
}
hideElementsById(newArray("tiannetHourHead","selTianHour","tiannetMinuteHead","selTianMinute"),true);
if(m_bolShowHour){
//显示小时
hideElementsById(newArray("tiannetHourHead"),false);
}
if(m_bolShowMinute){
//显示分钟
hideElementsById(newArray("tiannetMinuteHead"),false);
}
}
//弹出显示日历选择控件，以让用户选择
functiontiannetPopCalendar(){
//隐藏下拉框，显示相对应的head
hideElementsById(newArray("selTianYear","selTianMonth","selTianHour","selTianMinute"),true);
hideElementsById(newArray("tiannetYearHead","tiannetMonthHead","tiannetHourHead","tiannetMinuteHead"),false);
tiannetSetDay(tiannetYear,tiannetMonth);
tiannetWriteHead();
showTime();
vardads=document.all.divTiannetDate.style;
variX,iY;
varh=document.all.divTiannetDate.offsetHeight;
varw=document.all.divTiannetDate.offsetWidth;
//计算left
if(window.event.x+h>document.body.offsetWidth-10)
iX=window.event.x-h-5;
else
iX=window.event.x+5;
if(iX<0)
iX=0;
//计算top
iY=window.event.y;
if(window.event.y+w>document.body.offsetHeight-10)
iY=document.body.scrollTop+document.body.offsetHeight-w-5;
else
iY=document.body.scrollTop+window.event.y+5;
if(iY<0)
iY=0;
dads.left=iX;
dads.top=iY;
tiannetShowControl();
selectObject();
}
//隐藏日历控件(同时显示被强制隐藏的标签)
functiontiannetHideControl(){
document.all.divTiannetDate.style.display="none";
tiannetShowObject();
arrTiannetHide=newArray();//将被隐藏的标签对象清空
}
//显示日历控件(同时隐藏会遮挡的标签)
functiontiannetShowControl(){
document.all.divTiannetDate.style.display="";
tiannetHideObject("Select");
tiannetHideObject("OBJECT");
}
//根据标签名称隐藏标签。如会遮住控件的select，object
functiontiannetHideObject(strTagName){
x=document.all.divTiannetDate.offsetLeft;
y=document.all.divTiannetDate.offsetTop;
h=document.all.divTiannetDate.offsetHeight;
w=document.all.divTiannetDate.offsetWidth;
for(vari=0;i<document.all.tags(strTagName).length;i++)
{
varobj=document.all.tags(strTagName)[i];
if(!obj||!obj.offsetParent)
continue;
//获取元素对于BODY标记的相对坐标
varobjLeft=obj.offsetLeft;
varobjTop=obj.offsetTop;
varobjHeight=obj.offsetHeight;
varobjWidth=obj.offsetWidth;
varobjParent=obj.offsetParent;
while(objParent.tagName.toUpperCase()!="BODY"){
objLeft+=objParent.offsetLeft;
objTop+=objParent.offsetTop;
objParent=objParent.offsetParent;
}
//alert("控件左端:"+x+"select左端"+(objLeft+objWidth)+"控件底部:"+(y+h)+"select高:"+objTop);
varbolHide=true;
if(obj.style.display=="none"||obj.style.visibility=="hidden"||obj.getAttribute("Author")=="tiannet"){
//如果标签本身就是隐藏的，则不需要再隐藏。如果是控件中的下拉框，也不用隐藏。
bolHide=false;
}
if(((objLeft+objWidth)>x&&(y+h+20)>objTop&&(objTop+objHeight)>y&&objLeft<(x+w))&&bolHide){
//arrTiannetHide.push(obj);//记录被隐藏的标签对象
arrTiannetHide[arrTiannetHide.length]=obj;
obj.style.visibility="hidden";
}
}
}
//显示被隐藏的标签
functiontiannetShowObject(){
for(vari=0;i<arrTiannetHide.length;i++){
//alert(arrTiannetHide[i]);
arrTiannetHide[i].style.visibility="";
}
}
//初始化日期。
functiontiannetInitDate(strDate){
vararr=strDate.split(tiannetDateSplit);
tiannetYear=arr[0];
tiannetMonth=arr[1];
tiannetDay=arr[2];
}
//清空
functiontiannetClear(){
tiannetOutObject.value="";
tiannetHideControl();
}
//任意点击时关闭该控件
functiondocument.onclick(){
with(window.event.srcElement){
if(tagName!="INPUT"&&getAttribute("Author")!="tiannet")
tiannetHideControl();
}
}
//按ESC键关闭该控件
functiondocument.onkeypress(){
if(event.keyCode==27){
tiannetHideControl();
}
}

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

JS实现漂亮的时间选择框效果

热门推荐

随机推荐