基于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 相关文章推荐
获取Javscript执行函数名称的方法
Dec 22 Javascript
如何在Mozilla Gecko 用Javascript加载XSL
Jan 09 Javascript
Mootools 1.2教程 排序类和方法简介
Sep 15 Javascript
href下载文件根据id取url并下载
May 28 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
Apr 16 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
Aug 07 Javascript
webpack实现热更新(实施同步刷新)
Jul 28 Javascript
bmob js-sdk 在vue中的使用教程
Jan 21 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
Feb 03 Javascript
对vue下点击事件传参和不传参的区别详解
Sep 15 Javascript
发布订阅模式在vue中的实际运用实例详解
Jun 09 Javascript
JS 基本概念详细介绍
Oct 16 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 cli换行示例
2014/04/22 PHP
PHP number_format函数原理及实例解析
2020/07/14 PHP
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
2010/04/13 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
2011/10/29 Javascript
js判断undefined变量类型使用typeof
2013/06/03 Javascript
jQuery Ajax()方法使用指南
2014/11/19 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
简单学习vue指令directive
2016/11/03 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
JS实现移动端按首字母检索城市列表附源码下载
2017/07/05 Javascript
iview给radio按钮组件加点击事件的实例
2017/09/30 Javascript
vue项目打包之开发环境和部署环境的实现
2020/04/23 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
2020/04/28 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
2020/11/12 Javascript
python实现下载整个ftp目录的方法
2017/01/17 Python
利用python将图片转换成excel文档格式
2017/12/30 Python
python操作xlsx文件的包openpyxl实例
2018/05/03 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
python智联招聘爬虫并导入到excel代码实例
2019/09/09 Python
基于Python绘制美观动态圆环图、饼图
2020/06/03 Python
一文带你了解Python 四种常见基础爬虫方法介绍
2020/12/04 Python
葡萄牙鞋子品牌:Fair
2016/12/10 全球购物
阿迪达斯希腊官方网上商店:adidas希腊
2019/04/06 全球购物
服务生自我鉴定
2014/01/22 职场文书
公司股权转让协议书
2014/04/12 职场文书
优秀安全员事迹材料
2014/05/11 职场文书
2014年秋季开学典礼主持词
2014/08/02 职场文书
三峡导游词
2015/01/31 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
小学生暑假生活总结
2015/07/13 职场文书
2016七夕情人节感言
2015/12/09 职场文书
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android
JS轻量级函数式编程实现XDM三
2022/06/16 Javascript