1.我用的是bootstrap网格布局，首先要引入bootstrap类。

（1）<script src="jquery-1.11.2.min.js"></script>

（2）<script src="bootstrap.min.js"></script>

（3）<link href="bootstrap.min.css" rel="stylesheet" type="text/css"/>

2.制作表格

3.网格布局.我用col-xs是最小可以在手机大小实现不乱

<!doctype html>

<html lang="en">

<head>

	<meta charset="UTF-8" />

	<title>退房提醒</title>

	<script src="jquery-1.11.2.min.js"></script>

	<script src="bootstrap.min.js"></script>

	<link href="bootstrap.min.css" rel="stylesheet" type="text/css"/>

</head>

<body>

	<div class="container">

		<br />

		<div class="row">

    		<div class="col-xs-12">退房提醒</div>

    		<div class="col-xs-0"></div>

    	</div>

    	<div class="row">

            <div class="col-xs-12">

                <table class="table" border="1" cellpadding="1" cellspacing="2">

                    <thead>

                        <tr class="success">

                            <th>序号</th>

                            <th>房间号</th>

                            <th>客户姓名</th>

                            <th>预计退房时间</th>

                            <th>操作</th>

                        </tr>

                    </thead>

                    <tbody id="neirong">

                    </tbody>

                </table>

            </div>

    	</div>

	</div>

    </body>

运行结果：

4.用ajas实现功能：

<script type="text/x-javascript">

	$.ajax({

		url:"tixingchuli.php",

		dataType:"TEXT",

		type:"POST",

		success: function(bb){

			}

	});

</script>

</html>

5.做处理页面

tixingchuli.php

<?php

include("DBDA.class.php");//引入类

$db = new DBDA();

$sql = "select * from ruzhu";//访问数据库ruzhu表里所有

$ab = $db->StrQuery($sql);

echo $ab;

?>





6.回到主页面给取到的字符串拆分




$.ajax({

		url:"tixingchuli.php",

		dataType:"TEXT",

		type:"POST",

		success: function(bb){

			//alert(bb);

			var hang=bb.split("|");

			var str="";

			var da=new Date();

			for(var i=0;i<hang.length;i++)

			{

				var lie=hang[i].split("^");

				var aa=Date.parse(new Date(lie[10]));//取回来的数据转换为时间戳

				var cha=da.getTime()-aa;//求当前时间与预留时间的差。用当前时间减去预计时间就求出他们的差

				var cha1=Math.ceil(cha/3600000);//用Math.ceil();方法向上取整。再除以24就取的天

				str=str+"<tr><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td>"+lie[3]+"</td><td>"+lie[10]+"</td><td>还剩"+cha1+"小时</td></tr>";

			}

			$("#neirong").html(str);

		}

	});
</script>
</html>





												


											
用JS计算预计时间与现在时间的差的更多相关文章
	

    
								
  1. js 计算当年还剩多少时间的倒数计时 javascript 原理解析【复制到编辑器查看推荐】
		
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
		
    2. 
						
  2. js 计算过去和未来的时间距离现在多少天？
		
    计算传入的任意一时间.计算出这个时间距离现在还有多少天!或者计算过去的时间距离现在已经过去了多少天! 返回值有两种! 1.负值 代表过去了多少天 2.正值 代表距离设定的时间还有多少天 说明:距离设定 ...
    
		
    3. 
						
  3. JS如何设置计算几天前的时间？
		
    计算多少天前的具体时间.比如今天是9月5日,那7天前正常就是8月29了. 之前曾经直接用时间进行加减,吃了大亏,后来脑残到直接写了一个很复杂的计算闰年,闰月,30.31.28的月份 现在分享一下. f ...
    
		
    4. 
						
  4. js计算两个时间之间的间隔
		
    计算时间间隔的方法有很多,这里只是一种方式,可以方法里直接传入两个时间,也可以传入两个字符串格式的时间,在方法里解析一下就ok,这个例子里不传入参数,直接在方法里随便写一个时间来演示一下 fun()  ...
    
		
    5. 
						
  5. js使用my97插件显示当前时间，且select控制计算时间差
		
    做页面需要两个时间输入框一个显示当前时间,一个显示之前的时间,并且需要一个select下拉框控制两个时间输入框之间的差,效果如下图: 这里使用的是My97DatePicer,简单方便,引入my97插件 ...
    
		
    6. 
						
  6. js倒计时-倒计输入的时间
		
    计算指定时间到指定时间之间相差多少天.时.分.秒. 节日.活动.商城常用. 原理: 主要使用到时间戳,也就是从1970 年 1 月 1 日 到指定时间的毫秒数. 1. 求出毫秒差 :当两个时间直接进行 ...
    
		
    7. 
						
  7. js setInterval每隔一段时间执行一次
		
    js setInterval每隔一段时间执行一次setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式.setInterval() 方法会不停地调用函数,直到 clearI ...
    
		
    8. 
						
  8. 生成二维码  加密解密类  TABLE转换成实体、TABLE转换成实体集合(可转换成对象和值类型)  COOKIE帮助类  数据类型转换  截取字符串  根据IP获取地点  生成随机字符  UNIX时间转换为DATETIME\DATETIME转换为UNIXTIME  是否包含中文    生成秘钥方式之一  计算某一年 某一周 的起始时间和结束时间
		
    生成二维码 /// <summary>/// 生成二维码/// </summary>public static class QRcodeUtils{private static ...
    
		
    9. 
						
  9. js动态生成input指定My97DatePicker时间问题
		
    js生成的input指定onclick时间: 以下1.2为错误: onclick="WdatePicker()"; onclick=WdatePicker(); 若指定到windo ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. jpg转bmp（使用libjpeg）
			
    源: jpg转bmp(使用libjpeg) [转]JPEG压缩原理 bmp转jpg(使用libjpeg)
    
			
    2. 
						
  2. STM32启动模式及API（转）
			
    源:STM32启动模式及API 我们玩ARM9,一般都是在内存里调试程序,速度飞快.STM32下也可以这样,虽说现在的flash寿命已经很长了,但flash中调试烧录程序还是一个很慢的过程,有时候程序 ...
    
			
    3. 
						
  3. ZOJ 2059 The Twin Towers
			
    双塔DP. dp[i][j]表示前i个物品,分成两堆(可以不全用),价值之差为j的时候,较小一堆的价值为dp[i][j]. #include<cstdio> #include<cst ...
    
			
    4. 
						
  4. Java ThreadFactory接口用法
			
    根据需要创建新线程的对象.使用线程工厂就无需再手工编写对 new Thread 的调用了,从而允许应用程序使用特殊的线程子类.属性等等.   JDK中的介绍: An object that creat ...
    
			
    5. 
						
  5. JAVA判断32位还是64位，调用不同的DLL（转）
			
    源:JAVA判断32位还是64位,调用不同的DLL 通过获取sun.arch.data.model可判断是32还是64的JAVA 将32或者64位的DLL放不同的目录,实现自适应调用DLL Prope ...
    
			
    6. 
						
  6. NSCalendar  日历类
			
    NSCalendar 日历类 Cocoa中对日期和时间的处理 NSCalendar (一) (2008-11-12 21:54:10) NSCalendar用于处理时间相关问题.比如比较时间前后.计算 ...
    
			
    7. 
						
  7. The Elements of Statistical Learning第3章导读
			
    1. 公式(3.4)的推导. 可以直接对公式(3.3)中的$\beta_0$求导就得到$\hat{\beta}_0=\bar{y}-\beta_1\bar{x}$. 对公式(3.3)中的$\beta_ ...
    
			
    8. 
						
  8. easyui 异步json tree跨域访问问题解决
			
    最近在用easyui中的异步tree时发现了跨域访问问题,我们都知道jquery ajax提供get请求的跨域访问.所以解决easyui tree跨域访问的问题便是将数据通过jquery ajax将数 ...
    
			
    9. 
						
  9. java实现——006重建二叉树
			
    public class T006 { public static void main(String[] args){ int pre[] = {1,2,4,7,3,5,6,8}; int in[]  ...
    
			
    10. 
						
  10. python pandas dataframe to_sql方法error及其解决
			
    今天遇到了一个问题,很是奇怪,自己也想了一个另类的方法将其解决了,现在将详细过程经过记录如下: 我在处理完一个dataframe之后,需要将其写回到数据库.这个dataframe比较大,共有53列,7 ...
    
			
    11.