Complete example _ javascript tips for js Implementation of date selector accurate to seconds

This article mainly introduces how to implement a date selector accurate to seconds in JavaScript. It analyzes the implementation steps and related techniques of a JavaScript date selector in the form of a complete example, involving the related operations of JavaScript on time and date, if you need a date selector, you can refer to the example in this article to describe how to implement a date selector accurate to seconds in js. We will share this with you for your reference. The details are as follows:

// II. var bMoveable = true; var strFrame; document. writeln (''); strFrame =''; strFrame + = 'input. button {BORDER-RIGHT: #63A3E9 1px solid; BORDER-TOP: #63A3E9 1px solid; BORDER-LEFT: #63A3E9 1px solid; '; strFrame + = 'border-BOTTOM: #63A3E9 1px solid; BACKGROUND-COLOR: #63A3E9; font-family: ;} '; strFrame + = 'td {FONT-SIZE: 9pt; font-family: ;} '; strFrame + = ''; strFrame + = 'var datelayerx, datelayery;'; strFrame + = 'v Ar bDrag; '; strFrame + = 'function document. onmousemove () '; strFrame + =' {if (bDrag & window. event. button = 1) '; strFrame + =' {var DateLayer=parent.doc ument. all. endDateLayer. style; '; strFrame + = 'datelayer. posLeft + = window. event. clientX-datelayerx; '; strFrame + = 'datelayer. posTop + = window. event. clientY-datelayery;} '; strFrame + = 'function DragStart ()'; strFrame + = '{var DateLayer=parent.doc ument. all. endDateLayer. s Tyle; '; strFrame + = 'datelayerx = window. event. clientX; '; strFrame + = 'datelayery = window. event. clientY; '; strFrame + = 'bdrag = true;}'; strFrame + = 'function DragEnd () {'; strFrame + = 'bdrag = false ;}'; strFrame + = ''; strFrame + = ''; strFrame + = ''; strFrame + = '>'; strFrame + =''; strFram E + = ''; strFrame + = 'day'; strFrame + = '1 '; strFrame + = '3'; strFrame + = '5'; strFrame + = ''; var n = 0; for (j = 0; j '; for (I = 0; I'; n ++;} strFrame + = ''; for (I = 35; I '; strFrame + = 'Leave blank to close currently'; strFrame + = ''; strFrame + = ''; strFrame + = ''; window. frame S.enddatelayer.document.writeln(strframeworker.doc ument. close (); // solve the problem that the ie progress bar does not end. // ================================ ==================================== WEB page display section ==================== ========================================================== var outObject; var outButton; // click the button var outDate = ""; // Date for storing the object var bUseTime = false; // whether to use the time var odatelayer={frames.enddatelayer.doc ument. all; // Save the Calendar Object var odatelayer = window. endDa TeLayer.doc ument. all; // odatelayer. bUseTimeLayer. innerText = "NO"; bImgSwitch (); odatelayer. bUseTimeLayer. innerHTML = bImg; function setday (tt, obj) // main function {if (arguments. length> 2) {alert ("Sorry! Too many parameters are passed in this control! "); Return;} if (arguments. length = 0) {alert (" Sorry! You have not returned any parameters of this control! "); Return;} var dads = document. all. endDateLayer. style; var th = tt; var ttop = tt. offsetTop; // The positioning point of the TT control is high var thei = tt. clientHeight; // high var tleft of the TT control itself = tt. offsetLeft; // The positioning point width of the TT control var ttyp = tt. type; // The type of the TT control while (tt = tt. offsetParent) {ttop + = tt. offsetTop; tleft + = tt. offsetLeft;} dads. top = (ttyp = "image ")? Ttop + thei: ttop + thei + 6; dads. left = tleft; outObject = (arguments. length = 1 )? Th: obj; outButton = (arguments. length = 1 )? Null: th; // set the button for an external click. // display the calendar's date (var reg) =/^ (\ d +)-(\ d {1, 2}) based on the date in the current input box }) -(\ d {1, 2})/; // does not contain the time var r = outObject. value. match (reg); if (r! = Null) {r [2] = r [2]-1; var d = new Date (r [1], r [2], r [3]); if (d. getFullYear () = r [1] & d. getMonth () = r [2] & d. getDate () = r [3]) {outDate = d; parent. meizzTheYear = r [1]; parent. meizzTheMonth = r [2]; parent. meizzTheDate = r [3];} else {outDate = "";} meizzSetDay (r [1], r [2] + 1);} else {outDate = ""; meizzSetDay (new Date (). getFullYear (), new Date (). getMonth () + 1);} dads. display = ''; // determines whether the time is used during initialization. it is not strictly verified. // if (outO Bject. value. length> 10) // {bUseTime = true; bImgSwitch (); odatelayer. bUseTimeLayer. innerHTML = bImg; meizzWriteHead (meizzTheYear, meizzTheMonth); //} // else // {// bUseTime = false; // bImgSwitch (); // odatelayer. bUseTimeLayer. innerHTML = bImg; // meizzWriteHead (meizzTheYear, meizzTheMonth); //} try {event. returnValue = false;} catch (e) {// The error is excluded here. The cause of the error is not found yet .}} Var MonHead = new Array (12); // defines the maximum number of days in a calendar month. MonHead [0] = 31; MonHead [1] = 28; MonHead [2] = 31; monHead [3] = 30; MonHead [4] = 31; MonHead [5] = 30; MonHead [6] = 31; MonHead [7] = 31; monHead [8] = 30; MonHead [9 = 31; MonHead [10] = 30; MonHead [11] = 31; var meizzTheYear = new Date (). getFullYear (); // defines the initial value of the year variable var meizzTheMonth = new Date (). getMonth () + 1; // defines the initial value of the month variable var meizzTheDate = new Date (). getDate (); // defines the initial value of the daily variable v Ar meizzTheHour = new Date (). getHours (); // defines the initial value of the hour variable var meizzTheMinute = new Date (). getMinutes (); // defines the initial value of the minute variable var meizzTheSecond = new Date (). getSeconds (); // defines the initial value of the second variable var meizzWDay = new Array (37); // defines the Array document of the write date. onclick = (function () {with (window. event) {if (srcElement! = OutObject & srcElement! = OutButton) closeLayer () ;}}) document. onkeyup = (function () {if (window. event. keyCode = 27) {if (outObject) outObject. blur (); closeLayer ();} else if (document. activeElement) {if (document. activeElement! = OutObject & document. activeElement! = OutButton) {closeLayer () ;}}) function meizzWriteHead (yy, mm, ss) // write the current year and month to the head {odatelayer. meizzYearHead. innerText = yy + "year"; odatelayer. meizzMonthHead. innerText = format (mm) + "month"; // Insert the current hour to odatelayer. meizzHourHead. innerText = bUseTime? (MeizzTheHour + ""): ""; odatelayer. meizzMinuteHead. innerText = bUseTime? (MeizzTheMinute + "points"): ""; odatelayer. meizzSecondHead. innerText = bUseTime? (MeizzTheSecond + "second"): "";} function tmpSelectYearInnerHTML (strYear) // The drop-down box of the year {if (strYear. match (/\ D /)! = Null) {alert ("the year input parameter is not a number! "); Return;} var m = (strYear )? StrYear: new Date (). getFullYear (); if (m 9999) {alert ("the year value is not between 1000 and 9999! "); Return;} var n = m-50; if (n 9999) n = 9974; var s =" \ r \ n "; var selectInnerHTML = s; for (var I = n; I "+ I +" year "+" \ r \ n ";} else {selectInnerHTML + = "" + I + "year" + "\ r \ n" ;}} selectInnerHTML + = ""; odatelayer. tmpSelectYearLayer. style. display = ""; odatelayer. tmpSelectYearLayer. innerHTML = selectInnerHTML; odatelayer. tmpSelectYear. focus ();} function tmpSelectMonthInnerHTML (strMonth) // The drop-down box of the month {if (strM Onth. match (/\ D /)! = Null) {alert ("the input parameter of the month is not a number! "); Return;} var m = (strMonth )? StrMonth: new Date (). getMonth () + 1; var s = "\ r \ n"; var selectInnerHTML = s; for (var I = 1; I "+ I +" month "+" \ r \ n ";} else {selectInnerHTML + =" "+ I +" month "+" \ r \ n ";}} selectInnerHTML + = ""; odatelayer. tmpSelectMonthLayer. style. display = ""; odatelayer. tmpSelectMonthLayer. innerHTML = selectInnerHTML; odatelayer. tmpSelectMonth. focus ();}/****** add hour, minute ***/function tmpSelectHourInnerHTML (strHour) // hour drop-down box {if (! BUseTime) {return;} if (strHour. match (/\ D /)! = Null) {alert ("The hour input parameter is not a number! "); Return;} var m = (strHour )? StrHour: new Date (). getHours (); var s = "\ r \ n"; var selectInnerHTML = s; for (var I = 0; I "+ I +" \ r \ n ";} else {selectInnerHTML + = "" + I + "\ r \ n" ;}} selectInnerHTML + = ""; odatelayer. tmpSelectHourLayer. style. display = ""; odatelayer. tmpSelectHourLayer. innerHTML = selectInnerHTML; odatelayer. tmpSelectHour. focus ();} function tmpSelectMinuteInnerHTML (strMinute) // minute drop-down box {if (! BUseTime) {return;} if (strMinute. match (/\ D /)! = Null) {alert ("the minute input parameter is not a number! "); Return;} var m = (strMinute )? StrMinute: new Date (). getMinutes (); var s = "\ r \ n"; var selectInnerHTML = s; for (var I = 0; I "+ I +" \ r \ n ";} else {selectInnerHTML + = "" + I + "\ r \ n" ;}} selectInnerHTML + = ""; odatelayer. tmpSelectMinuteLayer. style. display = ""; odatelayer. tmpSelectMinuteLayer. innerHTML = selectInnerHTML; odatelayer. tmpSelectMinute. focus ();} function tmpSelectSecondInnerHTML (strSecond) // The second drop-down box {if (! BUseTime) {return;} if (strSecond. match (/\ D /)! = Null) {alert ("the minute input parameter is not a number! "); Return;} var m = (strSecond )? StrSecond: new Date (). getMinutes (); var s = "\ r \ n"; var selectInnerHTML = s; for (var I = 0; I "+ I +" \ r \ n ";} else {selectInnerHTML + = "" + I + "\ r \ n" ;}} selectInnerHTML + = ""; odatelayer. tmpSelectSecondLayer. style. display = ""; odatelayer. tmpSelectSecondLayer. innerHTML = selectInnerHTML; odatelayer. tmpSelectSecond. focus ();} function closeLayer () // close this layer {var o = document. getElementById ("endDateLayer"); if (o! = Null) {o. style. display = "none" ;}} function showLayer () // close this layer {document. all. endDateLayer. style. display = "";} function IsPinYear (year) // you can determine whether to renew the year. {if (0 = year % 4 & (year % 100! = 0) | (year % 400 = 0) return true; else return false;} function GetMonthCount (year, month) // on March 29, February, the leap year is 29 days {var c = MonHead [month-1]; if (month = 2) & IsPinYear (year) c ++; return c;} function GetDOW (day, month, year) // calculate the day of the week {var dt = new Date (year, month-1, day ). getDay ()/7; return dt;} function meizzPrevY () // forward Year {if (meizzTheYear> 999 & meizzTheYear999 & meizzTheYear1) {meizzTheMonth --} else {meizzTheYear --; meizzTh EMonth = 12;} meizzSetDay (meizzTheYear, meizzTheMonth);} function meizzNextM () // returns the month {if (meizzTheMonth = 12) {meizzTheYear ++; meizzTheMonth = 1} else {meizzTheMonth ++} meizzSetDay (meizzTheYear, meizzTheMonth);} // TODO: code function meizzSetDay (yy, mm) // main Write Program ********* {meizzWriteHead (yy, mm); // set the public variable of the current month to the input value meizzTheYear = yy; meizzTheMonth = mm; for (var I = 0; I "+ meizzWDay [I] +" "; da. title = (mm = 1? 12: mm-1) + "month" + meizzWDay [I] + "day"; da. onclick = Function ("meizzDayClick (this. innerText,-1)"); if (! OutDate) da. style. backgroundColor = (mm = 1? Yy-1: yy) = new Date (). getFullYear () & (mm = 1? 12: mm-1) = new Date (). getMonth () + 1 & meizzWDay [I] = new Date (). getDate ())? "#5CEFA0": "# f5f5f5"; else {da. style. backgroundColor = (mm = 1? Yy-1: yy) = outDate. getFullYear () & (mm = 1? 12: mm-1) = outDate. getMonth () + 1 & meizzWDay [I] = outDate. getDate ())? "# 84C1FF": (mm = 1? Yy-1: yy) = new Date (). getFullYear () & (mm = 1? 12: mm-1) = new Date (). getMonth () + 1 & meizzWDay [I] = new Date (). getDate ())? "#5CEFA0": "# f5f5f5"); // display the selected date as concave if (mm = 1? Yy-1: yy) = outDate. getFullYear () & (mm = 1? 12: mm-1) = outDate. getMonth () + 1 & meizzWDay [I] = outDate. getDate () {da. borderColorLight = "# FFFFFF"; da. borderColorDark = "#63A3E9" ;}} else if (I >= firstday + GetMonthCount (yy, mm) // part of the next month {da. innerHTML = "" + meizzWDay [I] + ""; da. title = (mm = 12? 1: mm + 1) + "month" + meizzWDay [I] + "day"; da. onclick = Function ("meizzDayClick (this. innerText, 1) "); if (! OutDate) da. style. backgroundColor = (mm = 12? Yy + 1: yy) = new Date (). getFullYear () & (mm = 12? 1: mm + 1) = new Date (). getMonth () + 1 & meizzWDay [I] = new Date (). getDate ())? "#5CEFA0": "# f5f5f5"; else {da. style. backgroundColor = (mm = 12? Yy + 1: yy) = outDate. getFullYear () & (mm = 12? 1: mm + 1) = outDate. getMonth () + 1 & meizzWDay [I] = outDate. getDate ())? "# 84C1FF": (mm = 12? Yy + 1: yy) = new Date (). getFullYear () & (mm = 12? 1: mm + 1) = new Date (). getMonth () + 1 & meizzWDay [I] = new Date (). getDate ())? "#5CEFA0": "# f5f5f5"); // display the selected date as concave if (mm = 12? Yy + 1: yy) = outDate. getFullYear () & (mm = 12? 1: mm + 1) = outDate. getMonth () + 1 & meizzWDay [I] = outDate. getDate () {da. borderColorLight = "# FFFFFF"; da. borderColorDark = "#63A3E9" ;}} else // part of this month {da. innerHTML = "" + meizzWDay [I] + ""; da. title = mm + "month" + meizzWDay [I] + "day"; da. onclick = Function ("meizzDayClick (this. innerText, 0) "); // assign the onclick event processing to td // if it is the selected date, the background is highlighted in blue; if it is the current date, A dark yellow background if (! OutDate) da. style. backgroundColor = (yy = new Date (). getFullYear () & mm = new Date (). getMonth () + 1 & meizzWDay [I] = new Date (). getDate ())? "#5CEFA0": "# f5f5f5"; else {da. style. backgroundColor = (yy = outDate. getFullYear () & mm = outDate. getMonth () + 1 & meizzWDay [I] = outDate. getDate ())? "# 84C1FF" :( (yy = new Date (). getFullYear () & mm = new Date (). getMonth () + 1 & meizzWDay [I] = new Date (). getDate ())? "#5CEFA0": "# f5f5f5"); // display the selected date as concave if (yy = outDate. getFullYear () & mm = outDate. getMonth () + 1 & meizzWDay [I] = outDate. getDate () {da. borderColorLight = "# FFFFFF"; da. borderColorDark = "#63A3E9" ;}} da. style. cursor = "hand"} else {da. innerHTML = ""; da. style. backgroundColor = ""; da. style. cursor = "default" ;}} function meizzDayClick (n, ex) // select a date in the displayed box, main Input Function ************** {parent. meizzTheDate = n; var yy = meizzTheYear; var mm = parseInt (meizzTheMonth) + ex; // The offset, used to select the last month and the next month date var hh = meizzTheHour; var mi = meizzTheMinute; var se = meizzTheSecond; // judge the month and perform corresponding processing if (mm12) {yy ++; mm = mm-12;} if (mm

The above is the complete example _ javascript tips for js to implement a date selector accurate to seconds. For more information, see the PHP Chinese website (www.php1.cn )!