function getlistRoom(obj) { //obj就是通过ajax传过来的 data

        for (var i = 0; i < obj.length; i++) {//遍历数据

            var endtimeminutes = obj[i].bookEndTime.minutes;//接收结束的分钟
            var starttimeminutes = obj[i].bookStartTime.minutes;//接收开始的分钟
            var endtimehours = obj[i].bookEndTime.hours;//接收结束的小时
            var starttimehours = obj[i].bookStartTime.hours;//接收开始的小时
//            console.log(endtimeminutes+"/"+starttimeminutes+"?"+endtimehours+"?"+starttimehours)

            var ishours = Math.abs(starttimehours - endtimehours);//经过了几个小时
            if (ishours == 0) {//若在同一个时段
                var spanTop = starttimeminutes / 60 * 38; //定位TOP值
                var spanHight = (endtimeminutes - starttimeminutes) / 60 * 38;//遮盖层的
                var wholi = starttimehours * 7;//
                $('.room').find("li").eq(wholi).find("span").css({//给li里的span加样式
                    "top": spanTop,
                    "height": spanHight,
                    "z-index": 2
                })
            } else {

                var spanTopbtm = parseInt(starttimeminutes / 60 * 38); //38是当前每个小格li的高度
                var spanHightbtm = parseInt((60 - starttimeminutes) / 60 * 38);
                var spanBtmhight = parseInt(endtimeminutes / 60 * 38);
                var wholibtm = starttimehours * 7;
                var endtime = endtimehours * 7;

                var getSpan = $('.room').find("li");
                getSpan.eq(wholibtm).find("span").css({//给li里的span加样式
                    "top": spanTopbtm,
                    "height": spanHightbtm,
                    "z-index": 2,
                    "background": "#7EC6B2"
                });
                getSpan.eq(endtime).find("span").css({//给li里的span加样式
                    "height": spanBtmhight,
                    "z-index": 2,
                    "background": "#7EC6B2"

                });

                if (ishours > 1) {
                    var startAdd = starttimehours + 1;
                    var endAdd = endtimehours - 1;
                    if (startAdd == endAdd) {
                        var wholibtms = startAdd * 7;
                        getSpan.eq(wholibtms).find("span").css({
                            "height": 38,
                            "z-index": 2,
                            "background": "#7EC6B2"
                        })
                    } 

这是获取后台的 预订时间 开始时间与结束时间的一个小计算 完全大哥帮我的,

HTML

<div class="qstcc qstcc2" id="reserve_box">
        <div class="qsdiv">
            <span class="close close_e"></span>
            <p class="qstit">预约</p>
            <div class="thnr">
                <div class="space5"></div>
                <p>
                   AAA
                    <select class="xxlx flnone w60">
                        <option value="">#306</option>
                    </select>
                    <span class ="day">星期:</span>
                </p>
                <div class="space5"></div>
                <p>
                    开始时间:
                    <select class="xxlx startY flnone w60">
                        <option value=""></option>

                    </select> 年
                    <select class="xxlx startM flnone w45">
                        <option value="">1</option>

                    </select> 月
                    <select class="xxlx startD flnone w45">
                        <option value="">1</option>
                        <option value="">2</option>
                        <option value="">3</option>
                        <option value="">4</option>
                        <option value="">5</option>
                        <option value="">6</option>
                        <option value="">7</option>
                        <option value="">8</option>
                        <option value="">9</option>
                        <option value="">10</option>
                        <option value="">11</option>
                        <option value="">12</option>
                        <option value="">13</option>
                        <option value="">14</option>
                        <option value="">15</option>
                        <option value="">16</option>
                        <option value="">17</option>
                        <option value="">18</option>
                        <option value="">19</option>
                        <option value="">20</option>
                        <option value="">21</option>
                        <option value="">22</option>
                        <option value="">23</option>
                        <option value="">24</option>
                        <option value="">25</option>
                        <option value="">26</option>
                        <option value="">27</option>
                        <option value="">28</option>
                        <option value="">29</option>
                        <option value="">30</option>
                        <option value="">31</option>
                    </select> 日
                    <select class="xxlx startH flnone w45">
                        <option value=""></option>

                    </select> 时
                    <select class="xxlx startMM flnone w45">
                        <option value="">00</option>
                        <option value="">01</option>
                        <option value="">02</option>
                        <option value="">03</option>
                        <option value="">04</option>
                        <option value="">05</option>
                        <option value="">06</option>
                        <option value="">07</option>
                        <option value="">08</option>
                        <option value="">09</option>
                        <option value="">10</option>
                        <option value="">11</option>
                        <option value="">12</option>
                        <option value="">13</option>
                        <option value="">14</option>
                        <option value="">15</option>
                        <option value="">16</option>
                        <option value="">17</option>
                        <option value="">18</option>
                        <option value="">19</option>
                        <option value="">20</option>
                        <option value="">21</option>
                        <option value="">22</option>
                        <option value="">23</option>
                        <option value="">24</option>
                        <option value="">25</option>
                        <option value="">26</option>
                        <option value="">27</option>
                        <option value="">28</option>
                        <option value="">29</option>
                        <option value="">30</option>
                        <option value="">31</option>
                        <option value="">32</option>
                        <option value="">33</option>
                        <option value="">34</option>
                        <option value="">35</option>
                        <option value="">36</option>
                        <option value="">37</option>
                        <option value="">38</option>
                        <option value="">39</option>
                        <option value="">40</option>
                        <option value="">41</option>
                        <option value="">42</option>
                        <option value="">43</option>
                        <option value="">44</option>
                        <option value="">45</option>
                        <option value="">46</option>
                        <option value="">47</option>
                        <option value="">48</option>
                        <option value="">49</option>
                        <option value="">50</option>
                        <option value="">51</option>
                        <option value="">52</option>
                        <option value="">53</option>
                        <option value="">54</option>
                        <option value="">55</option>
                        <option value="">56</option>
                        <option value="">57</option>
                        <option value="">58</option>
                        <option value="">59</option>

                    </select> 分

                </p>
                <p class="hk_top">
                    结束时间:
                    <select class="xxlx endY flnone w60">
                        <option value=""></option>
                    </select> 年
                    <select class="xxlx endM flnone w45">
                        <option value=""></option>
                        <option value=""></option>

                    </select> 月
                    <select class="xxlx endD flnone w45">
                        <option value="">1</option>
                        <option value="">2</option>
                        <option value="">3</option>
                        <option value="">4</option>
                        <option value="">5</option>
                        <option value="">6</option>
                        <option value="">7</option>
                        <option value="">8</option>
                        <option value="">9</option>
                        <option value="">10</option>
                        <option value="">11</option>
                        <option value="">12</option>
                        <option value="">13</option>
                        <option value="">14</option>
                        <option value="">15</option>
                        <option value="">16</option>
                        <option value="">17</option>
                        <option value="">18</option>
                        <option value="">19</option>
                        <option value="">20</option>
                        <option value="">21</option>
                        <option value="">22</option>
                        <option value="">23</option>
                        <option value="">24</option>
                        <option value="">25</option>
                        <option value="">26</option>
                        <option value="">27</option>
                        <option value="">28</option>
                        <option value="">29</option>
                        <option value="">30</option>
                        <option value="">31</option>
                    </select> 日
                    <select class="xxlx endH flnone w45">
                        <option value=""></option>
                    </select> 时
                    <select class="xxlx endMM flnone w45">
                        <option value="">00</option>
                        <option value="">01</option>
                        <option value="">02</option>
                        <option value="">03</option>
                        <option value="">04</option>
                        <option value="">05</option>
                        <option value="">06</option>
                        <option value="">07</option>
                        <option value="">08</option>
                        <option value="">09</option>
                        <option value="">10</option>
                        <option value="">11</option>
                        <option value="">12</option>
                        <option value="">13</option>
                        <option value="">14</option>
                        <option value="">15</option>
                        <option value="">16</option>
                        <option value="">17</option>
                        <option value="">18</option>
                        <option value="">19</option>
                        <option value="">20</option>
                        <option value="">21</option>
                        <option value="">22</option>
                        <option value="">23</option>
                        <option value="">24</option>
                        <option value="">25</option>
                        <option value="">26</option>
                        <option value="">27</option>
                        <option value="">28</option>
                        <option value="">29</option>
                        <option value="">30</option>
                        <option value="">31</option>
                        <option value="">32</option>
                        <option value="">33</option>
                        <option value="">34</option>
                        <option value="">35</option>
                        <option value="">36</option>
                        <option value="">37</option>
                        <option value="">38</option>
                        <option value="">39</option>
                        <option value="">40</option>
                        <option value="">41</option>
                        <option value="">42</option>
                        <option value="">43</option>
                        <option value="">44</option>
                        <option value="">45</option>
                        <option value="">46</option>
                        <option value="">47</option>
                        <option value="">48</option>
                        <option value="">49</option>
                        <option value="">50</option>
                        <option value="">51</option>
                        <option value="">52</option>
                        <option value="">53</option>
                        <option value="">54</option>
                        <option value="">55</option>
                        <option value="">56</option>
                        <option value="">57</option>
                        <option value="">58</option>
                        <option value="">59</option>

                    </select> 分
                </p>
                <d0iv class="space5"></d0iv>
               <!-- <p>

                </p>-->
                <!--如果这块要换成预约的 用下边的结构-->
                <p>
               <input class="gjztxt flnone" type="text"/>
                </p>
                <div class="space10"></div>
                <p></p>
                <!--同埋换成input-->
                <!--<p>-->
                <!-- <input class="gjztxt flnone" type="text"/>-->
                <!--</p>-->
            </div>
            <div class="qsan"><a href="javascript:void(0)" class="btna thqs thqs2">确定</a></div>
        </div>
    </div>

同上 遍历obj的值 来定义当前的后台数据在页面的定位的更多相关文章

  1. select2 取值 遍历 设置默认值

    select2 取值 遍历 设置默认值 本章内容主要介绍Select2 的初始化,获取选中值,设置默认值,三个方法.Select2 美化了单选框,复选框和下拉框,特别是下拉框多选的问题.但同时,Sel ...

  2. Android(java)学习笔记105:Map集合的遍历之键值对对象找键和值

    package cn.itcast_01; import java.util.HashMap; import java.util.Map; import java.util.Set; /* * Map ...

  3. JAVA之旅(三)——数组,堆栈内存结构,静态初始化,遍历,最值,选择/冒泡排序,二维数组,面向对象思想

    JAVA之旅(三)--数组,堆栈内存结构,静态初始化,遍历,最值,选择/冒泡排序,二维数组,面向对象思想 我们继续JAVA之旅 一.数组 1.概念 数组就是同一种类型数据的集合,就是一个容器 数组的好 ...

  4. 通过遍历JSON键值对获取包含某字符串的键的值_电脑计算机编程入门教程自学

    首发于:Aardio通过遍历JSON键值对获取包含某字符串的键的值_电脑计算机编程入门教程自学 http://jianma123.com/viewthread.aardio?threadid=429 ...

  5. Android(java)学习笔记44:Map集合的遍历之键值对对象找键和值

    1. Map集合的遍历之 键值对对象找 键和值: package cn.itcast_01; import java.util.HashMap; import java.util.Map; impor ...

  6. Map接口中的常用方法和Map集合遍历键找值方式

    Map接口中定义了很多方法,常用的如下: public V put(K key,V value) 将指定的值与此映射中的指定键相关联(可选操作) V remove(Object key); 如果此映射 ...

  7. 页面通过Jquery取值然后传值到后台显示underfined是怎么回事?

    页面通过Jquery取值然后传值到后台显示underfined是怎么回事? 一般情况下第一个如果用jQuery取值的,末尾要用val(),如果用$符号取值的,末尾要加上val. eg: busines ...

  8. 页面传递的都是string ; 每个标签要有name的原因是为了取值 因为传递给后台是键值对的形式

    页面传递的都是string ; 每个标签要有name的原因是为了取值  因为传递给后台是键值对的形式

  9. SNF快速开发平台MVC-EasyUI3.9之-WebApi和MVC-controller层接收的json字符串的取值方法和调用后台服务方法

    最近项目组很多人问我,从前台页面传到后台controller控制层或者WebApi 时如何取值和运算操作. 今天就都大家一个在框架内一个取值技巧 前台JS调用代码: 1.下面是选中一行数据后右键点击时 ...

随机推荐

  1. python走起之第十七话

    选择器 #id 概述 根据给定的ID匹配一个元素. 使用任何的元字符(如 !"#$%&'()*+,./:;<=>?@[\]^`{|}~)作为名称的文本部分, 它必须被两个 ...

  2. 自动生成.py文件头部的C语言小程序

    每次都 vi xxx.py 然后再打 #!/usr/bin/env python 等等的程序头信息感觉有点麻烦,于是便想着写一个小程序自动生成这些头信息了,顺便在 ~/.bashrc 里写入 alia ...

  3. springmvc接收JSON类型的数据

    1.在使用AJAX传递JSON数据的时候要将contentType的类型设置为"application/json",否则的话会提示415错误 2.传递的data需要时JSON类型的 ...

  4. js平滑滚动到顶部,底部,指定地方

    [原文链接] 采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上. [示例演示 ...

  5. SPSS数据分析—二分类Logistic回归模型

    对于分类变量,我们知道通常使用卡方检验,但卡方检验仅能分析因素的作用,无法继续分析其作用大小和方向,并且当因素水平过多时,单元格被划分的越来越细,频数有可能为0,导致结果不准确,最重要的是卡方检验不能 ...

  6. java-方法练习

    一.定义方法的最主要的两个步骤: 1.先明确结果(即返回值类型要先明确) 2. 在实现功能时是否有未知内容参与运算,即明确函数的参数列表(参数类型,参数个数) 例如:定义一个九九乘法表的功能.  思路 ...

  7. 《精通C#》第十二章 Linq

    Linq是在.Net3.5之后首次引入的,这种查询语言简单易学,可用范围非常广泛在学着之前,一直用在数据库操作之上,但是在学习这节课之后才发现,凡是实现泛型的接口类型都可以使用linq,简单来说就是实 ...

  8. 开发一个简单的python计算器

    要求: 实现加减乘除及拓号优先级解析 用户输入 1 - 2 * ( (60-30 +(-40/5) * (9-2*5/3 + 7 /3*99/4*2998 +10 * 568/14 )) - (-4* ...

  9. 关于正则表达式中参数/g /m的详细分析和例子详解

    总结1:参数/g的用法 表达式加上参数g之后,表明可以进行全局匹配,注意这里"可以"的含义.我们详细叙述: 1)对于表达式对象的exec方法,不加入g,则只返回第一个匹配,无论执行 ...

  10. C++ 标准库string字符串的截取

    标准库的string有一个substr函数用来截取子字符串.一般使用时传入两个参数,第一个是开始的坐标(第一个字符是0),第二个是截取的长度. #include <iostream> #i ...