同上 遍历obj的值 来定义当前的后台数据在页面的定位
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的值 来定义当前的后台数据在页面的定位的更多相关文章
- select2 取值 遍历 设置默认值
select2 取值 遍历 设置默认值 本章内容主要介绍Select2 的初始化,获取选中值,设置默认值,三个方法.Select2 美化了单选框,复选框和下拉框,特别是下拉框多选的问题.但同时,Sel ...
- Android（java）学习笔记105：Map集合的遍历之键值对对象找键和值
package cn.itcast_01; import java.util.HashMap; import java.util.Map; import java.util.Set; /* * Map ...
- JAVA之旅（三）——数组，堆栈内存结构，静态初始化，遍历，最值，选择/冒泡排序，二维数组，面向对象思想
JAVA之旅(三)--数组,堆栈内存结构,静态初始化,遍历,最值,选择/冒泡排序,二维数组,面向对象思想 我们继续JAVA之旅 一.数组 1.概念 数组就是同一种类型数据的集合,就是一个容器 数组的好 ...
- 通过遍历JSON键值对获取包含某字符串的键的值_电脑计算机编程入门教程自学
首发于:Aardio通过遍历JSON键值对获取包含某字符串的键的值_电脑计算机编程入门教程自学 http://jianma123.com/viewthread.aardio?threadid=429 ...
- Android（java）学习笔记44：Map集合的遍历之键值对对象找键和值
1. Map集合的遍历之 键值对对象找 键和值: package cn.itcast_01; import java.util.HashMap; import java.util.Map; impor ...
- Map接口中的常用方法和Map集合遍历键找值方式
Map接口中定义了很多方法,常用的如下: public V put(K key,V value) 将指定的值与此映射中的指定键相关联(可选操作) V remove(Object key); 如果此映射 ...
- 页面通过Jquery取值然后传值到后台显示underfined是怎么回事？
页面通过Jquery取值然后传值到后台显示underfined是怎么回事? 一般情况下第一个如果用jQuery取值的,末尾要用val(),如果用$符号取值的,末尾要加上val. eg: busines ...
- 页面传递的都是string ; 每个标签要有name的原因是为了取值 因为传递给后台是键值对的形式
页面传递的都是string ; 每个标签要有name的原因是为了取值 因为传递给后台是键值对的形式
- SNF快速开发平台MVC-EasyUI3.9之-WebApi和MVC-controller层接收的json字符串的取值方法和调用后台服务方法
最近项目组很多人问我,从前台页面传到后台controller控制层或者WebApi 时如何取值和运算操作. 今天就都大家一个在框架内一个取值技巧 前台JS调用代码: 1.下面是选中一行数据后右键点击时 ...
随机推荐
- overflow:hidden 影响布局的问题
a 与 b 都是 inline-block且高与父元素 c 相同均为 30px,而在a加上 overflow:hidden; 会使 a 的底线与整个父元素 c 的 text baseline 对齐,相 ...
- react1
1.方法用() 里面的每个参数之间用,分隔2.对象(函数.数组)用{} 3.{/*注释...*/} 4 组件的生命周期可分成三个状态:Mounting:已插入真实 DOMUpdating:正在被重新 ...
- Linux SHELL,环境变量
SHELL: 在计算机科学中,Shell俗称壳(用来区别于核),是指"提供使用者使用界面"的软件(命令解析器).它类似于DOS下的command和后来的cmd.exe.它接收用户命 ...
- 【java基础】面向对象的三大特征---多态
java的引用变量有两种类型,编译时类型和运行时类型,如果编译时类型和运行时类型不一致,就会出现多态. 多态分为: 运行时多态 java运行时系统根据调用该方法的实例的类型来决定选择调用哪个方法则被称 ...
- maven 使用
1. download maven from http://maven.apache.org/ 2. unzip, setup MAVEN_HOME 3. change the configurati ...
- Ridit分析
对于有序分类资料,由于指标存在等级顺序,因此不能使用卡方检验,除了使用秩和检验之外,ridit检验也是分析有序分类资料的常用方法,属于非参数检验. ridit检验的基本做法是将一组有序分组资料转换成一 ...
- Leetcode--Swap Nodes in Pairs
最傻的方法: ListNode *swapPairs(ListNode *head) { if (head == NULL) return NULL; ListNode *temp = ); List ...
- visual studio 工具的使用
1,快捷键 a, ctrl+e ,ctrl+c 快速注释 ctrl+e ,ctrl+u 取消注释 b,ctrl+k,ctrl+d 快速格式化. 2,开发相关 a,在Microsoft Visual ...
- oracle 中数据库完全导入导出：cmd命令行模式(转载)
http://www.3lian.com/edu/2012/12-01/47252.html Oracle数据导入导出imp/exp就相当于oracle数据还原与备份.exp命令可以把数据从远程数据库 ...
- Android开发环境搭建（jdk+eclip+android sdk）
在开启Android 开发之旅之前,首先要把准备工作做好---搭建开发环境 一.环境搭建: 1.Java JDK 安装 2.Eclipse 安装 3.Android SDK 安装 4.ADT安装 5. ...