基于jquery的时间段实现代码

2024-10-25 15:04:56

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.jb51.net/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>

基于jquery的时间段实现代码

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&qu
基于JQUERY的多级联动代码

jquery.select.more.js 复制代码代码如下: (function($){ $.fn.doselectmore = function(settings) { var dfop ={ namekey: "name", pnamekey: "name", idkey: "id", selectname:"sel", method: "POST", datatype: "json&qu
基于jquery的Repeater实现代码

如何实现一个js版的repeater? Asp.net WebForm的repeater控件挺好用,我想用js实现一个在Ajax应用中也该还不错!半年前做了一个jQuery.Repeater插件,并用在了一个项目中,如今拿来晒晒! 原理项模板为HTML代码,插件接收json数据源,读取模板并创新每一项. 模板HTML 复制代码代码如下: <ul id='repeater1'> <li class='itemtempplate'>{列名}</li> </ul&g
基于JQuery的一句代码实现表格的简单筛选

效果图:代码: 复制代码代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="JqueryTableFilter.aspx.cs" Inherits="JqueryTableFilter" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
基于jQuery的倒计时插件代码

剩余时间:1小时:40分:30秒复制代码代码如下: 1 /* * 倒计时插件,主要用来限时购买 * By wayshan 版本1.0 * 使用方法: * $(function(){ * $("#ElementId").countdown({ * Edate:"2012-12-21 15:14:23" * }); * }) */ ;(function($){ $.fn.countdown = function(options){ if (this.length =
基于JQuery实现异步刷新的代码(转载)

今天很简单介绍这一封装的调用示例如下: 调用页面:JqueryTest.aspx(注:后台无代码) 复制代码代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JqueryTest.aspx.cs" Inherits="XmlHttpRequestTest.JqueryTest" %> <!DOCTYPE html PUBLIC
基于jQuery的倒计时实现代码

在线演示:http://demo.jb51.net/js/2012/mydaojishi/打包下载:mydaojishi_jb51核心代码: 复制代码代码如下: $(function(){ var tYear = ""; //输入的年份 var tMonth = ""; //输入的月份 var tDate = ""; //输入的日期 var iRemain = ""; //开始和结束之间相差的毫秒数 var sDate =
基于jquery的动画效果代码

jquery动画有意思的地方见效果图: 思想: 将图片设置分割div的背景图片,控制div的属性,可以现实有趣的滤镜效果,本例中展示了一种,感兴趣的朋友可以尝试其他滤镜的实现. 本例其余动画部分,主要是利用jquery中提供animate和delay实现. animate:这个函数的关键在于指定动画形式及结果样式属性对象.这个对象中每个属性都表示一个可以变化的样式属性. delay:设置一个延时来推迟执行队列中之后的项目. 实例效果: jquery 动画 *{margin: 0px;paddi
基于jQuery的js分页代码

复制代码代码如下: function pagerBar(dataCount,pageSize,serverUrl,contentPlace,pagerbarPlace,callBack){ this.dataCount = dataCount; this.pageSize = pageSize; this.serverUrl = serverUrl; this.contentPlace = $("#"+contentPlace); this.pagerbarPlace = $(&qu
基于jQuery实现Div窗口震动特效代码-代码简单

这是一款jQuery窗口震动效果代码,在Div边框内点击一下鼠标,它就开始震动了,适用浏览器:IE8.360.FireFox.Chrome.Opera.傲游.搜狗.世界之窗等. 效果图如下: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns=&q

基于jquery的时间段实现代码

相关推荐

随机推荐