jquery 时间段

最新推荐文章于 2021-02-28 07:13:44 发布
最新推荐文章于 2021-02-28 07:13:44 发布
阅读量431 收藏 1
点赞数
文章标签： jquery html function border class filter


首先，看下效果图：


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://files.cnblogs.com/kuikui/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>
   

 

 

yuan_jie
关注
专栏目录
jQuery每天时间段选择代码
06-24
jQuery每天时间段选择代码是一款超市店铺营业时间表格代码。
jQuery预约时间代码
05-28
例如，你可以将一天分为多个时间段，并为每个时间段创建一个按钮： ```html <button class="time-slot">9:00 AM <button class="time-slot">10:00 AM <!-- 更多时段按钮... --> ``` 然后，通过jQuery监听这些...
Jquery时间段选择器
weixin_30466953的博客
09-24 664
效果(有给小bug, 在时间的大小比较上.): HTML: <html> <head> <title>测试DatePicker</title> <link href="timePicker.css" rel="stylesheet" /> <script type="text/javasc...
jQuery考勤时间段记录代码
06-24
对于"jQuery考勤时间段记录代码"，我们可以深入探讨一下这个项目涉及到的关键技术和实现原理。 首先，考勤系统是企业管理和员工日常行为的重要工具，用于追踪员工的上下班时间。在这款jQuery考勤时间段记录代码中，...
JQuery设置时间段下拉选择实例
10-24
在本次分享中，我们将重点介绍如何使用JQuery设置一个时间段下拉选择的实例，以及在实现过程中可能涉及的关键知识点。 首先，JQuery本身提供了几种方法来操作下拉列表（select元素）。其中，$.dropdown()是一个...
jQuery一星期时间段选择插件
07-24
本文将详细解析"jQuery一星期时间段选择插件"这一主题，涵盖其核心功能、实现原理以及如何在项目中应用。 首先，这款插件的主要目标是为用户提供一种简便的方式来选择一星期内特定时间段，这在需要用户指定服务预约...
基于jquery-ui的中文版时间段选择插件
11-10
基于jquery-ui的时间段选择插件，已经实现汉化，可以选择到具体天数，不能选择时、分、秒。
jQuery选择预约日期和时段代码
06-10
jQuery选择预约日期和时段代码，移动端选择预约日期和时间段范围。
jQuery手机端预约时间选择代码
06-10
一款简洁美观的jQuery手机端点击遮罩弹出预约时间选择代码，适合做移动端时间选择功能。默认参数通过url末尾数值传递“?type=33 ?type=34 ?type=35 ” 自行选择修改。
jQuery jcDate时间选取插件(选取时间段)
05-11
摘要:脚本资源,jQuery,时间插件,皇冠代理备用 jQuery jcDate时间选取插件，支持选取时间段，日期选取插件，可选择起始时间和结束时间的日期选择器，适合用于酒店预订、车票预订、数据统计等应用场合。 运行环境：HTML/PHP/ASP/
JQ实现拖动选择时间段
King博客
10-19 1042
前言概述 本文介绍利用JQ实现拖动选择时间段的示例，该实例可默认显示设置的时间段、可拖动多个时间段、可伸缩时间段、可合并时间段并能导出所有时间段的详细信息，效果如下： 实现过程 1. 先实现页面效果，文件*.html和*.css代码如下： Tips:css代码联合效果比较好理解。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>拖动选择时间段&lt
jq实现预约时间表
Isleta_的博客
07-20 3700
实现效果如上图； HTML部分 <div class="container-fluid"> <div class="textCont"> 选择您需要的服务时间 </div> <div class="appointmentColor"> <ul> <li> <p&gt
jq 读取时段并做处理
lx_1024的博客
12-28 266
需求是读取插件的时段，时段是中国标准时间 由于以前就知道时间不能进行运算，所以刚开始时做的很复杂，先取得开始时间和结束时间，在开始时间的基础上进行操作后面的时间，逻辑非常复杂，需要考虑跨年跨月时对前后年月的影响，做到后面自己都晕菜了，然后就打算换一个思路，就去看了w3c的Date对象，查找了相关资料，发现几个有用的方法，很简单就完成了刚才很复杂的逻辑，逻辑是先获取时段的最大值最小值，这两个值是中
jq 时间字符串分割成 时间格式
Ming-code
01-20 619
代码 function dataS(dateString) { var dateStr = dateString.replace(/(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})/, "$1-$2-$3 $4:$5:$6"); console.log(dateStr) return dateStr; } dataS("201908161...
java下拉框时间选择_JQuery设置时间段下拉选择实例
weixin_26757949的博客
02-28 412
本文实例讲述了JQuery设置时间段下拉选择的方法。分享给大家供大家参考。具体实现方法如下：$(document).ready(function() {var arrT = [];var tt = "{0}:{1}";for (var i = 0; i < 24; i++) {arrT.push({ text: StrFormat(tt, [i >= 10 ? i : "0" + i,...
[JQ权威指南]datepocker插件实现分段时间的选择
德仔
12-06 562
如题：<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>使用datepicker插件实现选择日期的操作二</title> <script type="text/javascript" src="Jscript/jquery-1.4.2-vsdoc.js"></script> <script type="text
jQuery时间段选择代码包 - 网页特效利器
资源摘要信息:"jQuery每天时间段选择代码.zip" 知识点: 1. jQuery基础知识点: jQuery是一个快速、小巧、功能丰富的JavaScript库。它使得HTML文档遍历和操作、事件处理、动画和Ajax变得简单。通过使用jQuery，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值