基于jquery的时间段实现代码_jquery-js教程-PHP中文网

基于jquery的时间段实现代码_jquery

php中文网

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

原创

1070人浏览过

json字符串：

Ex驾校预约小程序

传统驾校预约方式步骤繁琐，效率低下，随着移动互联网科技和5G的革新，驾校考试领域迫切需要更加简洁、高效的预约方式，便捷人们的生活。因此设计基于微信小程序的驾校预约系统，改进传统驾校预约方式，实现高效的驾校学校预约。采用腾讯提供的小程序云开发解决方案，无须服务器和域名。驾校预约管理：开始/截止时间/人数均可灵活设置，可以自定义客户预约填写的数据项驾校预约凭证：支持线下到场后校验签到/核销/二维码自

查看详情

复制代码代码如下:

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){ 
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){ 
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{ 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} 