基於jquery的時間段實作代碼_jquery-js教程-PHP中文網

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

WBOY

發布： 2016-05-16 17:51:15

原創

1025 人瀏覽過

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( )); 
} 
 