js實(shí)現(xiàn)的仿新浪微博完美的時間組件升級版
更新時間：2011年12月20日 01:57:33 作者：
本博客沒有華麗的布局,只求樸實(shí)的js的代碼,只為js代碼愛好者提供,一周大概會出1-2篇js前沿代碼的文章.只是代碼,不說技術(shù)
這個時間組件以前發(fā)過一次,上次那個很爛,這次有時間了,把這個升級了,性能更好,完美兼容所有瀏覽器,ie6下拉select檔不住的問題
也解決了.總之,差不多也算一個完美的時間組件,
在線demo nothingDemo 突然發(fā)現(xiàn)下面的代碼里面有個運(yùn)行代碼可以看在線demo,就再最下面
然后貼出源碼,只有一點(diǎn)簡單的說明
<!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 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,這個時間組件到此為止,下篇我應(yīng)該講點(diǎn)如何跟上js代碼的腳步,ECMAScript5,我會試著模仿里面的方法,然后在ie6 7 8中運(yùn)行,這樣,前沿的js方法
我們照樣不誤.
也解決了.總之,差不多也算一個完美的時間組件,
在線demo nothingDemo 突然發(fā)現(xiàn)下面的代碼里面有個運(yùn)行代碼可以看在線demo,就再最下面
然后貼出源碼,只有一點(diǎn)簡單的說明
復(fù)制代碼 代碼如下:
<!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 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,這個時間組件到此為止,下篇我應(yīng)該講點(diǎn)如何跟上js代碼的腳步,ECMAScript5,我會試著模仿里面的方法,然后在ie6 7 8中運(yùn)行,這樣,前沿的js方法
我們照樣不誤.
您可能感興趣的文章:
相關(guān)文章
![javascript最短的拖動代碼[兼容FF]](http://img.jbzj.com/images/xgimg/bcimg0.png)
javascript最短的拖動代碼[兼容FF]...2007-10-10
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)隨機(jī)圓與矩形功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要介紹了刷新頁面后讓控制臺的js代碼繼續(xù)執(zhí)行，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
js控件Kindeditor實(shí)現(xiàn)圖片自動上傳功能
這篇文章主要為大家詳細(xì)介紹了js控件Kindeditor實(shí)現(xiàn)圖片自動上傳功能的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-06-06
mint-ui的search組件在鍵盤顯示搜索按鈕的實(shí)現(xiàn)方法
這篇文章主要介紹了mint-ui的search組件在鍵盤顯示搜索按鈕的實(shí)現(xiàn)方法,需要的朋友可以參考下2017-10-10
JavaScript實(shí)現(xiàn)省市聯(lián)動過程中bug的解決方法
這篇文章主要為大家詳細(xì)介紹了解決JavaScript實(shí)現(xiàn)省市聯(lián)動過程中的bug，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
JavaScript使用ActiveXObject訪問Access和SQL Server數(shù)據(jù)庫
這篇文章主要介紹了JavaScript使用ActiveXObject訪問Access和SQL Server數(shù)據(jù)庫,本文分別給出相應(yīng)操作代碼,需要的朋友可以參考下2015-04-04
JavaScript實(shí)現(xiàn)文字展開和收起效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)文字展開和收起效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
javascript window.confirm確認(rèn) 取消對話框?qū)崿F(xiàn)代碼小結(jié)
本文章講述的三種都是基于了javascript confirm提示確認(rèn)框的做法了，只是在不同的地方寫哦，有需要的同學(xué)可參考一下2012-10-10
bootstrap中selectpicker下拉框使用方法實(shí)例
這篇文章主要給大家介紹了關(guān)于bootstrap中selectpicker下拉框使用的相關(guān)資料，文中通過示例介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-03-03