基于jQuery的模仿新浪微博时间的组件_javascript技巧_动视

基于jQuery的模仿新浪微博时间的组件_javascript技巧

2020-11-27 21:00:56 责编:小采

首先,说下有些人说这是重复造轮子,但我觉得不是,做项目,总不能老是拿别人的东西来吧,拿来主义并不是神马好玩意,当然如果你想轻松,也没话说,至少说我自己做得,我改起来或者扩展比较方便
效果以及代码如下,,预览效果自己放在html里面把,搞在这个页面上麻烦得很
代码如下:

Untitled Page

//全部包裹
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 = $("", { "class": "days" }),
tbody = $("");
$("#calendar").find(".days").remove();
for (var i = 0; i < rows; i++) {
var tr = $("");
for (j = 0; j < 7; j++) {
var idx = i * 7 + j,
d = idx - firstday + 1;
if (d <= 0 || d > mdays[month]) { //无效日期
d = " "
}
var 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 = $("", { "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 = "

日

一

二

三

四

五

六

";
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));
});

下载本文

显示全文

全部频道