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 相关文章推荐
两种WEB下的模态对话框 (asp.net或js的分别实现)
Dec 02 Javascript
javaScript(JS)替换节点实现思路介绍
Apr 17 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
Oct 29 Javascript
extjs 如何给column 加上提示
Jul 29 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
Dec 13 Javascript
javascript实现完美拖拽效果
May 06 Javascript
JS判断页面是否出现滚动条的方法
Jul 17 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
Dec 08 Javascript
bootstrap confirmation按钮提示组件使用详解
Aug 22 Javascript
vue实现表单录入小案例
Sep 27 Javascript
JavaScript实现滑动门效果
Jan 18 Javascript
Javascript实现单选框效果
Dec 09 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/10/23 PHP
使用PHP函数scandir排除特定目录
2014/06/12 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
PHP中使用OpenSSL生成证书及加密解密
2017/02/05 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
枚举JavaScript对象的函数
2006/12/22 Javascript
Javascript解决常见浏览器兼容问题的12种方法
2010/01/04 Javascript
jquery 操作DOM的基本用法分享
2012/04/05 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
2014/04/04 Javascript
wap图片滚动特效无css3元素纯js脚本编写
2014/08/22 Javascript
js字符串操作方法实例分析
2015/05/06 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
NodeJs——入门必看攻略
2016/06/27 NodeJs
基于jQuery实现图片推拉门动画效果的两种方法
2017/08/26 jQuery
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
python 简单备份文件脚本v1.0的实例
2017/11/06 Python
Django使用httpresponse返回用户头像实例代码
2018/01/26 Python
Python字典fromkeys()方法使用代码实例
2020/07/20 Python
在 Python 中使用 MQTT的方法
2020/08/18 Python
Python unittest生成测试报告过程解析
2020/09/08 Python
python在地图上画比例的实例详解
2020/11/13 Python
html5教程调用绘图api画简单的圆形代码分享
2013/12/04 HTML / CSS
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
Michael Kors美国官网:美式奢侈生活风格的代表
2016/11/25 全球购物
德国内衣、泳装和睡衣网上商店:Bigsize Dessous
2018/07/09 全球购物
初中生个人学习的自我评价
2013/12/04 职场文书
皮肤科医师岗位职责
2013/12/04 职场文书
共筑中国梦演讲稿
2014/04/23 职场文书
绿色环保家庭事迹材料
2014/08/31 职场文书
2016先进集体事迹材料范文
2016/02/25 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang
Python机器学习之决策树和随机森林
2021/07/15 Javascript
浅谈MySql整型索引和字符串索引失效或隐式转换问题
2021/11/20 MySQL
MySQL限制查询和数据排序介绍
2022/03/25 MySQL