栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

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



Untitled Page


*{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;}



red;display:block;margin:20px auto;width:300px;font-size:14px;padding:3px;">作者nothing














OK,这个时间组件到此为止,下篇我应该讲点如何跟上js代码的脚步,ECMAscript5,我会试着模仿里面的方法,然后在ie6 7 8中运行,这样,前沿的js方法
我们照样不误.
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/113455.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号