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


Posted in Javascript onOctober 04, 2011

首先,说下有些人说这是重复造轮子,但我觉得不是,做项目,总不能老是拿别人的东西来吧,拿来主义并不是神马好玩意,当然如果你想轻松,也没话说,至少说我自己做得,我改起来或者扩展比较方便
效果以及代码如下,,预览效果自己放在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"), a.attr("value")); 
}); 
} 
return { 
init: function (obj) { //返回调用的接口 
OBJ = obj; 
createTime(); 
} 
} 
})(jQuery); 
//使用方法 
$(".tiemin").focus(function(){ 
sookerTime.init($(this)); 
}); 
</script> 
</body> 
</html>
Javascript 相关文章推荐
jQuery html()等方法介绍
Nov 18 Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
Apr 30 Javascript
JQuery插件开发示例代码
Nov 06 Javascript
基于jquery和svg实现超炫酷的动画特效
Dec 09 Javascript
JQuery的Pager分页器实现代码
May 03 Javascript
JavaScript跨域调用基于JSON的RESTful API
Jul 09 Javascript
Node.js包管理器Yarn的入门介绍与安装
Oct 17 Javascript
实现JavaScript高性能的数据存储
Dec 11 Javascript
微信小程序 设置启动页面的两种方法
Mar 09 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
Dec 09 Javascript
阿望教你用vue写扫雷小游戏
Jan 20 Javascript
typescript配置alias的详细步骤
Aug 12 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
Oct 04 #Javascript
通过JavaScript控制字体大小的代码
Oct 04 #Javascript
jQuery图片预加载 等比缩放实现代码
Oct 04 #Javascript
jQuery EasyUI API 中文文档 - Menu菜单
Oct 03 #Javascript
Dom 结点创建 基础知识
Oct 01 #Javascript
JavaScript 的继承
Oct 01 #Javascript
Jquery 的扩展方法总结
Oct 01 #Javascript
You might like
php生成xml简单实例代码
2009/12/16 PHP
php实现统计邮件大小的方法
2013/08/06 PHP
php反射应用示例
2014/02/25 PHP
destoon切换城市后实现logo旁边显示地区名称的方法
2014/08/21 PHP
PHP类的反射用法实例
2014/11/03 PHP
验证用户是否修改过页面的数据的实现方法
2008/09/26 Javascript
犀利的js 函数集合
2009/06/11 Javascript
js实现身份证号码验证的简单实例
2014/02/19 Javascript
Jquery实现Div上下移动示例
2014/04/23 Javascript
JavaScript中实现异步编程模式的4种方法
2014/09/24 Javascript
Jquery Ajax Error 调试错误的技巧
2015/11/20 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
JQuery给select添加/删除节点的实现代码
2016/04/26 Javascript
js中常用的Math方法总结
2017/01/12 Javascript
微信小程序开发之入门实例教程篇
2017/03/07 Javascript
ES6新特性四:变量的解构赋值实例
2017/04/21 Javascript
JS脚本实现网页自动秒杀点击
2018/01/11 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
2019/01/25 Javascript
mui js控制开关状态、修改switch开关的值方法
2019/09/03 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
JavaScript undefined及null区别实例解析
2020/07/21 Javascript
[56:14]Fnatic vs OG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
对python数据切割归并算法的实例讲解
2018/12/12 Python
WxPython建立批量录入框窗口
2019/02/27 Python
40个你可能不知道的Python技巧附代码
2020/01/29 Python
pandas创建DataFrame的7种方法小结
2020/06/14 Python
解决Pycharm双击图标启动不了的问题(JetBrains全家桶通用)
2020/08/07 Python
jupyter使用自动补全和切换默认浏览器的方法
2020/11/18 Python
个人廉洁自律承诺书
2014/03/27 职场文书
保研专家推荐信范文
2015/03/25 职场文书
2015年暑期社会实践方案
2015/07/14 职场文书
go mod 安装依赖 unkown revision问题的解决方案
2021/05/06 Golang
Redis+Lua脚本实现计数器接口防刷功能(升级版)
2022/02/12 Redis
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers