首页 > 程序开发 > web前端 > JavaScript >

用jQuery模仿新浪微博时间组件

2011-10-03

废话不多说,实现原理主要是处理table,生成tr td,其中最重要的是如何找出每月第一天是星期几,然后就能对应出这个月的余下天数. 首先,说下有些人说这是重复造轮子,但我觉得不是,做项目,总不能老是拿别人的东西来...

废话不多说,实现原理主要是处理table,生成tr td,其中最重要的是如何找出每月第一天是星期几,然后就能对应出这个月的余下天数.

首先,说下有些人说这是重复造轮子,但我觉得不是,做项目,总不能老是拿别人的东西来吧,拿来主义并不是神马好玩意,当然如果你想轻松,也没话说,至少说我自己做得,我改起来或者扩展比较方便

效果以及代码如下,,预览效果自己放在html里面把,搞在这个页面上麻烦得很

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <style type="text/css">
        *{margin:0;padding:0;}
        /*日期控件*/
        .pc_caldr { background-color: #FFFFFF; border: 1px solid #CCCCCC; color: #000000; height: auto; padding: 5px; position: absolute; width: 161px; z-index: 10; }
        .pc_caldr .selector { height: 24px; padding: 2px 0 0; }
        .pc_caldr .selector .month, .pc_caldr .selector .year { border: 1px solid #CCCCCC; float: left; font-size: 12px; height: 19px; width: 73px; }
        .pc_caldr .selector .year { margin-left: 10px; width: 78px; }
        .pc_caldr .weeks, .pc_caldr .days { list-style: none outside none; margin: 0; padding: 0; width: 100% !important; }
        .pc_caldr .weeks { background: none repeat scroll 0 0 #B6D1F9; color: #FFFFFF; font-size: 12px; height: 18px; margin-bottom: 2px; }
        .pc_caldr .days { font-family: Arial; font-size: 12px; height: auto; }
        .pc_caldr .weeks li, .pc_caldr .days li { float: left; height: 18px; line-height: 18px; text-align: center; width: 23px; }
        .pc_caldr .weeks li { text-align: center; }
        .pc_caldr table { width: 100%; }
        .pc_caldr table  td{text-align:center;}
        .pc_caldr table td.before { color: #43609C; cursor: pointer; }
        .pc_caldr table td.day { background-color: #5D94E6; color: #FFFFFF; }
              
        /*文本框*/
        .tiemin{width:120px;border:1px solid #f00;}
        .inline-block {display :inline-block; zoom:1 ; *display: inline; vertical-align:middle ;}
         </style>
</head>
<body>
  
    <div style="height: 200px;">
    </div>
    <input type="text" class="tiemin" readonly="readonly" />
    <div style="height: 200px;">
    </div>
    <span style="width: 200px;" class="inline-block"></span>
    <input type="text" class="tiemin" readonly="readonly" />
    <script type="text/javascript">
        //全部包裹
        var sookerTime = (function ($) {
            var OBJ;
            function isLeap(year) { return (year % 100 == 0 ? (year % 400 == 0 ? 1 : 0) : (year % 4 == 0 ? 1 : 0)); }
            function isValid(d) { return (d.getTime() - (new Date()).getTime() < 0) ? true : false; } //是否在今天以后
            function setDate(year, month) {     //建立日期table
                var n1 = new Date(year, month, 1),
                    firstday = n1.getDay(),
                    mdays = new Array(31, 28 + isLeap(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31),
                    rows = Math.ceil((mdays[month] + firstday) / 7),
                    table = $("<table>", { "class": "days" }),
                    tbody = $("<tbody>");
                $("#calendar").find(".days").remove();
                for (var i = 0; i < rows; i++) {
                    var tr = $("<tr>");
                    for (j = 0; j < 7; j++) {
                        var idx = i * 7 + j,
                            d = idx - firstday + 1;
                        if (d <= 0 || d > mdays[month]) {   //无效日期
                            d = "&nbsp;"
                        }
                        var td = $("<td>", { html: d }).appendTo(tr);
                        if (isValid(new Date(year, month, d))) {  //今天以后的时间都不绑定时间
                            td.addClass("before");
                            td.hover(function () {
                                $(this).addClass("day");
                            }, function () { $(this).removeClass("day"); }).click(function () {
                                OBJ.attr("value", $("#calendar .year").attr("value") + "-" + (parseInt($("#calendar .month").attr("value")) + 1) + "-" + $(this).text());
                                $("#calendar").css("display", "none");
                            });
                        }
                    }
                    tr.appendTo(tbody);
                }
                tbody.appendTo(table);
                $("#calendar").append(table);
            }
            function createTime() {
                var calendar = $("<div>", { "class": "pc_caldr", id: "calendar" }),
                        td = new Date(),
                        of = OBJ.offset();
                if (document.getElementById("calendar")) {
                    calendar = $("#calendar").css({ left: of.left, top: of.top + 18, display: "block" });
                    setDate(td.getFullYear(), td.getMonth());
                    $("#calendar .year").attr("value", td.getFullYear());
                    $("#calendar .month").attr("value", td.getMonth());
                } else {
                    var se = "<div class=&#39;selector&#39;><select class=&#39;month&#39;><option value=&#39;0&#39;>一月</option><option value=&#39;1&#39;>二月</option><option value=&#39;2&#39;>三月</option><option value=&#39;3&#39;>四月</option><option value=&#39;4&#39;>五月</option><option value=&#39;5&#39;>六月</option><option value=&#39;6&#39;>七月</option><option value=&#39;7&#39;>八月</option><option value=&#39;8&#39;>九月</option><option value=&#39;9&#39;>十月</option><option value=&#39;10&#39;>十一月</option><option value=&#39;11&#39;>十二月</option></select><select class=&#39;year&#39;><option value=&#39;2009&#39;>2009</option><option value=&#39;2010&#39;>2010</option><option value=&#39;2011&#39;>2011</option></select></div><ul class=&#39;weeks&#39;><li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li></ul>";
                    calendar.css({ left: of.left, top: of.top + 18 }).html(se).appendTo($("body"));
                    setDate(td.getFullYear(), td.getMonth());
                    $("#calendar .year").attr("value", td.getFullYear());
                    $("#calendar .month").attr("value", td.getMonth());
                    bindClick();
                }
            }
            function bindClick() {   //给下拉列表绑定时间
                var a = $("#calendar .month"),
                   b = $("#calendar .year");
                a.change(function () {
                    setDate(b.attr("value"), $(this).attr("value"));
                });
                b.change(function () {
                    setDate($(this).attr("value"), a.attr("value"));
                });
            }
            return {
                init: function (obj) {   //返回调用的接口              
                    OBJ = obj;
                    createTime();
                }
            }
        })(jQuery);

        //使用方法
        $(".tiemin").focus(function(){ 
           sookerTime.init($(this));
         });
          
    </script>
</body>
</html>

摘自:!nothing blog

相关文章
最新文章
热点推荐