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 相关文章推荐
Prototype最新版(1.5 rc2)使用指南(1)
Jan 10 Javascript
JSON 学习之JSON in JavaScript详细使用说明
Feb 23 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
Oct 17 Javascript
控制台报错object is not a function的解决方法
Aug 24 Javascript
jquery实现的蓝色二级导航条效果代码
Aug 24 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
Dec 20 Javascript
jQuery图片渐变特效的简单实现
Jun 25 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
Jan 30 Javascript
vue中mint-ui的使用方法
Apr 04 Javascript
vue实现微信二次分享以及自定义分享的示例
Mar 20 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
Apr 17 Javascript
Javascript ParentNode和ChildNode接口原理解析
Mar 16 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中用接口、抽象类、普通基类实现“面向接口编程”与“耦合方法”简述
2011/03/23 PHP
PHP学习之数组的定义和填充
2011/04/17 PHP
win10环境PHP 7 安装配置【教程】
2016/05/09 PHP
php中序列化与反序列化详解
2017/02/13 PHP
laravel 5.5 关闭token的3种实现方式
2019/10/24 PHP
用jQuery打造TabPanel效果代码
2010/05/22 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
2010/06/12 Javascript
JS随机漂浮广告代码具体实例
2013/11/19 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
微信小程序 生命周期详解
2016/10/12 Javascript
对称加密与非对称加密优缺点详解
2017/02/06 Javascript
深入理解Nodejs Global 模块
2017/06/03 NodeJs
NodeJS 将文件夹按照存放路径变成一个对应的JSON的方法
2018/10/17 NodeJs
js中this的指向问题归纳总结
2018/11/28 Javascript
vue-router实现编程式导航的代码实例
2019/01/19 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
python 快速排序代码
2009/11/23 Python
python进阶教程之循环相关函数range、enumerate、zip
2014/08/30 Python
在Linux下使用Python的matplotlib绘制数据图的教程
2015/06/11 Python
使用Python编写简单的画图板程序的示例教程
2015/12/08 Python
通过python+selenium3实现浏览器刷简书文章阅读量
2017/12/26 Python
浅谈pandas中Dataframe的查询方法([], loc, iloc, at, iat, ix)
2018/04/10 Python
python常用函数与用法示例
2019/07/02 Python
Django 对象关系映射(ORM)源码详解
2019/08/06 Python
使用python绘制cdf的多种实现方法
2020/02/25 Python
python实现交并比IOU教程
2020/04/16 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
Python字符串split及rsplit方法原理详解
2020/06/29 Python
html5 datalist标签使用示例(自动完成组件)
2014/05/04 HTML / CSS
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
住宅质量保证书
2014/04/29 职场文书
感恩的演讲稿
2014/05/06 职场文书
2015年综治维稳工作总结
2015/04/07 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书