この記事では、JSの美しい時間選択ボックス効果について説明します。次のように、参照のために共有してください。
HTMLコードパーツ：
<html> <スクリプト言語= javascript src = "dataone.js"> </scrip> <table align = "center"> <tr> <td> <body>（1）select dateのみ<入力タイプ= "テキスト" name = "date =" readonly onclick = "setday（this）;"> <br/>（2）selecting date <inpunt < onclick = "setDayh（this）;"> <br/>（3）select date and hour and gunter <入力型= "text" name = "datehm" readonly onclick = "setdayhm（this）;"> </body> </td> </tr> </table> </html>
dataone.jsコード：
/***使用方法： *（1）SELECT DATE <入力タイプ= "テキスト" name = "date" readonly onclick = "setday（this）;"> *（2）select date and hour <入力タイプ= "テキスト" name = "dateh" readonly onclick = "setdayh（this）; onclick = "setDayhm（this）;"> *パラメーターを設定するメソッド *（1）日付セパレーターsetDatesplit（strsplit）を設定します。デフォルトは「 - 」 *（2）セパレーターを日付と時刻の間に設定します。デフォルトは "" *（3）Time Separator sittimessplit（strsplit）を設定します。デフォルトは "："： " *（4）セパレーターを（1）、（2）、（3）setSplit（strdatesplit、strdateTeTetimsplit、strtimessplit）に設定します。 *（5）開始年と終了年の設定SetYearPeriod（intdatebeg、intdateEnd） *説明： *デフォルトの返された日付と時刻形式は次のとおりです。2005-02-0208:08 */ //--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- s_tiannet_turn_base = "高さ：16px; font-size：9pt; color：white; border：0 solid #cccccc; cursor：hand; background-color：＃2650a6;"; //一年中、月などのボタン。vars_tiannet_turn= "width：28px;" + s_tiannet_turn_base; //閉じる、クリアなど。ボタンスタイルvar s_tiannet_turn2 = "width：22px;" + s_tiannet_turn_base; //一年中のvar s_tiannet_select = "width：64px; display：none;"; //月、時間、分のドロップダウンボックスを選択します。 //デート選択コントロールボディスタイル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＃99999;"; //日を示すTDのスタイル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スタイルvar s_tiannet_link = "テキスト - 廃止：なし; font-size：9pt; color：＃2650a6;"; // horily line var s_tiannet_line = "border-bottom：1 solid＃6699cc"; //----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- tiannetYearSt = 1950;//Selectable start year var tiannetYearEnd = 2010; //選択可能な終了年var tiannetdatenow = new date（）; var tiannetyear = tiannetdatenow.gettlyear（）; // var tiannetmonth = tiannetdatenow.getmonth（）+1; //月を定義する変数の初期値var tiannetday = tiannetdatenow.getDate（）; var tiannethour = 8; // tiannetdatenow.gethours（）; var tiannetminute = 0; // tiannetdatenow.getMinutes（）; var tiannetarrday = new Array（42）; //日付を定義する配列var tiannetdatesplit = " - "; //日付セパレーターvar tiannetdateTitimessplit = ""; //日付セパレーターvar tiannettimesplit = "："; // Time Separator var tiannetoutobject; //日付と時刻を受信するオブジェクトvar arrtiannethide = new array（）; //非表示に強制されたラベルvar m_bolshowhour = false; // hour hour var m_bolshowminute = false; //グレゴリオカレンダーで月額最大日数を定義する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; // ------------------------------------------------------------------------- //ユーザーメインコール関数 - [日付関数のみ] setday（obj）{tiannetoutobject = obj; //タグに値がある場合、日付を現在の値に初期化var strvalue = tiannettrim（tiannetoutobject.value）; if（strvalue！= ""）{tiannetinitdate（strvalue）; } tiannetpopcalendar（）; } //ユーザーメインコール関数-Select Date and Hour関数SetDayh（obj）{tiannetoutobject = obj; m_bolshowhour = true; //タグに値がある場合、日付と時間は現在の値に初期化されます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（）; } //ユーザーメインコール関数 - 日付と時間と微細関数を選択しましたsetDayhm（obj）{tiannetoutobject = obj; m_bolshowhour = true; m_bolshowminute = true; //タグに値がある場合は、現在の値に日付、時間、分を初期化var strvalue = tiannetObject.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（）; } //開始日と終了日関数を設定しますsetyearperiod（intdatebeg、intdateend）{tiannetyearst = intdatebeg; tiannetyearend = intdateend; } //日付分離器を設定します。デフォルトは「 - 」function setdatesplit（strdatesplit）{tiannetdatesplit = strdatesplit;です。 } //日付と時刻の間に分離器を設定します。デフォルトは "" function setDateTimesplit（strdatetimessplit）{tiannetdateTeTimsplit = strdatetimessplit;です。 } //タイムセパレーターを設定します。デフォルトは "：" function sittimessplit（strtimessplit）{tiannettimesplit = strtimessplit;です。 } //セパレータ関数setsplit（strdatesplit、strdatetimesplit、strtimessplit）{tiannetdatesplit（strdatesplit）; tiannetdatetimesplit（strdatetimesplit）; tiannettimesplit（strtimesplit）; tiannettimesplit（strtimesplit）; } //デフォルトの日付を設定します。フォーマットは次のとおりです。yyyy-mm-dd関数setdefaultdate（strdate）{tiannetyear = strdate.substring（0,4）; tiannetmonth = strdate.substring（5,7）; tiannetday = strdate.substring（8,10）; } //デフォルト時間を設定します。フォーマットは次のとおりです。HH24：MI関数SetDefaultTime（STRTIME）{tiannethour = strtime.substring（0,2）; tiannetminute = strtime.substring（3,5）; } // ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ style = "'+s_tiannet_body+'" style = "このカレンダー選択制御は、前世代の経験に基づいてtiannetによって改善されます！"> '）; document.write（ '<div align = "center" id = "divtiannetdateText"著者= "tiannet" style = "padding-top：2px;">'）; document.write（ '<span id = "tiannetyearhead"著者= "tiannet" style = "'+s_tiannet_font+'"'+'onclick = "spanyearcevent（）;"> year </span>'）; document.write（ '<select id = "seltianyear" style = "'+s_tiannet_select+'" author = "tiannet"'+'onchange = "tiannetyear = this.value; tiannetyear、tiannetmonth）; document.all.alnetyearhead.style.style.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"著者= "tiannet" style = "'+s_tiannet_font+'"'+'onclick = "spanmonthcevent（）;">月</span>'）; document.write（ '<select id = "seltianmonth" style = "'+s_tiannet_select2+'" author = "tiannet"'+'onchange = "tiannetmonth = this.value; tiannetyear、tiannetmonth）; document.all.alnetmonth.tyle.disply.disply.disply.dismonthhead 'this.style.display =/' none/'; ">'）; for（var i = 1; i <= 12; i ++）{document.writeln（ '<option value = "' + i + '">' + 'month </option>'）; } document.write（ '</select>'）; //document.write（ '</div>'）; //document.write('<divalign = "center" id = "divtiannettimetext"著者= "tiannet"> '）; document.write（ '<span id = "tiannethourhead"著者= "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.all.tiannethour.style.display =/'/'/'/'/'+ 'this.style.display =/' none/'; ">'）; for（var i = 0; i <= 23; i ++）{document.writeln（ '<option value = "' + i + '">' + 'time </option>'）; } document.write（ '</select>'）; document.write（ '<span id = "tiannetminutehead"著者= "tiannet" style = "'+s_tiannet_font+'display：none;"'+'onclick = "spanminutevent（）;"> point </span>'）; document.write（ '<select id = "seltianminute" style = "'+s_tiannet_select2+'display：none;" author = "tiannet"'+'onchange = "tiannetminute = this.value; tiannetwritehead（）; document.all.all.all.tyle.style.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>'）; //水平線document.writeを出力（ '<div style = "'+s_tiannet_line+'"> </div>'）; document.write（ '<div align = "center" id = "divtiannetturn" style = "border：0;"著者= "tiannet">'）; document.write（ '<input type = "button" style = "'+s_tiannet_turn+'" value = "年↑" 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 = "月↑" onclick = "tiannetprevmonth（）;">'）; document.write（ '<input type = "button" style = "'+s_tiannet_turn+'" value = "月↓" onclick = "tiannetnextmonth（）;">'）; document.write（ '</div>'）; //水平線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"著者= "tiannet">' + weekname [i] + '</td>'）; } document.write（ '</tr>'）; document.write（ '</table>'）; //出力日の選択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：tiannethecontrol（ '"> 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）diselementsbyid（new Array（ "tiannethourhead"）、false）; if（m_bolshowminute）diselementsbyid（new Array（ "tiannetminutehead"）、false）; digelementsbyid（new Array（ "tiannetyearhead"、 "seltianmonth"、 "seltianhour"、 "seltianminute"）、true）; } //月間スパンタグをクリックしてfunction function spanmonthcevent（）{diselementsbyid（new array（ "seltianmonth"、 "tiannetyearhead"）、false）; if（m_bolshowhour）diselementsbyid（new Array（ "tiannethourhead"）、false）; if（m_bolshowminute）diselementsbyid（new Array（ "tiannetminutehead"）、false）; HidelementsByid（new Array（ "tiannetmonthhead"、 "seltianyear"、 "seltianhour"、 "seltianminute"）、true）; } // hour spanタグ応答関数spanhourcevent（）{diselementsbyid（new array（ "tiannetyearhead"、 "tiannetmonthhead"）、false）をクリックします。 if（m_bolshowhour）diselementsbyid（new Array（ "seltianhour"）、false）; if（m_bolshowminute）diselementsbyid（new Array（ "tiannetminutehead"）、false）; digelementsbyid（new Array（ "tiannethourhead"、 "seltianyear"、 "seltianmonth"、 "seltianminute"）、true）; } // minuteスパンタグ応答関数spanminutecevent（）{diselementsbyid（new array（ "tiannetyearhead"、 "tiannetmonthhead"）、false）をクリックします。 if（m_bolshowhour）diselementsbyid（new Array（ "tiannethourhead"）、false）; if（m_bolshowminute）diselementsbyid（new Array（ "seltianminute"）、false）; HidelementsByid（new Array（ "tiannetminutehead"、 "seltianyear"、 "seltianmonth"、 "seltianhour"）、true）; } //タグ関数hidelementsbyid（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 ++; c; } //現在の日をリセットします。主に、現在の日が、年が覆されたり月が覆されたりする月の最大日よりも大きくなるのを防ぐため。関数setRealdayCount（）{if（tiannetday> getMonthCount（Tiannetyear、tiannetmonth））{//現在の日が月の最大日よりも大きい場合、月の最大日が取られます。 tiannetday = getMonthCount（tiannetyear、tiannetmonth）; }} //単一数字の前にゼロを追加する関数addzero（value）{if（value <10）{value = "0" + value; } return値; } //空間関数tiannettrim（str）{return str.replace（/（^/s*）|（/s*$）/g、 ""）; } //オプション関数createOption（objselect、value、text）{var option = document.createelement（ "option"）; option.value = value; option.text = text; objselect.options.add（option）; } //フリップフォワード年関数tiannetprevyear（）{if（tiannetyear> 999 && tiannetyear <10000）{tiannetyear-;} elsert（ "年の範囲外（1000-9999）！"）;} tiannetsetday（tianneteear、tiannetmonth）; //年が許可されている年が最小年未満の場合、対応するオプションを作成します（tiannetyear <tiannetyearst）{tiannetyearst = tiannetyear; createOption（document.all.seltianyear、tiannetyear、tiannetyear + "year"）; } checkSelect（document.all.seltianyear、tiannetyear、tiannetyear）; tiannetwritehead（）; } // flip year関数tiannetnextyear（）{if（tiannetyear> 999 && tiannetyear <10000）{tiannetyear ++;} else {alert（ "year of of of range（1000-9999）！"）; return;} tiannetsetday（tiannetyear、tiannetmonth）; //年が許容年が最大年を超えた場合、対応するオプションを作成します（tiannetyear> tiannetyearend）{tiannetyearend = tiannetyear; createOption（document.all.seltianyear、tiannetyear、tiannetyear + "year"）; } checkSelect（document.all.seltianyear、tiannetyear、tiannetyear）; tiannetwritehead（）; } // today関数tiannettoday（）{tiannetyear = tiannetdatenow.getFullyear（）; tiannetmonth = tiannetdatenow.getmonth（）+1; tiannetday = tiannetdatenow.getDate（）; tiannetsetvalue（true）; // tiannetsetday（tiannetyear、tiannetmonth）; // SelectObject（）; } //月の月に従ってください関数tiannetprevmonth（）{if（tiannetmonth> 1）{tiannetmonth - } else {tiannetyear - ; tiannetmonth = 12;} tiannetsetday（tiannetyear、tiannetmonth）; CheckSelect（document.all.seltianmonth、tiannetmonth）; tiannetwritehead（）; } //月間関数tiannetnextmonth（）{if（tiannetmonth == 12）{tiannetyear ++; tiannetmonth = 1} else {tiannetmonth ++} tiannetsetday（tiannetyear、tiannetmonth）; CheckSelect（document.all.seltianmonth、tiannetmonth）; tiannetwritehead（）; } //年、月、時間、分、その他のデータをスパンタグ関数に書き込み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）; //テキストボックスに値を割り当てますが、このコントロールを非表示にしないでください} //ディスプレイデイ機能TIANNETSETDAY（YY、MM）を設定{setRealDayCount（）; //月の実際の日を設定するtiannetwritehead（） var strdatefont1 = ""、strdatefont2 = "" //日付ディスプレイのスタイルをトレーニング（var i = 0; i <37; i ++）{tiannetarrday [i] = ""}; //ディスプレイボックスのすべての内容をクリアvarday1 = 1; var shirstday = new Date（yy、mm-1,1）.getday（）; //特定の月の最初の日の曜日（var i = 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（var i = 0; i <37; i ++）{var da = eval（ "document.all.all.tdtiannetday"+i）//新しい月の日付と週のアレンジメントを書いているif（tiannetarrday [i]！= ""）{//週末かどうかを判断します。 strdatefont1 = "<font color =＃f0000>" strdatefont2 = "</font>"} else {strdatefont1 = ""; strdatefont2 = ""} da.innerhtml = strdatefont1 + tiannetarrday [i] + strdatefont2; //現在選択されている日の場合、色を変更しますif（tiannetarrday [i] == tiannetday）{da.style.backgroundcolor = "#cccccc"; } else {da.style.backgroundcolor = "#efef"; } da.style.cursor = "hand"} else {da.innerhtml = ""; da.tyle.backgroundcolor = ""; da.style.cursor = "default"} // tiannetsetvalueの終了（false）; 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;壊す; }} // for} //ドロップダウンボックス関数selectObject（）{//年が最低年度未満の場合、対応するオプションを作成する場合、（tiannetyear <tiannetyearst）{for（var i = tiannetyear; i <tiannetyearst; i ++）{create option（document.all.all.altianyear、 ";"） } tiannetyearst = tiannetyear; } //年が許容年が最大年を超えた場合、対応するオプションを作成します（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）; } //日付と時刻を受け入れるコントロールに値を割り当てます//パラメーターBolhideControl-コントロール機能を非表示にするかどうかtiannetsetValue（bolhidecontrol）{var value = ""; if（！tiannetday || tiannetday == ""）{tiannetoutobject.value = value;戻る; } 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;値= tiannetyear + tiannetdatesplit + mm + tiannetdatesplit + day; if（m_bolshowhour）{var hour = tiannethour; if（hour <10 && hour.toString（）。length == 1）hour = "0" + hour; value + = tiannetdateTetimessplit + hour; } if（m_bolshowminute）{var minute = tiannetminute; if（minute <10 && minute.toString（）。length == 1）minute = "0" + mink; value + = tiannettimesplit + minuts; } tiannetoutobject.value = value; //document.all.divtiannetdate.style.display = "none"; if（bolhidecontrol）{tiannethidecontrol（）; }} // time関数showtime（）{if（！m_bolshowhour && m_bolshowminute）{alert（ "時間を選択する場合は、時間を選択できる必要があります！"）;戻る; } digelementsByid（new Array（ "tiannethourhead"、 "seltianhour"、 "tiannetminutehead"、 "seltianminute"）、true）; if（m_bolshowhour）{// hours hishelementsbyid（new Array（ "tiannethourhead"）、false）; } if（m_bolshowminute）{// minutes diselementsbyid（new Array（ "tiannethourhead"）、false）; } if（m_bolshowminute）{// minutes diselementsbyid（new Array（ "tiannetminutehead"）、false）; }} //カレンダーの選択コントロールがポップアップして、ユーザーが関数tiannetpopcalendar（）{//ドロップダウンボックスを非表示にして、対応するHead HishelementsByid（ "seltianyear"、 "seltianhour"、 "seltianminute"）、trueを表示します。 HidelementsByid（new Array（ "tiannetyearhead"、 "tiannetmonthhead"、 "tiannetminutehead"）、false）; tiannetsetday（tiannetyear、tiannetmonth）; tiannetwritehead（）;ショータイム（）; var dads = document.all.divtiannetdate.style; var ix、iy; var h = document.all.divtiannetdate.offsetheight; var w = document.all.divtiannetdate.offsetwidth; //左の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.offseetheight -w -5; else iy = document.body.scrolltop + window.event.y + 5; if（iy <0）iy = 0; dads.left = ix; dads.top = iy; tiannetshowcontrol（）; SelectObject（）; } //カレンダーコントロールを非表示（強制的に非表示タグを同時に表示する）関数tiannethidecontrol（）{document.all.divtiannetdate.style.display = "none"; tiannetshowobject（）; arrtiannethide = new array（）; //非表示のタグオブジェクトをクリア} //カレンダーコントロールを表示する（同時に不明瞭なタグを非表示）関数tiannetshowcontrol（）{document.all.al.divtiannetdate.style.display = ""; tiannethideobject（ "select"）; tiannethideobject（ "object"）; } //タグ名に従ってタグを非表示にします。コントロールの選択がブロックされる場合、オブジェクト関数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）継続; //ボディタグの要素の相対座標を取得します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（ "コントロールの左端：" + x + "左端の選択" +（objleft + objwidth） + "コントロールの下部：" +（y + h） + "select high：" + objtop）; var bolhide = 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.style.visibility = "hidden"; }}} //非表示タグ関数を表示tiannetshowobject（）{for（var i = 0; i <arrtiannethide.length; i ++）{// alert（arrtiannethide [i]）; arrtiannethide [i] .style.visibility = ""; }} //初期化日。関数tiannetinitdate（strdate）{var arr = strdate.split（tiannetdatesplit）; tiannetyear = arr [0]; tiannetmonth = arr [1]; tiannetday = arr [2]; } // clear function tiannetclear（）{tiannetoutobject.value = ""; tiannethidecontrol（）; } // function document.onclick（）{）{window.event.srcelement）{if（tagname！= "input" && getattribute（ "author"）！= "tiannet"）tiannethidecontrol（）; }} // ESCキーを押して制御関数document.onkeypress（）{if（event.keycode == 27）{tiannethidecontrol（）; }}JavaScript関連のコンテンツの詳細については、このサイトのトピックをご覧ください：「JavaScriptのJSONオペレーションスキルの要約」、「JavaScriptの切り替え効果とテクニックの概要」、「JavaScript Search Algorithm Skills」、「Javascript Animation Animation Special Effects and Techniquesの要約」、Javascriptの概要「Debugn of of debugging of Javing」アルゴリズムスキル」、「JavaScriptトラバーサルアルゴリズムとテクニックの要約」および「JavaScriptの数学操作の使用法の要約」
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。