基于jquery的时间段实现代码


Posted in Javascript onAugust 02, 2012

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){ 
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+='<span class="unspan1 '; 
} 
else if(mcode.minfo[i].status===3){ 
html+='<span class="unspan2 '; 
} 
else{ 
html+='<span class=" '; 
} 
if((i+1)%3===0){ 
html+='" >'; 
} 
else{ 
html+='mspan" >'; 
} 
html+=mcode.minfo[i].time; 
if(mcode.minfo[i].status===2){ 
html+='<label>已过期</label>'; 
} 
else if(mcode.minfo[i].status===3){ 
html+='<label>已选满</label>'; 
} 
if(mcode.minfo[i].status!==1){ 
html+='<em></em>'; 
} 
html+="</span>"; 
}

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}

实例:
<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<script type="text/javascript" src="http://demo.3water.com/jslib/jquery/jquery.js"></script> 
<style type="text/css"> 
*{margin:0px;padding: 0px;} 
#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} 
</style> 
</head> 
<body> 
<div id="test"> 
</div> 
<div id="result"></div> 
<script type="text/javascript"> 
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 
} 
] 
}; 
var html = ''; 
for(var i in mcode.minfo){ 
if(mcode.minfo[i].status===2){ 
html+='<span class="unspan1 '; 
} 
else if(mcode.minfo[i].status===3){ 
html+='<span class="unspan2 '; 
} 
else{ 
html+='<span class=" '; 
} 
if((i+1)%3===0){ 
html+='" >'; 
} 
else{ 
html+='mspan" >'; 
} 
html+=mcode.minfo[i].time; 
if(mcode.minfo[i].status===2){ 
html+='<label>已过期</label>'; 
} 
else if(mcode.minfo[i].status===3){ 
html+='<label>已选满</label>'; 
} 
if(mcode.minfo[i].status!==1){ 
html+='<em></em>'; 
} 
html+="</span>"; 
} 
$("#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()); 
}); 
} 
}); 
</script> 
</body> 
</html>
Javascript 相关文章推荐
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 Javascript
jQuery基础知识小结
Dec 22 Javascript
JavaScript中的slice()方法使用详解
Jun 06 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
angular+ionic返回上一页并刷新页面
Aug 08 Javascript
Vue精简版风格指南(推荐)
Jan 30 Javascript
基于Axios 常用的请求方法别名(详解)
Mar 13 Javascript
100行代码实现一个vue分页组功能
Nov 06 Javascript
ES6 let和const定义变量与常量的应用实例分析
Jun 27 Javascript
JS数据类型判断的几种常用方法
Jul 07 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
Aug 04 Javascript
vue-cli3自动消除console.log()的调试信息方式
Oct 21 Javascript
Javascript this 的一些学习总结
Aug 02 #Javascript
创建公共调用 jQuery Ajax 带返回值
Aug 01 #Javascript
这些年、我收集的JQuery代码小结
Aug 01 #Javascript
JQquery的一些使用心得分享
Aug 01 #Javascript
javascript 兼容所有浏览器的DOM扩展功能
Aug 01 #Javascript
别了 JavaScript中的isXX系列
Aug 01 #Javascript
JS判断元素为数字的奇异写法分享
Aug 01 #Javascript
You might like
PHP字符串的编码问题的详细介绍
2013/04/27 PHP
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
php使用unset()删除数组中某个单元(键)的方法
2015/02/17 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
各种常用浏览器getBoundingClientRect的解析
2009/05/21 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
2013/11/18 Javascript
javascript常用代码段搜集
2014/12/04 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
2015/09/04 Javascript
浅谈jquery点击label触发2次的问题
2016/06/12 Javascript
javascript函数中的3个高级技巧
2016/09/22 Javascript
JavaScript转换数据库DateTime字段类型方法
2017/06/27 Javascript
微信小程序实现全国机场索引列表
2018/01/31 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
面试题:react和vue的区别分析
2019/04/08 Javascript
js打开word文档预览操作示例【不是下载】
2019/05/23 Javascript
[01:38]完美世界DOTA2联赛PWL S3 集锦第四期
2020/12/21 DOTA
python中list常用操作实例详解
2015/06/03 Python
Python 实现一个颜色色值转换的小工具
2016/12/06 Python
Python 文本文件内容批量抽取实例
2018/12/10 Python
基于python 微信小程序之获取已存在模板消息列表
2019/08/05 Python
python学生管理系统的实现
2020/04/05 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
Melijoe时尚童装德国官网:Melijoe德国
2016/09/03 全球购物
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
Swisse官方海外旗舰店:澳大利亚销量领先,自然健康品牌
2017/12/15 全球购物
JD Sports芬兰:英国领先的运动鞋和运动服饰零售商
2018/11/16 全球购物
实习单位推荐信范文
2013/11/27 职场文书
打架检讨书500字
2014/01/29 职场文书
好人好事事迹材料
2014/02/12 职场文书
护士节演讲稿开场白
2014/08/25 职场文书
大学毕业典礼演讲稿
2014/09/09 职场文书
大学运动会加油稿200字(5篇)
2014/09/27 职场文书
会议开幕词
2015/01/28 职场文书
图书馆义工感想
2015/08/07 职场文书
Oracle 死锁的检测查询及处理
2021/09/25 Oracle
在虚拟机中安装windows server 2008的图文教程
2022/06/28 Servers