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. 3D VR卡镜的使用方法
			
    先把它展开 然后把它卡在手机中间 介绍一个VR游戏资源 Chair In a Room,这是一个立体沉浸式的3D游戏,原理是陀螺仪传感器随着手机转动可以观察整个三维房间 如图所示,点击进入,将两眼放到 ...
    
			
    2. 
						
  2. 单应性(homography)变换的推导
			
    矩阵的一个重要作用是将空间中的点变换到另一个空间中.这个作用在国内的<线性代数>教学中基本没有介绍.要能形像地理解这一作用,比较直观的方法就是图像变换,图像变换的方法很多,单应性变换是其中 ...
    
			
    3. 
						
  3. springmvc的jdbcTemplate 插入 返回主键
			
    public int insertCustomer(final Customer customer) {        //TODO.        final String sql = " ...
    
			
    4. 
						
  4. 【转】HTTP响应报文与工作原理详解
			
    超文本传输协议(Hypertext Transfer Protocol,简称HTTP)是应用层协议.HTTP 是一种请求/响应式的协议,即一个客户端与服务器建立连接后,向服务器发送一个请求;服务器接到 ...
    
			
    5. 
						
  5. IOS开发中AVFoundation中AVAudioPlayer的使用
			
    IOS开发中如何调用音频播放组件 1.与音频相关的头文件等都在AVFoundation.h中,所以第一步是添加音频库文件: #import <AVFoundation/AVFoundation. ...
    
			
    6. 
						
  6. IOS开发－OC学习－Info.plist文件解析
			
    Info.plist文件是新建ios项目完成后自动生成的一个配置文件,在Xcode中如下图: 通过解析可以获得配置的具体细节,解析过程如下: // 定义一个nsstring用来获取Info.plist ...
    
			
    7. 
						
  7. thinkPHP的学习
			
    1.版本,以3.1为主,因为手册是基于这个的,最新的版本,还没有对应的手册 2.发现一个问题,echo 中文时,出现乱码,而调用模版则正常. 3.写url的注意大小写.index和Index是不同的  ...
    
			
    8. 
						
  8. spring mvc自定义注解--登录时密码加密注解
			
    1,定义注解名称接口 /** * 使用该注解不用再MD5转换了 * * @author adonis * */ @Target(ElementType.PARAMETER) @Retention(Re ...
    
			
    9. 
						
  9. UVa 10700 - Camel trading
			
    题目大意:给一个不含括号.只有+和*运算的表达式,数字的范围在1到20之间,算出计算结果的可能最大值和最小值. 贪心,如果加法优先级比乘法高,那么得出的结果为最大值.(a+b)*c = a*c + b ...
    
			
    10. 
						
  10. cpsr当前程序状态寄存器
			
    详解CPSR寄存器(ls_core) (2012-10-11 17:29:47) 转载▼ 标签: arm920t寄存器 cpsr cpu工作原理 分类: 第四章-踏入嵌入式领域之ARM 在介绍CPSR ...
    
			
    11.