jQueryに基づく新浪微博時間の模倣コンポーネント

まず、これは繰り返し車輪を作ると言う人もいますが、私はそうではありません.プロジェクトをするには、いつも人のものを持って来てはいけないと思います.持ってきた主義は神馬のいいものではありません.もちろん、楽にしたいなら、何も言わないでください.少なくとも私がやったと言って、私は変えたり拡大したりしたほうが便利です.
効果とコードは以下の通りで、プレビュー効果は自分でhtmlの中に入れて、このページの上で面倒なことをします

 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  <br>//     
  <br>var sookerTime = (function ($) { 
  <br>var OBJ; 
  <br>function isLeap(year) { return (year % 100 == 0 ? (year % 400 == 0 ? 1 : 0) : (year % 4 == 0 ? 1 : 0)); } 
  <br>function isValid(d) { return (d.getTime() - (new Date()).getTime() < 0) ? true : false; } //        
  <br>function setDate(year, month) { //    table 
  <br>var n1 = new Date(year, month, 1), 
  <br>firstday = n1.getDay(), 
  <br>mdays = new Array(31, 28 + isLeap(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31), 
  <br>rows = Math.ceil((mdays[month] + firstday) / 7), 
  <br>table = $("<table>", { "class": "days" }), 
  <br>tbody = $("<tbody>"); 
  <br>$("#calendar").find(".days").remove(); 
  <br>for (var i = 0; i < rows; i++) { 
  <br>var tr = $("<tr>"); 
  <br>for (j = 0; j < 7; j++) { 
  <br>var idx = i * 7 + j, 
  <br>d = idx - firstday + 1; 
  <br>if (d <= 0 || d > mdays[month]) { //     
  <br>d = " " 
  <br>} 
  <br>var td = $("<td>", { html: d }).appendTo(tr); 
  <br>if (isValid(new Date(year, month, d))) { //              
  <br>td.addClass("before"); 
  <br>td.hover(function () { 
  <br>$(this).addClass("day"); 
  <br>}, function () { $(this).removeClass("day"); }).click(function () { 
  <br>OBJ.attr("value", $("#calendar .year").attr("value") + "-" + (parseInt($("#calendar .month").attr("value")) + 1) + "-" + $(this).text()); 
  <br>$("#calendar").css("display", "none"); 
  <br>}); 
  <br>} 
  <br>} 
  <br>tr.appendTo(tbody); 
  <br>} 
  <br>tbody.appendTo(table); 
  <br>$("#calendar").append(table); 
  <br>} 
  <br>function createTime() { 
  <br>var calendar = $("<div>", { "class": "pc_caldr", id: "calendar" }), 
  <br>td = new Date(), 
  <br>of = OBJ.offset(); 
  <br>if (document.getElementById("calendar")) { 
  <br>calendar = $("#calendar").css({ left: of.left, top: of.top + 18, display: "block" }); 
  <br>setDate(td.getFullYear(), td.getMonth()); 
  <br>$("#calendar .year").attr("value", td.getFullYear()); 
  <br>$("#calendar .month").attr("value", td.getMonth()); 
  <br>} else { 
  <br>var se = "<div class='selector'><select class='month'><option value='0'>  </option><option value='1'>  </option><option value='2'>  </option><option value='3'>  </option><option value='4'>  </option><option value='5'>  </option><option value='6'>  </option><option value='7'>  </option><option value='8'>  </option><option value='9'>  </option><option value='10'>   </option><option value='11'>   </option></select><select class='year'><option value='2009'>2009</option><option value='2010'>2010</option><option value='2011'>2011</option></select></div><ul class='weeks'><li> </li><li> </li><li> </li><li> </li><li> </li><li> </li><li> </li></ul>"; 
  <br>calendar.css({ left: of.left, top: of.top + 18 }).html(se).appendTo($("body")); 
  <br>setDate(td.getFullYear(), td.getMonth()); 
  <br>$("#calendar .year").attr("value", td.getFullYear()); 
  <br>$("#calendar .month").attr("value", td.getMonth()); 
  <br>bindClick(); 
  <br>} 
  <br>} 
  <br>function bindClick() { //          
  <br>var a = $("#calendar .month"), 
  <br>b = $("#calendar .year"); 
  <br>a.change(function () { 
  <br>setDate(b.attr("value"), $(this).attr("value")); 
  <br>}); 
  <br>b.change(function () { 
  <br>setDate($(this).attr("value"), a.attr("value")); 
  <br>}); 
  <br>} 
  <br>return { 
  <br>init: function (obj) { //        
  <br>OBJ = obj; 
  <br>createTime(); 
  <br>} 
  <br>} 
  <br>})(jQuery); 
  <br>//     
  <br>$(".tiemin").focus(function(){ 
  <br>sookerTime.init($(this)); 
  <br>}); 
  <br>