基于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 相关文章推荐
js 表单验证方法(实用)
Apr 28 Javascript
JQuery获取各种宽度、高度(format函数)实例
Mar 04 Javascript
json字符串之间的相互转换示例代码
Aug 21 Javascript
javascript之Boolean类型对象
Jun 07 Javascript
Bootstrap响应式侧边栏改进版
Sep 17 Javascript
浅谈Node.js:Buffer模块
Dec 05 Javascript
JS使用插件cryptojs进行加密解密数据实例
May 11 Javascript
JS实现合并json对象的方法
Oct 10 Javascript
layui富文本编辑器前端无法取值的解决方法
Sep 18 Javascript
解决vue-router 嵌套路由没反应的问题
Sep 22 Javascript
微信小程序实现日历小功能
Nov 18 Javascript
javascript实现左右缓动动画函数
Nov 25 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导入Excel到MySQL的方法
2011/04/23 PHP
如何用php获取文件名后缀
2013/06/09 PHP
PHP中数据类型转换的三种方式
2015/04/02 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
云网广告中的代码,提示出错,大家找找
2006/11/21 Javascript
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
JS getMonth()日期函数的值域是0-11
2010/02/15 Javascript
jquery 面包屑导航 具体实现
2013/06/05 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
2014/07/14 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
2015/11/24 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
基于 Node.js 实现前后端分离
2016/04/23 Javascript
基于Bootstrap3表格插件和分页插件实例详解
2016/05/17 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
2016/09/01 Javascript
canvas简单快速的实现知乎登录页背景效果
2017/05/08 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
2017/05/20 jQuery
微信小程序 新建登录页并实现tabBar隐藏
2017/06/13 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
2017/11/24 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
2018/04/21 Javascript
vue自动化表单实例分析
2018/05/06 Javascript
Vue-Router基础学习笔记(小结)
2018/10/15 Javascript
Vue防止白屏添加首屏动画的实例
2019/10/31 Javascript
JS实现横向轮播图(中级版)
2020/01/18 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
python实现图片变亮或者变暗的方法
2015/06/01 Python
python获取外网IP并发邮件的实现方法
2017/10/01 Python
Python将json文件写入ES数据库的方法
2019/04/10 Python
基于python调用jenkins-cli实现快速发布
2020/08/14 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
海淘零差价,宝贝全球购: 宝贝格子
2016/08/24 全球购物
波兰家具和室内装饰品购物网站:Vivre
2018/04/10 全球购物
环境科学专业求职信
2014/08/04 职场文书
安全承诺书格式范本
2015/04/28 职场文书
「我的青春恋爱物语果然有问题。-妄言录-」第20卷封面公开
2022/03/21 日漫
Win11如何设置右键单击显示所有选项?Win11右键单击显示所有选项设置教程
2022/04/08 数码科技