This article describes the beautiful time selection box effect of JS. Share it for your reference, as follows:
HTML code part:
<html><script language=javascript src="dataone.js"></script><table align="center"><tr><td><body>(1)Select date only<input type="text" name="date" readOnly onClick="setDay(this);"><br/> (2)Select date and hour<input type="text" name="dateh" readOnly onClick="setDayH(this);"><br/> (3)Select date and hour and minute<input type="text" name="datehm" readOnly onClick="setDayHM(this);"> </body></td></tr></table></html>
dataone.js code:
/***Usage method: * (1) Select only date <input type="text" name="date" readOnly onClick="setDay(this);"> * (2) Select date and hour <input type="text" name="dateh" readOnly onClick="setDayH(this);"> * (3) Select date and hour and minute <input type="text" name="datehm" readOnly onClick="setDayHM(this);"> *Method for setting parameters* (1) Set the date separator setDateSplit(strSplit); default is "-" * (2) Set the separator between date and time setDateTimeSplit(strSplit); default is " " * (3) Set the time separator setTimeSplit(strSplit); default is ":" * (4) Set the separator in (1), (2), (3) setSplit(strDateSplit,strDateTimeSplit,strTimeSplit); * (5) Set the start and end year setYearPeriod(intDateBeg,intDateEnd) * Description: * The default returned date and time format is as follows: 2005-02-02 08:08 */ //--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- s_tiannet_turn_base = "height:16px;font-size:9pt;color:white;border:0 solid #CCCCCC;cursor:hand;background-color:#2650A6;"; //Buttons for year-round, month, etc. var s_tiannet_turn = "width:28px;" + s_tiannet_turn_base; //Close, clear, etc. button styles var s_tiannet_turn2 = "width:22px;" + s_tiannet_turn_base; //Select drop-down box for year-round var s_tiannet_select = "width:64px;display:none;"; //Select the drop-down box of month, hour and minute var s_tiannet_select2 = "width:46px;display:none;"; //Date selection control body style var s_tiannet_body = "width:150;background-color:#2650A6;display:none;z-index:9998;position:absolute;" + "border-left:1 solid #CCCC;border-top:1 solid #CCCC;border-right:1 solid #999999;border-bottom:1 solid #999999;"; //Style of the td showing the day var s_tiannet_day = "width:21px;height:20px;background-color:#D8F0FC;font-size:10pt;"; //Font style var s_tiannet_font = "color:#FFCC00;font-size:9pt;cursor:hand;"; //Link style var s_tiannet_link = "text-decoration:none;font-size:9pt;color:#2650A6;"; //Horily line var s_tiannet_line = "border-bottom:1 solid #6699CC"; //----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- tiannetYearSt = 1950;//Selectable start year var tiannetYearEnd = 2010;//Selectable end year var tiannetDateNow = new Date(); var tiannetYear = tiannetDateNow.getFullYear(); //The initial value of the variable defining year var tiannetMonth = tiannetDateNow.getMonth()+1; //The initial value of the variable defining month var tiannetDay = tiannetDateNow.getDate(); var tiannetHour = 8;//tiannetDateNow.getHours(); var tiannetMinute = 0;//tiannetDateNow.getMinutes(); var tiannetArrDay=new Array(42); //Array that defines the date var tiannetDateSplit = "-"; //Date separator var tiannetDateTimeSplit = " "; //Date separator var tiannetTimeSplit = ":"; //Time separator var tiannetOutObject; //Object that receives date and time var arrTiannetHide = new Array();//The label that is forced to be hidden var m_bolShowHour = false;//Does the hour var m_bolShowMinute = false;//Whether to display minutes var m_aMonHead = new Array(12); //Define the maximum number of days per month in the Gregorian calendar 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; // -------------------------------------------------------------------------///User main call function - select only date function setDay(obj){ tiannetOutObject = obj; //If there is a value in the tag, initialize the date to the current value var strValue = tiannetTrim(tiannetOutObject.value); if( strValue != "" ){ tiannetInitDate(strValue); } tiannetPopCalendar(); } //User main call function - select date and hour function setDayH(obj){ tiannetOutObject = obj; m_bolShowHour = true; //If there is a value in the tag, the date and hour are initialized to the current value var strValue = tiannetTrim(tiannetOutObject.value); if( strValue != "" ){ tiannetInitDate(strValue.substring(0,10)); var hour = strValue.substring(11,13); if( hour < 10 ) tiannetHour = hour.substring(1,2); } tiannetPopCalendar(); } //User main call function - select date and hour and minute function setDayHM(obj){ tiannetOutObject = obj; m_bolShowHour = true; m_bolShowMinute = true; //If there is a value in the tag, initialize the date, hour and minute to the current value var strValue = tiannetTrim(tiannetOutObject.value); if( strValue != "" ){ tiannetInitDate(strValue.substring(0,10)); var time = strValue.substring(11,16); var arr = 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(); } //Set the start date and end date function setYearPeriod(intDateBeg,intDateEnd){ tiannetYearSt = intDateBeg; tiannetYearEnd = intDateEnd; } //Set the date separator. The default is "-" function setDateSplit(strDateSplit){ tiannetDateSplit = strDateSplit; } //Set the separator between date and time. The default is " " function setDateTimeSplit(strDateTimeSplit){ tiannetDateTimeSplit = strDateTimeSplit; } //Set the time separator. The default is ":" function setTimeSplit(strTimeSplit){ tiannetTimeSplit = strTimeSplit; } //Set the separator function setSplit(strDateSplit,strDateTimeSplit,strTimeSplit){ tiannetDateSplit(strDateSplit); tiannetDateTimeSplit(strDateTimeSplit); tiannetTimeSplit(strTimeSplit); tiannetTimeSplit(strTimeSplit); } //Set the default date. The format is: YYYY-MM-DD function setDefaultDate(strDate){ tiannetYear = strDate.substring(0,4); tiannetMonth = strDate.substring(5,7); tiannetDay = strDate.substring(8,10); } //Set the default time. The format is: HH24:MI function setDefaultTime(strTime){ tiannetHour = strTime.substring(0,2); tiannetMinute = strTime.substring(3,5); } // ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ style="'+s_tiannet_body+'" style="This calendar selection control is improved by tiannet based on the experience of previous generations!">'); document.write('<div align="center" id="divTiannetDateText" Author="tiannet" style="padding-top:2px;">'); document.write('<span id="tiannetYearHead" Author="tiannet" style="'+s_tiannet_font+'" '+ 'onclick="spanYearCEvent();">year</span>'); document.write('<select id="selTianYear" style="'+s_tiannet_select+'" Author="tiannet" '+ ' onChange="tiannetYear=this.value;tiannetSetDay(tiannetYear,tiannetMonth);document.all.tiannetYearHead.style.display=/'/';'+ 'this.style.display=/'none/';">'); for(var i=tiannetYearSt;i <= tiannetYearEnd;i ++){ document.writeln('<option value="' + i + '">' + i + 'year</option>'); } document.write('</select>'); document.write('<span id="tiannetMonthHead" Author="tiannet" style="'+s_tiannet_font+'" '+ 'onclick="spanMonthCEvent();">month</span>'); document.write('<select id="selTianMonth" style="'+s_tiannet_select2+'" Author="tiannet" '+ 'onChange="tiannetMonth=this.value;tiannetSetDay(tiannetYear,tiannetMonth);document.all.tiannetMonthHead.style.display=/'/';'+ 'this.style.display=/'none/';">'); for(var i=1;i <= 12;i ++){ document.writeln('<option value="' + i + '">' + i + 'month</option>'); } document.write('</select>'); //document.write('</div>'); //document.write('<div align="center" id="divTiannetTimeText" Author="tiannet">'); document.write('<span id="tiannetHourHead" Author="tiannet" style="'+s_tiannet_font+'display:none;" '+ 'onclick="spanHourCEvent();">When</span>'); document.write('<select id="selTianHour" style="'+s_tiannet_select2+'display:none;" Author="tiannet" '+ ' onChange="tiannetHour=this.value;tiannetWriteHead();document.all.tiannetHourHead.style.display=/'/';' + 'this.style.display=/'none/';">'); for(var i=0;i <= 23;i ++){ document.writeln('<option value="' + i + '">' + i + 'time</option>'); } document.write('</select>'); document.write('<span id="tiannetMinuteHead" Author="tiannet" style="'+s_tiannet_font+'display:none;" '+ 'onclick="spanMinuteCEvent();">point</span>'); document.write('<select id="selTianMinute" style="'+s_tiannet_select2+'display:none;" Author="tiannet" '+ ' onChange="tiannetMinute=this.value;tiannetWriteHead();document.all.tiannetMinuteHead.style.display=/'/';'+ 'this.style.display=/'none/';">'); for(var i=0;i <= 59;i ++){ document.writeln('<option value="' + i + '">' + i + 'point</option>'); } document.write('</select>'); document.write('</div>'); //Output a horizontal line document.write('<div style="'+s_tiannet_line+'"></div>'); document.write('<div align="center" id="divTiannetTurn" style="border:0;" Author="tiannet">'); document.write('<input type="button" style="'+s_tiannet_turn+'" value="year ↑" onClick="tiannetPrevYear();">'); document.write('<input type="button" style="'+s_tiannet_turn+'" value="year ↓" onClick="tiannetNextYear();">'); document.write('<input type="button" style="'+s_tiannet_turn+'" value="year ↓" onClick="tiannetNextYear();">'); document.write('<input type="button" style="'+s_tiannet_turn+'" value="month↑" onClick="tiannetPrevMonth();">'); document.write('<input type="button" style="'+s_tiannet_turn+'" value="month↓" onClick="tiannetNextMonth();">'); document.write('</div>'); //Output a horizontal line document.write('<div style="'+s_tiannet_line+'"></div>'); document.write('<table border=0 cellspacing=0 cellpadding=0 bgcolor=white onselectstart="return false">'); document.write(' <tr style="background-color:#2650A6;font-size:10pt;color:white;height:22px;" Author="tiannet">'); for(var i =0;i < weekName.length;i ++){ //Output weekday document.write('<td align="center" Author="tiannet">' + weekName[i] + '</td>'); } document.write(' </tr>'); document.write('</table>'); //Select of output day document.write('<table border=0 cellpacing=1 cellpadding=0 bgcolor=white onselectstart="return false">'); var n = 0; for (var i=0;i<5;i++) { document.write (' <tr align=center id="trTiannetDay' + i + '" >'); for (var j=0;j<7;j++){ document.write('<td align="center" id="tdTiannetDay' + n + '" '+ 'onClick="tiannetDay=this.innerText;tiannetSetValue(true);" ' +' style="' + s_tiannet_day + '"></td>'); n ++; } document.write (' <tr align=center id="trTiannetDay5" >'); document.write('<td align="center" id="tdTiannetDay35" onClick="tiannetDay=this.innerText;tiannetSetValue(true);" ' +' style="' + s_tiannet_day + '"></td>'); document.write('<td align="center" id="tdTiannetDay36" onClick="tiannetDay=this.innerText;tiannetSetValue(true);" ' +' style="' + s_tiannet_day + '"></td>'); document.write('<td align="right" colspan="5"><a href="javascript:tiannetClear();" style="' + s_tiannet_link + '">Clear</a>'+ '<a href="javascript:tiannetHideControl();" style="' + s_tiannet_link + '">Close</a>' + '<a href="javascript:tiannetSetValue(true);" style="' + s_tiannet_link + '">OK</a>' + '</td>'); document.write (' </tr>'); document.write('</table>'); document.write('</div>'); //------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- spanYearCEvent(){ hideElementsById(new Array("selTianYear","tiannetMonthHead"),false); if(m_bolShowHour) hideElementsById(new Array("tiannetHourHead"),false); if(m_bolShowMinute) hideElementsById(new Array("tiannetMinuteHead"),false); hideElementsById(new Array("tiannetYearHead","selTianMonth","selTianHour","selTianMinute"),true); } //Click the month span tag to respond function spanMonthCEvent(){ hideElementsById(new Array("selTianMonth","tiannetYearHead"),false); if(m_bolShowHour) hideElementsById(new Array("tiannetHourHead"),false); if(m_bolShowMinute) hideElementsById(new Array("tiannetMinuteHead"),false); hideElementsById(new Array("tiannetMonthHead","selTianYear","selTianHour","selTianMinute"),true); } //Click the hour span tag response function spanHourCEvent(){ hideElementsById(new Array("tiannetYearHead","tiannetMonthHead"),false); if(m_bolShowHour) hideElementsById(new Array("selTianHour"),false); if(m_bolShowMinute) hideElementsById(new Array("tiannetMinuteHead"),false); hideElementsById(new Array("tiannetHourHead","selTianYear","selTianMonth","selTianMinute"),true); } //Click the minute span tag response function spanMinuteCEvent(){ hideElementsById(new Array("tiannetYearHead","tiannetMonthHead"),false); if(m_bolShowHour) hideElementsById(new Array("tiannetHourHead"),false); if(m_bolShowMinute) hideElementsById(new Array("selTianMinute"),false); hideElementsById(new Array("tiannetMinuteHead","selTianYear","selTianMonth","selTianHour"),true); } //Hide or display tag function hideElementsById(arrId,bolHide){ var strDisplay = ""; if(bolHide) strDisplay = "none"; for(var i = 0;i < arrId.length;i ++){ var obj = document.getElementById(arrId[i]); obj.style.display = strDisplay; } } //------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ if((month==2)&&isPinYear(year)) c++; return c; } //Reset the current day. Mainly to prevent the current day from being greater than the maximum day of the month when the year is overturned or month is overturned. function setRealDayCount() { if( tiannetDay > getMonthCount(tiannetYear,tiannetMonth) ) { //If the current day is greater than the maximum day of the month, then the maximum day of the month is taken. tiannetDay = getMonthCount(tiannetYear,tiannetMonth); } } //Add zero before single digits function addZero(value){ if(value < 10 ){ value = "0" + value; } return value; } //Retrieve space function tiannetTrim(str) { return str.replace(/(^/s*)|(/s*$)/g,""); } //Create an option function createOption(objSelect,value,text){ var option = document.createElement("OPTION"); option.value = value; option.text = text; objSelect.options.add(option); } //Flip forward Year function tiannetPrevYear() { if(tiannetYear > 999 && tiannetYear <10000){tiannetYear--;} else{alert("Year out of range (1000-9999)!");} tiannetSetDay(tiannetYear,tiannetMonth); //If the year is less than the minimum allowed year, create the corresponding option if( tiannetYear < tiannetYearSt ) { tiannetYearSt = tiannetYear; createOption(document.all.selTianYear,tiannetYear,tiannetYear + "year"); } checkSelect(document.all.selTianYear,tiannetYear,tiannetYear); tiannetWriteHead(); } //Flip Year function tiannetNextYear() { if(tiannetYear > 999 && tiannetYear <10000){tiannetYear++;} else{alert("Year out of range (1000-9999)!"); return;} tiannetSetDay(tiannetYear,tiannetMonth); //If the year exceeds the maximum allowed year, create the corresponding option if( tiannetYear > tiannetYearEnd ) { tiannetYearEnd = tiannetYear; createOption(document.all.selTianYear,tiannetYear,tiannetYear + "year"); } checkSelect(document.all.selTianYear,tiannetYear,tiannetYear); tiannetWriteHead(); } //Select today function tiannetToday() { tiannetYear = tiannetDateNow.getFullYear(); tiannetMonth = tiannetDateNow.getMonth()+1; tiannetDay = tiannetDateNow.getDate(); tiannetSetValue(true); //tiannetSetDay(tiannetYear,tiannetMonth); //selectObject(); } //Follow the month of the month function tiannetPrevMonth() { if(tiannetMonth>1){tiannetMonth--}else{tiannetYear--;tiannetMonth=12;} tiannetSetDay(tiannetYear,tiannetMonth); checkSelect(document.all.selTianMonth,tiannetMonth); tiannetWriteHead(); } //Follow the month function tiannetNextMonth() { if(tiannetMonth==12){tiannetYear++;tiannetMonth=1}else{tiannetMonth++} tiannetSetDay(tiannetYear,tiannetMonth); checkSelect(document.all.selTianMonth,tiannetMonth); tiannetWriteHead(); } //Write year, month, time, minute and other data into the span tag function tiannetWriteHead(){ document.all.tiannetYearHead.innerText = tiannetYear + "year"; document.all.tiannetMonthHead.innerText = tiannetMonth + "month"; if( m_bolShowHour ) document.all.tiannetHourHead.innerText = " "+tiannetHour + "time"; if( m_bolShowMinute ) document.all.tiannetMinuteHead.innerText = tiannetMinute + "minutes"; tiannetSetValue(false);// Assign values to the text box, but not hide this control} //Set the display day function tiannetSetDay(yy,mm) { setRealDayCount();//Set the real day of the month tiannetWriteHead(); var strDateFont1 = "", strDateFont2 = "" //Train the style of the date display for (var i = 0; i < 37; i++){tiannetArrDay[i]=""}; //Clear all the contents of the display box var day1 = 1; var firstday = new Date(yy,mm-1,1).getDay(); //Day of the week of the first day of a certain month for (var i = firstday; day1 < getMonthCount(yy,mm)+1; i++){ tiannetArrDay[i]=day1;day1++; } // If the value of the first cell used to display the last row of the day is empty, hide the entire row. //if(tiannetArrDay[35] == ""){ // document.all.trTiannetDay5.style.display = "none"; //} else { // document.all.trTiannetDay5.style.display = ""; //} for (var i = 0; i < 37; i++){ var da = eval("document.all.tdTiannetDay"+i) //Writing the date and week arrangement of the new month if (tiannetArrDay[i]!="") { //Judge whether it is a weekend, if it is a weekend, change to red font if(i % 7 == 0 || (i+1) % 7 == 0){ strDateFont1 = "<font color=#f0000>" strDateFont2 = "</font>" } else { strDateFont1 = ""; strDateFont2 = "" } da.innerHTML = strDateFont1 + tiannetArrDay[i] + strDateFont2; //If it is the currently selected day, change the color if(tiannetArrDay[i] == tiannetDay ) { da.style.backgroundColor = "#CCCCCC"; } else { da.style.backgroundColor = "#EFEF"; } da.style.cursor="hand" } else { da.innerHTML="";da.style.backgroundColor="";da.style.cursor="default" } }//end for tiannetSetValue(false);//assign a value to the text box, but not hide this control}//end function tiannetSetDay //Select option function checkSelect(objSelect,selectValue) { var count = parseInt(objSelect.length); if( selectValue < 10 && selectValue.toString().length == 2) { selectValue = selectValue.substring(1,2); } for(var i = 0;i < count;i ++){ if(objSelect.options[i].value == selectValue){ objSelect.selectedIndex = i; break; } }//for } //Select the drop-down box function selectObject(){ //If the year is less than the minimum allowed year, create the corresponding option if( tiannetYear < tiannetYearSt ) { for( var i = tiannetYear;i < tiannetYearSt;i ++ ){ createOption(document.all.selTianYear,i,i + "year"); } tiannetYearSt = tiannetYear; } //If the year exceeds the maximum allowed year, create the corresponding option if( tiannetYear > tiannetYearEnd ) { for( var i = tiannetYearEnd+1;i <= tiannetYear;i ++ ){ createOption(document.all.selTianYear,i,i + "year"); } 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); } // Assign a value to the control that accepts date and time// Parameters bolHideControl - Whether to hide the control function tiannetSetValue(bolHideControl){ var value = ""; if( !tiannetDay || tiannetDay == "" ){ tiannetOutObject.value = value; return; } var mm = tiannetMonth; var day = 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 ){ var hour = tiannetHour; if( hour < 10 && hour.toString().length == 1 ) hour = "0" + hour; value += tiannetDateTimeSplit + hour; } if( m_bolShowMinute ){ var minute = 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(); } } //Does it display time function showTime(){ if( !m_bolShowHour && m_bolShowMinute){ alert("If you want to select minutes, you must be able to select hours!"); return; } hideElementsById(new Array("tiannetHourHead","selTianHour","tiannetMinuteHead","selTianMinute"),true); if( m_bolShowHour ){ //Show hours hideElementsById(new Array("tiannetHourHead"),false); } if( m_bolShowMinute ){ //Show minutes hideElementsById(new Array("tiannetHourHead"),false); } if( m_bolShowMinute ){ //Show minutes hideElementsById(new Array("tiannetMinuteHead"),false); } } //The calendar selection control pops up to let the user select function tiannetPopCalendar(){ //Hide the drop-down box to display the corresponding head hideElementsById(new Array("selTianYear","selTianMonth","selTianHour","selTianMinute"),true); hideElementsById(new Array("tiannetYearHead","tiannetMonthHead","tiannetMinuteHead"),false); tiannetSetDay(tiannetYear,tiannetMonth); tiannetWriteHead(); showTime(); var dads = document.all.divTiannetDate.style; var iX, iY; var h = document.all.divTiannetDate.offsetHeight; var w = document.all.divTiannetDate.offsetWidth; //calculate 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; //Calculate 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(); } //Hide calendar control (showing the forced hidden tags at the same time) function tiannetHideControl(){ document.all.divTiannetDate.style.display = "none"; tiannetShowObject(); arrTiannetHide = new Array();//Clear the hidden tag object} //Show calendar control (hide the obscured tags at the same time) function tiannetShowControl(){ document.all.divTiannetDate.style.display = ""; tiannetHideObject("Select"); tiannetHideObject("OBJECT"); } //Hide tags according to the tag name. If the select of the control will be blocked, object function tiannetHideObject(strTagName) { x = document.all.divTiannetDate.offsetLeft; y = document.all.divTiannetDate.offsetTop; h = document.all.divTiannetDate.offsetHeight; w = document.all.divTiannetDate.offsetWidth; for (var i = 0; i < document.all.tags(strTagName).length; i++) { var obj = document.all.tags(strTagName)[i]; if (! obj || ! obj.offsetParent) continue; // Get the relative coordinates of the element for the BODY tag var objLeft = obj.offsetLeft; var objTop = obj.offsetTop; var objHeight = obj.offsetHeight; var objWidth = obj.offsetWidth; var objParent = obj.offsetParent; while (objParent.tagName.toUpperCase() != "BODY"){ objLeft += objParent.offsetLeft; objTop += objParent.offsetTop; objParent = objParent.offsetParent; } //alert("Left end of the control:" + x + "select left end" + (objLeft + objWidth) + "bottom of the control:" + (y+h) + "select high:" + objTop); var bolHide = true; if( obj.style.display == "none" || obj.style.visibility == "hidden" || obj.getAttribute("Author") == "tiannet" ){ //If the tag itself is hidden, it does not need to be hidden anymore. If it is a drop-down box in the control, it does not need to be hidden. bolHide = false; } if( ( (objLeft + objWidth) > x && (y + h + 20) > objTop && (objTop+objHeight) > y && objLeft < (x+w) ) && bolHide ){ //arrTiannetHide.push(obj);//Record hidden tag object arrTiannetHide[arrTiannetHide.length] = obj; obj.style.visibility = "hidden"; } } } //Show hidden tag function tiannetShowObject(){ for(var i = 0;i < arrTiannetHide.length;i ++){ //alert(arrTiannetHide[i]); arrTiannetHide[i].style.visibility = ""; } } //Initialization date. function tiannetInitDate(strDate){ var arr = strDate.split(tiannetDateSplit); tiannetYear = arr[0]; tiannetMonth = arr[1]; tiannetDay = arr[2]; } //Clear function tiannetClear(){ tiannetOutObject.value = ""; tiannetHideControl(); } //Close the control when clicking any function document.onclick(){ with(window.event.srcElement){ if (tagName != "INPUT" && getAttribute("Author") != "tiannet") tiannetHideControl(); } } //Press the ESC key to close the control function document.onkeypress(){ if( event.keyCode == 27 ){ tiannetHideControl(); } }For more information about JavaScript related content, please check out the topics of this site: "Summary of JSON operation skills in JavaScript", "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation special effects and techniques", "Summary of JavaScript errors and debugging skills", "Summary of JavaScript data structures and algorithm skills", "Summary of JavaScript traversal algorithms and techniques" and "Summary of JavaScript mathematical operations usage"
I hope this article will be helpful to everyone's JavaScript programming.