基於jquery的時間段實作代碼_jquery

json字串：

複製程式碼 程式碼如下:

var mcode={"minfo":[{" time":"9:00-10:00","status":2},{"time":"10:00-11:00","status":1},{"time":"11: 00-12:00","status":3},{"time":"13:00-14:00","status":1},{"time":"14:00-15:00" ,"status":1},{"time":"15:00-16:00","status":1},{"time":"16:00-17:00","status":1 },{"time":"17:00-18:00","status":1}]};

其中time代表時間段，status當職位1時代表可以使用，2時代表已過期，3時代表已選滿。
透過循環遍歷json字串中的資料值。

複製程式碼 代碼如下:

for(var i in mcode.minfo){
for(var i in mcode.minfo){
for(var i in mcode.minfo){
for(var i in mcode.minfo){

for(var i in mcode.minfo){
for(var i in mcode.minfo){
for(var i in mcode.minfo){
for(var i in mcode.minfo){

for(var i in mcode.minfo){ >mcode.minfo[i].time mcode.minfo[i].status; } 當前時間段為已過期或以選滿時，滑鼠移動到其當前時間段上時提示對應訊息，滑鼠移開取消提示。 目前時段為橘黃色代表可以選擇。

複製程式碼


程式碼如下:


$.each($("#test span" ,function(k,v){
if($(this).hasClass("unspan1")||$(this).hasClass("unspan2")){
$(this).hover(function (){
$(this).find("label").css({"display":"block"});
$(this).find("em").css({" display":"block"});
}, function(){
$(this).find("label").css({"display":"none"});
$ (this).find("em").css({"display":"none"});
});
}

else{
$(this).click(function (){
　　$("#result").empty().html("您選擇了：" $(this).text());

}); } } ); 拼接字串，建構html結構。

複製程式碼


代碼如下:


for(var i in mcode.minfo){
for(var i in mcode.minfo){
for(var i in mcode.minfo){
for(var i in mcode.minfo){
for(var i in mcode.minfo){
for(var i in mcode.minfo){
for(var i in mcode.minfo){
for(var i in mcode.minfo){
for(var i in mcode.minfo){ >if(mcode.minfo[i].status===2){
html ='}
else{
html ='';
}
else{
html ='mspan" >';

}
html =mcode.minfo[i].time;
if(mcode.minfo[i].status===2){

html ='已過期'; } else if(mcode.minfo[i].status===3){ html ='已選滿'; } if(mcode.minfo [i].status!==1){ html ='';

}

html ="";
}


css樣式：




複製程式碼


程式碼如下：#test span{display:block; background: #FF6600；>#test span{display:block; background: #FF6600; -height: 30px; text-align: center; float:left;
_display:inline; position:relative; margin-bottom: 15px; cursor: pointer;}
#test .mspan{margin-right: 20px ;}
#test .unspan1{background: #D2E0E6; cursor:default}
#test .unspan2{background: #ffcaca; cursor: default;}

#test label{position: absolute; 25px; 頂:-18px; width: 60px; line-height: 20px; background: #F3F3F3;
padding:1px 10px; border:1px solid #CCCCCCdisplay:1px 10px; border:1px solid #CCCCCCdisplay: ntest; : block;border-color: #F3F3F3 transparent transparent transparent;border-style: solid;border-width: 6px 6px 6px 6px;
padding: 0;width: 0;height: 0 font-izes: 0;line-height: 0;

position: absolute;left:58px; top:5px;display:none; _border-top-color: #F3F3F3;_border-bottom-color: #F3F3F3; _filter: chroma( color = #F3F3F3); } #result{ margin: 10px auto 0px; text-align: center}

實例： 實例： 。 複製程式碼 程式碼如下:

標題>



*{邊距：0px;填充：0px;}
#test{ 寬度：430px;內邊距：35px；邊框：1px 實心#666666；溢出：隱藏；邊距：100px自動0px;}
#test span{display:block;背景：#FF6600；寬度：130px；高度：30px；行高：30px；文字對齊：居中；浮動：左；_顯示：內聯；職位：親屬；下邊距：15px；遊標：指針；}
#test .mspan{margin-right: 20px;}
#test .unspan1{背景：#D2E0E6;遊標：預設}
#test . unspan2{背景：#ffcaca;遊標：預設；}
#測試標籤{位置：絕對；左：25px；頂部：-18px；寬度：60 像素；行高：20px；背景：#F3F3F3；內邊距：1px 10px；邊框:1px 實心#CCCCCC;顯示: 無;}
#test em{顯示: 塊;邊框顏色: #F3F3F3 透明透明透明;邊框樣式: 實心;邊框寬度: 6px 6px 6px 6px; 🎜>填充：0；寬度：0；高度：0；
字體大小：0；行高：0;
位置：絕對；左：58px；上：5px；顯示：無；
_邊框頂部顏色：#F3F3F3;_邊框底部顏色：#F3F3F3;
_filter: 色度( color = #F3F3F3);
}
#result{ 邊距：10px 自動0px; }
;
頭>

var mcode = {
"minfo": [
{
"時間": "9:00-10 :00",
"狀態": 2
},
{
"時間": "10:00-11:00",
"狀態": 1
} ,
{
"時間": "11:00-12 :00",
"狀態": 3
},
{
"時間": "13:00 -14:00",
"狀態": 1
} ,
{
"時間": "14:00-15:00",
"狀態": 1
},
{
"時間": "15:00 -16:00",
"狀態": 1
},
{
"時間": "16 :00-17:00",
"狀態": 1
},
{
"時間": "17:00-18:00",
"狀態": 1
}
]
};
var html = '';
for(var i in mcode.minfo){
if(mcode.minfo[i].status== =2){
html ='}
else{
html ='';
}
html =mcode.minfo[i].time;
}
html =mcode.minfo[i].time;
if(mcode.minfo[i] .status===2){
html ='已過渡';
}
else if(mcode.minfo[i]. status===3) {
html ='已選滿';
}
if(mcode.minfo[i].status!==1){
html =' '
}
html ="";
$("#test").empty().html(html );
$.each($("#test span"),function(k,v){
if($(this).hasClass("unspan1")||$(this).hasClass( "unspan2") ){
$(this).hover(function(){
$(this).find("label").css({"display":"block"});
$(this ).find("em").css({"display":"block"});
}, function(){
$(this).find("label"). css({" display":"none"})
$(this).find("em").css({"display":"none"})
}); }
else{
$(this).click(function(){
$("#result").empty().html("您選擇了：" $(this).text( ));
}