基于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 相关文章推荐
showModalDialog 和 showModelessDialog
Jan 22 Javascript
jQuery选中select控件 无法设置selected的解决方法
Sep 01 Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
Sep 28 Javascript
统计出现最多的字符次数的js代码
Dec 03 Javascript
javascript学习笔记(五) Array 数组类型介绍
Jun 19 Javascript
js的alert弹出框出现乱码解决方案
Sep 02 Javascript
js中同步与异步处理的方法和区别总结
Dec 25 Javascript
JQuery对表格进行操作的常用技巧总结
Apr 23 Javascript
javascript中caller和callee详解
Aug 10 Javascript
JS动态插入并立即执行回调函数的方法
Apr 21 Javascript
JS中如何比较两个Json对象是否相等实例代码
Jul 13 Javascript
JS实现含有中文字符串的友好截取功能分析
Mar 13 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学习之字符串比较和查找
2011/04/17 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
php微信开发之谷歌测距
2018/06/14 PHP
php无限级分类实现评论及回复功能
2019/02/18 PHP
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
2009/10/25 Javascript
JS弹出窗口代码大全(详细整理)
2012/12/21 Javascript
js实现网站首页图片滚动显示
2013/02/04 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
2013/09/02 Javascript
jquery操作cookie插件分享
2014/01/14 Javascript
NodeJS中利用Promise来封装异步函数
2015/02/25 NodeJs
JavaScript实现按照指定长度为数字前面补零输出的方法
2015/03/19 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
2017/02/23 Javascript
JS实现微信里判断页面是否被分享成功的方法
2017/06/06 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
2017/07/17 jQuery
vue 多入口文件搭建 vue多页面搭建的实例讲解
2018/03/12 Javascript
webpack 模块热替换原理
2018/04/09 Javascript
js实现网页同时进行多个倒计时功能
2019/02/25 Javascript
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
基于vue--key值的特殊用处详解
2020/07/31 Javascript
[51:10]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python中的文件和目录操作实现代码
2011/03/13 Python
python下setuptools的安装详解及No module named setuptools的解决方法
2017/07/06 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
Python selenium的基本使用方法分析
2019/12/21 Python
python numpy实现多次循环读取文件 等间隔过滤数据示例
2020/03/14 Python
Django 解决model 反向引用中的related_name问题
2020/05/19 Python
python中执行smtplib失败的处理方法
2020/07/01 Python
linux面试题参考答案(6)
2014/08/29 面试题
计算机大学生的自我评价
2013/10/15 职场文书
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
小学生安全教育广播稿
2014/10/20 职场文书
小学教师党员承诺书
2015/04/27 职场文书
无工作证明怎么写
2015/06/15 职场文书
Vue图片裁剪组件实例代码
2021/07/02 Vue.js
聊聊mysql都有哪几种分区方式
2022/04/13 MySQL