js_javascript スキルに実装された新浪微博を模倣したパーフェクトタイムコンポーネントのアップグレードバージョン

今回のコンポーネントは以前にもリリースされましたが、前回のコンポーネントはひどかったので、今回はパフォーマンスが向上しており、IE6 がプルダウンを保持できないという問題がありました。 select file も解決されました。つまり、ほぼ完璧な時間のコンポーネントです。 以下のコードに実行中のコードがあることがわかりました。一番下にある にソースコードを載せます。簡単な説明だけあります

コードをコピー コードは次のとおりです。 : Untitled Page *{margin:0;padding:0;} body, button, input, select, textarea { font: 12px/1.125 Arial,Helvetica,sans-serif; } /*日期控件*/ .pc_caldr{border:1px solid #ccc;background-color:#fff;z-index:10;width:175px;height:auto;position:absolute;color:#000;padding:5px;} .pc_caldr .selector{height:24px;_padding:2px 0 2px;padding:2px 0 0;} .pc_caldr .selector .month,.pc_caldr .selector .year{float:left;font-size:12px;width:80px;border:1px solid #CCC;height:19px;} .pc_caldr .selector .year{width:84px;margin-left:10px;} .pc_caldr .weeks,.pc_caldr .days{list-style:none;width:100%!important;margin:0;padding:0;} .pc_caldr .weeks{height:18px;margin-bottom:2px;background:#b6d1f9;color:#fff;font-size:12px;} .pc_caldr .days{height:auto;font-size:12px;font-family:Arial;} .pc_caldr .weeks li,.pc_caldr .days li{float:left;height:20px;line-height:20px;text-align:center;width:25px;} .pc_caldr .days li{background-color:none;} .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;} .pc_caldr .days li a:link,.pc_caldr .days li a:visited,.pc_caldr .days li a:hover{text-decoration:none;} .pc_caldr .days li a strong{font-weight:400;} .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);} .pc_caldr .weeks li,.pc_caldr .days li,.pc_caldr .days li a{text-align:center;} /*文本框*/ .tiemin{width:120px;border:1px solid #f00;} .inline-block {display :inline-block; zoom:1 ; *display: inline; vertical-align:middle ;} .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;} red;display:block;margin:20px auto;width:300px;font-size:14px;padding:3px;">作者nothing 挡住它nothing var nothingTime = (function ($) { var queue = { obj: null, calendar: null, disease: function () { //時間ブロックを非表示 cache.calendar.css("display", "none"); }, isLeap: function (year) { //閏年 return (年 % 100 == 0 ? (年 % 400 == 0 ? 1 : 0) : (年 % 4 == 0 ? 1 : 0)); ( d) { //今日より前ですか? return (d.getTime() - (new Date()).getTime() createData: function (year, month) { var n1 = new Date(year, month, 1), firstday = n1.getDay(), mdays = [31 , 28 this.isLeap(年), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], ul = document.createElement("ul"), ul .className = "days"; $("#calendar").find(".days").remove(); for (var i = firstday;i--;) { //フロントを作成します 無効な日 ul.appendChild(document.createElement("li")); } for (var j = 1; j if (this.isValid(new Date(year, month, j))) { //今日の前日 li = document.createElement("li"); li.innerHTML = " " j " "; ul.appendChild(li); } else { li = document.createElement("li") ; li.innerHTML = j; ul.appendChild(li) } this.calendar[0].appendChild(ul); >change: function () { //時間をドロップダウン リストにバインドします var a = $("#calendar .month"), b = $("#calendar .year"); >a .change(function () { cache.createData(b.attr("value"), $(this).attr("value")); }); (function () { cache.createData($(this).attr("value"), a.attr("value")); }); cache.calendar.delegate(" .days a", "click", function () { var day = b.attr("value") "-" (parseInt(a.attr("value")) 1) "-" this.innerHTML ; cache.obj.val(day); cache.discharacter() }); { $("body").bind("click", キャッシュ.消滅); }, "200"); calendarClick: function () { キャッシュ.calendar .click(function (e) { e.stopPropagation(); }); } }, CreateTime = function (obj) { cache.obj = obj ; var of =cache.obj.offset(); if (document.getElementById("calendar")) { } else { var se = " 1月 2月 3 月 4 月 5 月 6月 7月 8月 9月 10 月 11 月 12 月 2011 2012 日 一 二 三 four gt; five gt; six gt; "; $(" ", { id: "calendar" , html: se, "class": "pc_caldr" }).appendTo(document.body) ; cache.calendar = $("#calendar") if (/msie 6.0/i.test( navigator.userAgent)) { var iframe = document.createElement("iframe"); iframe.className = "ie6iframe"; cache.calendar[0].appendChild(iframe); cache.change(); cache.bodyClickDisamper(); cache.calendarClick(); cache.createData(cache.td.getFullyear() .getMonth()); cache.calendar.find(".year").attr("value", cache.calendar.find(".month"); .attr("value",cache.td.getMonth()); cache.calendar.css({ left: of.left, top: of.topcache.obj.height() 2, display: " " }); }; return function (obj) { CreateTime(obj); }; })(jQuery); //使用方法 $("input.tiemin").focus(function (e) { nothingTime( $(this)); }).click(function (e) { e.stopPropagation(); });

今回のコンポーネントはこれで終わりです。この記事では、JS コード ECMAScript5 に追いつく方法について説明する必要があります。最先端の JS メソッドを引き続き使用できるように、 内のメソッドを模倣して ie6 7 8 で実行してみます。 🎜>。

js_javascript スキルに実装された新浪微博を模倣したパーフェクト タイム コンポーネントのアップグレード バージョン

js_javascript スキルに実装された新浪微博を模倣したパーフェクトタイムコンポーネントのアップグレードバージョン