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 相关文章推荐
Display SQL Server Login Mode
Jun 21 Javascript
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
Oct 20 Javascript
在页面加载完成后通过jquery给多个span赋值
May 21 Javascript
javascript实现左右控制无缝滚动
Dec 31 Javascript
JavaScript中的条件判断语句使用详解
Jun 03 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
Jul 27 Javascript
Node.js刷新session过期时间的实现方法推荐
May 18 Javascript
Jquery元素追加和删除的实现方法
May 24 Javascript
原生js实现tab选项卡切换
Mar 23 Javascript
微信小程序 地图map详解及简单实例
Jan 10 Javascript
浅析Vue下的components模板使用及应用
Nov 27 Javascript
vue-socket.io跨域问题有效解决方法
Feb 11 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
CI框架学习笔记(二) -入口文件index.php
2014/10/27 PHP
详解PHP的Yii框架中的Controller控制器
2016/03/29 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
php实现登录页面的简单实例
2019/09/29 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
javascript实现的网页局布刷新效果
2008/12/01 Javascript
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
2012/09/19 Javascript
jQuery不使用插件及swf实现无刷新文件上传
2014/12/08 Javascript
JavaScript中的继承方式详解
2015/02/11 Javascript
js字符串操作方法实例分析
2015/05/06 Javascript
JS实现网站菜单拖拽移位效果的方法
2015/09/24 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
Vuejs实现带样式的单文件组件新方法
2017/05/02 Javascript
echarts大屏字体自适应的方法步骤
2019/07/12 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
在VUE中使用lodash的debounce和throttle操作
2020/11/09 Javascript
[59:32]Liquid vs Fnatic 2019国际邀请赛淘汰赛败者组BO1 8.20.mp4
2020/07/19 DOTA
Python使用新浪微博API发送微博的例子
2014/04/10 Python
Python3获取电脑IP、主机名、Mac地址的方法示例
2019/04/11 Python
用pycharm开发django项目示例代码
2019/06/13 Python
Mac中PyCharm配置Anaconda环境的方法
2020/03/04 Python
解决Python中导入自己写的类,被划红线,但不影响执行的问题
2020/07/13 Python
python开发一个解析protobuf文件的简单编译器
2020/11/17 Python
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
html5模拟平抛运动(模拟小球平抛运动过程)
2013/07/25 HTML / CSS
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
酒吧员工的岗位职责
2013/11/26 职场文书
幼儿园教师节活动方案
2014/02/02 职场文书
父母对孩子的寄语
2014/04/09 职场文书
委托培训协议书
2014/11/17 职场文书
小学三八妇女节活动总结
2015/02/06 职场文书
任命书格式模板
2015/09/22 职场文书
Python Flask请求扩展与中间件相关知识总结
2021/06/11 Python
SpringCloud Feign请求头删除修改的操作代码
2022/03/20 Java/Android