基于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 相关文章推荐
深入理解JavaScript的React框架的原理
Jul 02 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
Nov 04 Javascript
javascript 中的console.log和弹出窗口alert
Aug 30 Javascript
JavaScript获取ul中li个数的方法
Feb 13 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
Mar 02 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
Mar 08 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
Jun 01 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
Dec 06 Javascript
微信小程序生成二维码的示例代码
Mar 29 Javascript
微信小程序rich-text富文本用法实例分析
May 20 Javascript
python实现迭代法求方程组的根过程解析
Nov 25 Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 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中几种常见安全设置详解
2010/04/06 PHP
PHP给文字内容中的关键字进行套红处理
2016/04/12 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
nodejs npm package.json中文文档
2014/09/04 NodeJs
jQuery实现批量判断表单中文本框非空的方法(2种方法)
2015/12/09 Javascript
Kindeditor在线文本编辑器如何过滤HTML
2016/04/14 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
2016/08/23 Javascript
轻松掌握JavaScript状态模式
2016/09/07 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
Vue.js双向绑定实现原理详解
2016/12/22 Javascript
jQuery文字轮播特效
2017/02/12 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
实例教学如何写vue插件
2017/11/30 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
2017/12/14 Javascript
vue 配置多页面应用的示例代码
2018/10/22 Javascript
微信小程序API—获取定位的详解
2019/04/30 Javascript
Vue双向绑定实现原理与方法详解
2020/05/07 Javascript
Python版实现微信公众号扫码登陆
2020/05/28 Javascript
vue 需求 data中的数据之间的调用操作
2020/08/05 Javascript
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
利用python将pdf输出为txt的实例讲解
2018/04/23 Python
python 实现矩阵上下/左右翻转,转置的示例
2019/01/23 Python
Python合并2个字典成1个新字典的方法(9种)
2019/12/19 Python
Python二元算术运算常用方法解析
2020/09/15 Python
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
试用期员工考核制度
2014/01/22 职场文书
2014自主招生自荐信策略
2014/01/27 职场文书
医学生自我评价
2014/01/27 职场文书
高中军训感言400字
2014/02/24 职场文书
小爸爸观后感
2015/06/15 职场文书
小学生节约用水倡议书
2019/08/12 职场文书
读《人生的智慧》有感:闲暇是人生的精华
2019/12/25 职场文书
Ajax实现异步加载数据
2021/11/17 Javascript