이번 시간 컴포넌트는 이전에 한 번 출시된 적이 있는데, 이번에 시간이 나서 업그레이드를 하게 되었는데, IE6에서 풀다운이 안되는 문제가 있어서 더 좋은 성능을 가지고 있습니다. select 파일 도 해결되었습니다. 간단히 말해서 온라인 데모 NothingDemo. 갑자기 아래 코드에 실행 중인 코드가 있는 것을 발견했습니다. 하단에 가서 소스코드를 올렸습니다. 간단한 설명만 있습니다 코드 복사 코드는 다음과 같습니다. : Untitled Page <br>*{margin:0;padding:0;} <br>body, button, input, select, textarea { <br>font: 12px/1.125 Arial,Helvetica,sans-serif; <br>} <br>/*日期控件*/ <br>.pc_caldr{border:1px solid #ccc;background-color:#fff;z-index:10;width:175px;height:auto;position:absolute;color:#000;padding:5px;} <br>.pc_caldr .selector{height:24px;_padding:2px 0 2px;padding:2px 0 0;} <br>.pc_caldr .selector .month,.pc_caldr .selector .year{float:left;font-size:12px;width:80px;border:1px solid #CCC;height:19px;} <br>.pc_caldr .selector .year{width:84px;margin-left:10px;} <br>.pc_caldr .weeks,.pc_caldr .days{list-style:none;width:100%!important;margin:0;padding:0;} <br>.pc_caldr .weeks{height:18px;margin-bottom:2px;background:#b6d1f9;color:#fff;font-size:12px;} <br>.pc_caldr .days{height:auto;font-size:12px;font-family:Arial;} <br>.pc_caldr .weeks li,.pc_caldr .days li{float:left;height:20px;line-height:20px;text-align:center;width:25px;} <br>.pc_caldr .days li{background-color:none;} <br>.pc_caldr .days li a{display:block;text-decoration:none;height:100%;color:#43609c;transition:transform .5s;-moz-transition:-moz-transform .5s;-webkit-transition:-webkit-transform .5s;-o-transition:-o-transform .5s;padding:1px;} <br>.pc_caldr .days li a:link,.pc_caldr .days li a:visited,.pc_caldr .days li a:hover{text-decoration:none;} <br>.pc_caldr .days li a strong{font-weight:400;} <br>.pc_caldr .days li a:hover{background-color:#5d94e6;color:#fff;transform:rotate(180deg) scale(1.5);-moz-transform:rotate(360deg) scale(1.5);-webkit-transform:rotate(360deg) scale(1.5);-o-transform:rotate(360deg) scale(1.5);} <br>.pc_caldr .weeks li,.pc_caldr .days li,.pc_caldr .days li a{text-align:center;} <br>/*文本框*/ <br>.tiemin{width:120px;border:1px solid #f00;} <br>.inline-block {display :inline-block; zoom:1 ; *display: inline; vertical-align:middle ;} <br>.ie6iframe {background: none repeat scroll 0 0 #FFFFFF;left: -1px;filter:alpha(opacity=0);position: absolute;top: 0;z-index: -1;width:100%;height:150px;} <br> 作者nothing 挡住它nothing <br>var NothingTime = (함수 ($) { <br>var 캐시 = { <br>obj: null, <br>calendar: null 🎜>disappear: function () { //시간 블록 숨기기<br>cache.calendar.css("display", "none") <br>}, <br>isLeap: function (연도) { //윤년 <br>return (연도 % 100 == 0 ? (연도 % 400 == 0 ? 1 : 0) : (연도 % 4 == 0 ? 1 : 0)) <br>}, <br>isValid: 함수 ( d) { //오늘 전인가요? <br>return (d.getTime() - (new Date()).getTime() < 0) ? true : false <BR>td : new Date(), <BR>createData: 함수(연도, 월) { <BR>var n1 = new Date(년, 월, 1), <BR>firstday = n1.getDay(), <BR>mdays = [31 , 28 this.isLeap(연도), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], <BR>ul = document.createElement("ul"), li <BR>ul .className = "일"; <BR>$("#calendar").find(".days").remove() <BR>for (var i = firstday;i--;) 잘못된 날짜 <BR>ul.appendChild(document.createElement("li")) <BR>} <BR>for (var j = 1; j <= mdays[month]; j ) { <BR> if (this.isValid(new Date(year, Month, j))) { //오늘 전 일<BR>li = document.createElement("li") <BR>li.innerHTML = "<a href ='javascript:void(0)'>" j "</a>"; <br>ul.appendChild(li); <br>} else { <br>li = document.createElement("li") ; <br>li.innerHTML = j; <br>} <br>} <br>this.calendar[0].appendChild(ul)}, <br>change: function () { //시간을 드롭다운 목록에 바인딩<br>var a = $("#calendar .month"), <br>b = $("#calendar .year"); >a .change(function () { <br>cache.createData(b.attr("value"), $(this).attr("value")); <br>}); (function () { <br>cache.createData($(this).attr("value"), a.attr("value")); <br>}); <br>cache.calendar.delegate(" .days a", "click", function () { <br>var day = b.attr("value") "-" (parseInt(a.attr("value")) 1) "-" this.innerHTML ; <br>cache.obj.val(day); <br>cache.disappear(); <br>}) <br>}, <br>bodyClickDisappear: function() { <br>setTimeout() { <br>$("body").bind("click", 캐시.disappear) <br>}, "200"), <br>calendarClick: function () { <br>캐시 .calendar .click(function (e) { <br>e.stopPropagation(); <br>}) <br>} <br>}, <br>CreateTime = function(obj) { <br>cache.obj = obj ; <br>var of = 캐시.obj.offset(); <br>if (document.getElementById("calendar")) { <br>} else { <br>var se = "<div class= 'selector'><select class='month'><option value='0'>1월</option><option value='1'>2월</option><옵션 value= '2'>3월</option><옵션 값='3'>4월</option><옵션 값='4'>5월</option><옵션 값='5'> 6월</option><옵션 값='6'>7월</option><옵션 값='7'>8월</option><옵션 값='8'>9월</option> <옵션 값='9'>10월</option><옵션 값='10'>11월</option><옵션 값='11'>12월</option></select> <select class='year'><option value='2011'>2011</option>< ;option value='2012'>2012</option></select></div> <ul class="주">일<li>一</li> <li>두</li> <li>세</li>< li>4</li><li>5</li><li>6< ;/li></ul>"; <br>$("<div>", { id: "calendar" , html: se, "class": "pc_caldr" }).appendTo(document.body) ; <br>cache.calendar = $("#calendar") <br>if (/msie 6.0/i.test( navigator.userAgent)) { <br>var iframe = document.createElement("iframe"); <br>iframe.className = "ie6iframe" <br>cache.calendar[0].appendChild(iframe) <br> } <br>cache.change(); <br>cache.bodyClickDisappear(); <br>cache.calendarClick() <br>} <br>cache.createData(cache.td.getFullYear(), 캐시.td .getMonth()); <br>cache.calendar.find(".year").attr("value", 캐시.td.getFullYear()) <br>cache.calendar.find(".month") .attr("value", 캐시.td.getMonth()); <br>cache.calendar.css({ left: of.left, top: of.top 캐시.obj.height() 2, 디스플레이: "block " }); <br>}; <br>반환 함수(obj) { <br> CreateTime(obj); <br>}; <br>})(jQuery); <br>//사용 방법<br> $("input.tiemin").focus(function (e) { <br>nothingTime( $(this)); <br>}).click(function (e) { <br>e.stopPropagation(); <br>}); <br> 이번 구성요소는 이것입니다. 기사에서는 js 코드인 ECMAScript5를 따라잡는 방법에 대해 이야기하고 내부의 메소드를 모방한 다음 ie6 7 8에서 실행하여 최첨단 js 메소드를 계속 사용할 수 있도록 하겠습니다. 🎜>.