js实现的仿新浪微博完美的时间组件升级版


Posted in Javascript onDecember 20, 2011

这个时间组件以前发过一次,上次那个很烂,这次有时间了,把这个升级了,性能更好,完美兼容所有浏览器,ie6下拉select档不住的问题
也解决了.总之,差不多也算一个完美的时间组件,
在线demo nothingDemo 突然发现下面的代码里面有个运行代码可以看在线demo,就再最下面
然后贴出源码,只有一点简单的说明

<!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;} 
body, button, input, select, textarea { 
font: 12px/1.125 Arial,Helvetica,sans-serif; 
} 
/*日期控件*/ 
.pc_caldr{border:1px solid #ccc;background-color:#fff;z-index:10;width:175px;height:auto;position:absolute;color:#000;padding:5px;} 
.pc_caldr .selector{height:24px;_padding:2px 0 2px;padding:2px 0 0;} 
.pc_caldr .selector .month,.pc_caldr .selector .year{float:left;font-size:12px;width:80px;border:1px solid #CCC;height:19px;} 
.pc_caldr .selector .year{width:84px;margin-left:10px;} 
.pc_caldr .weeks,.pc_caldr .days{list-style:none;width:100%!important;margin:0;padding:0;} 
.pc_caldr .weeks{height:18px;margin-bottom:2px;background:#b6d1f9;color:#fff;font-size:12px;} 
.pc_caldr .days{height:auto;font-size:12px;font-family:Arial;} 
.pc_caldr .weeks li,.pc_caldr .days li{float:left;height:20px;line-height:20px;text-align:center;width:25px;} 
.pc_caldr .days li{background-color:none;} 
.pc_caldr .days li a{display:block;text-decoration:none;height:100%;color:#43609c;transition:transform .5s;-moz-transition:-moz-transform .5s;-webkit-transition:-webkit-transform .5s;-o-transition:-o-transform .5s;padding:1px;} 
.pc_caldr .days li a:link,.pc_caldr .days li a:visited,.pc_caldr .days li a:hover{text-decoration:none;} 
.pc_caldr .days li a strong{font-weight:400;} 
.pc_caldr .days li a:hover{background-color:#5d94e6;color:#fff;transform:rotate(180deg) scale(1.5);-moz-transform:rotate(360deg) scale(1.5);-webkit-transform:rotate(360deg) scale(1.5);-o-transform:rotate(360deg) scale(1.5);} 
.pc_caldr .weeks li,.pc_caldr .days li,.pc_caldr .days li a{text-align:center;} 
/*文本框*/ 
.tiemin{width:120px;border:1px solid #f00;} 
.inline-block {display :inline-block; zoom:1 ; *display: inline; vertical-align:middle ;} 
.ie6iframe {background: none repeat scroll 0 0 #FFFFFF;left: -1px;filter:alpha(opacity=0);position: absolute;top: 0;z-index: -1;width:100%;height:150px;} 
</style> 
</head> 
<body> 
<a href="http://www.cnblogs.com/nothingbrother/archive/2011/12/17/2291107.html" target="_blank" style="color:red;border:1px solid 
red;display:block;margin:20px auto;width:300px;font-size:14px;padding:3px;">作者nothing</a> 
<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" /> 
<div style="width: 300px; height: 100px; margin-left: 210px;"> 
<select> 
<option>挡住它nothing</option> 
</select> 
</div> 
<script type="text/javascript"> 
var nothingTime = (function ($) { 
var cache = { 
obj: null, 
calendar: null, 
disappear: function () { //隐藏时间块 
cache.calendar.css("display", "none"); 
}, 
isLeap: function (year) { //闰年 
return (year % 100 == 0 ? (year % 400 == 0 ? 1 : 0) : (year % 4 == 0 ? 1 : 0)); 
}, 
isValid: function (d) { //是否在今天以前 
return (d.getTime() - (new Date()).getTime() < 0) ? true : false; 
}, 
td: new Date(), 
createData: function (year, month) { 
var n1 = new Date(year, month, 1), 
firstday = n1.getDay(), 
mdays = [31, 28 + this.isLeap(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], 
ul = document.createElement("ul"), li; 
ul.className = "days"; 
$("#calendar").find(".days").remove(); 
for (var i = firstday;i--;) { //建立前面无效的几天 
ul.appendChild(document.createElement("li")); 
} 
for (var j = 1; j <= mdays[month]; j++) { 
if (this.isValid(new Date(year, month, j))) { //今天以前的日子 
li = document.createElement("li"); 
li.innerHTML = "<a href='javascript:void(0)'>" + j + "</a>"; 
ul.appendChild(li); 
} else { 
li = document.createElement("li"); 
li.innerHTML = j; 
ul.appendChild(li); 
} 
} 
this.calendar[0].appendChild(ul); 
}, 
change: function () { //给下拉列表绑定时间 
var a = $("#calendar .month"), 
b = $("#calendar .year"); 
a.change(function () { 
cache.createData(b.attr("value"), $(this).attr("value")); 
}); 
b.change(function () { 
cache.createData($(this).attr("value"), a.attr("value")); 
}); 
cache.calendar.delegate(".days a", "click", function () { 
var day = b.attr("value") + "-" + (parseInt(a.attr("value")) + 1) + "-" + this.innerHTML; 
cache.obj.val(day); 
cache.disappear(); 
}); 
}, 
bodyClickDisappear: function () { 
setTimeout(function () { 
$("body").bind("click", cache.disappear); 
}, "200"); 
}, 
calendarClick: function () { 
cache.calendar.click(function (e) { 
e.stopPropagation(); 
}); 
} 
}, 
CreateTime = function (obj) { 
cache.obj = obj; 
var of = cache.obj.offset(); 
if (document.getElementById("calendar")) { 
} 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='2011'>2011</option><option value='2012'>2012</option></select></div><ul class='weeks'><li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li></ul>"; 
$("<div>", { id: "calendar", html: se, "class": "pc_caldr" }).appendTo(document.body); 
cache.calendar = $("#calendar"); 
if (/msie 6\.0/i.test(navigator.userAgent)) { 
var iframe = document.createElement("iframe"); 
iframe.className = "ie6iframe"; 
cache.calendar[0].appendChild(iframe); 
} 
cache.change(); 
cache.bodyClickDisappear(); 
cache.calendarClick(); 
} 
cache.createData(cache.td.getFullYear(), cache.td.getMonth()); 
cache.calendar.find(".year").attr("value", cache.td.getFullYear()); 
cache.calendar.find(".month").attr("value", cache.td.getMonth()); 
cache.calendar.css({ left: of.left, top: of.top + cache.obj.height() + 2, display: "block" }); 
}; 
return function (obj) { 
CreateTime(obj); 
}; 
})(jQuery); 
//使用方法 
$("input.tiemin").focus(function (e) { 
nothingTime($(this)); 
}).click(function (e) { 
e.stopPropagation(); 
}); 
</script> 
</body> 
</html>

OK,这个时间组件到此为止,下篇我应该讲点如何跟上js代码的脚步,ECMAScript5,我会试着模仿里面的方法,然后在ie6 7 8中运行,这样,前沿的js方法
我们照样不误.
Javascript 相关文章推荐
点击文章内容处弹出页面代码
Oct 01 Javascript
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
Apr 15 Javascript
javascript中万恶的function实例分析
May 25 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
Nov 07 Javascript
JS实现购物车特效
Feb 02 Javascript
angular仿支付宝密码框输入效果
Mar 25 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
Nov 22 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
Dec 31 Javascript
Angular父组件调用子组件的方法
Apr 02 Javascript
浅谈Vue.use的使用
Aug 29 Javascript
Layui弹出层 加载 做编辑页面的方法
Sep 16 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
Aug 31 Javascript
非主流的textarea自增长实现js代码
Dec 20 #Javascript
javascript之querySelector和querySelectorAll使用介绍
Dec 20 #Javascript
js有关元素内容操作小结
Dec 20 #Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
Dec 20 #Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
Dec 20 #Javascript
js change,propertychange,input事件小议
Dec 20 #Javascript
JavaScript面向对象设计二 构造函数模式
Dec 20 #Javascript
You might like
在PHP中利用XML技术构造远程服务(下)
2006/10/09 PHP
PHP去除数组中重复的元素并按键名排序函数
2008/08/18 PHP
一些需要禁用的PHP危险函数(disable_functions)
2012/02/23 PHP
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
PHP中SQL查询语句的id=%d解释(推荐)
2016/12/10 PHP
收集的网上用的ajax之chat.js文件
2007/04/08 Javascript
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
Div自动滚动到末尾的代码
2008/10/26 Javascript
js 禁用浏览器的后退功能的简单方法
2008/12/10 Javascript
纯JS实现的批量图片预览加载功能
2011/08/14 Javascript
JS仿百度搜索自动提示框匹配查询功能
2013/11/21 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
2016/02/14 Javascript
JavaScript设计模式开发中组合模式的使用教程
2016/05/18 Javascript
JS DOMReady事件的六种实现方法总结
2016/11/23 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
VUE实现一个分页组件的示例
2017/09/13 Javascript
Node.js学习教程之Module模块
2019/09/03 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
2019/11/01 Javascript
[20:46]Ti4循环赛第三日VG vs DK
2014/07/12 DOTA
[04:42]2015国际邀请赛CDEC战队晋级之路
2015/08/13 DOTA
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
python绘制分布折线图的示例
2020/09/24 Python
html5拍照功能实现代码(htm5上传文件)
2013/12/11 HTML / CSS
详解h5页面在不同ios设备上的问题总结
2019/03/01 HTML / CSS
白宫黑市官网:White House Black Market
2016/11/17 全球购物
经济实惠的豪华家具:My-Furniture
2019/03/12 全球购物
物业管理大学生个人的自我评价
2013/10/10 职场文书
专业技术职务聘任书
2014/03/29 职场文书
科技活动总结范文
2015/05/11 职场文书
诚信教育主题班会
2015/08/13 职场文书
python通配符之glob模块的使用详解
2021/04/24 Python
鲲鹏 CentOS 7 安装Python3.7
2022/05/11 Servers