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

Source: Internet
Author: User
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 )!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.