用jQuery模仿新浪微博时间组件
废话不多说,实现原理主要是处理table,生成tr td,其中最重要的是如何找出每月第一天是星期几,然后就能对应出这个月的余下天数.
首先,说下有些人说这是重复造轮子,但我觉得不是,做项目,总不能老是拿别人的东西来吧,拿来主义并不是神马好玩意,当然如果你想轻松,也没话说,至少说我自己做得,我改起来或者扩展比较方便
效果以及代码如下,,预览效果自己放在html里面把,搞在这个页面上麻烦得很
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Page</title> <script type="text/javascript" src="http://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 = " " } 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='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>"; 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"补充：web前端 , JavaScript ,上一个：div弹出层的ajax登录（Jquery版）
下一个：输入框内提示信息
- 更多JAVA疑问解答：
- java怎么在线读取ftp服务器上的文件内容
- 关于程序员的职业规划
- HTML和JSP矛盾吗？
- java小程序如何打包？
- java怎么split路径文件名？
- jsp+javaBean中Column 'ordersPrice' specified twice的错误
- Java TCP/IP Socket网络编程系列
- 大家来讨论一下我到底该用什么好?Swing 还是 JavaFX
- 关于Hibernate实体自身多对一的抓取问题
- 关于apache2+tomcat群集出现的问题
- spring 获取上下文问题
- SSH 导入导出excel 谁有这块的资料吗?
- Ext TreePanel 刷新问题
- springmvc 加载一个jsp页面执行多个方法 报404
- checkbox数组action怎么向页面传值
