Time period implementation code based on jquery_jquery

json string:

Copy code The code is as follows:

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}]};

where time represents the time period, status represents when the position is 1 it can be used, and when it is 2 it represents Expired, 3 o'clock means it has been selected.
Loop through the data values ​​in the json string.

Copy code The code is as follows:

for(var i in mcode.minfo){
mcode.minfo[i].time mcode.minfo[i].status;
}

When the current time period has expired or is full, move the mouse to its current time period The corresponding information will be prompted when it is displayed. Move the mouse away to cancel the prompt.
The current time period is orange, which means it can be selected.

Copy code The code is as follows:

$.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("You selected:" $(this).text());
});
}
} );

Splice strings to build an html structure.

Copy code The code is as follows:

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 ='Expired> ;';
}
else if(mcode.minfo[i].status===3){
html ='fully selected';
}
if(mcode.minfo[i].status!==1){
html ='';
}
html =" span>";
}

css style:

Copy code The code is as follows:

#test{ width: 430px; padding: 35px; border: 1px solid #666666;overflow: hidden; margin: 100px auto 0px;}
#test span{display:block; background: #FF6600; width:130px; height: 30px; line-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; left:25px; top:-18px; width: 60px; line-height: 20px; background: #F3F3F3;
padding:1px 10px; border:1px solid #CCCCCC;display : none;}
#test em{display: block;border-color: #F3F3F3 transparent transparent transparent;border-style: solid;border-width: 6px 6px 6px 6px;
padding: 0;width: 0 ;height: 0;
font-size: 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}

Example:

Copy code The code is as follows: