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. AWK----awk与shell交互
			
    1互相调用命令  ls | awk '{if(system("ls " $0)==0) print "file "$0" exsits"}' ...
    
			
    2. 
						
  2. libtask channel机理及调度理解
			
    学习golang的时候libtask库的代码是一定要看的,需要深入理解chan和携程的运行机制,下面就结合libtask的源码说明下运行原理,如果理解的有偏差欢迎指正 下面是libtask中Chann ...
    
			
    3. 
						
  3. 开源免费的C/C++网络库(c/c++ sockets library)补充
			
    (1)ACE 庞大.复杂,适合大型项目.开源.免费,不依赖第三方库,支持跨平台. http://www.cs.wustl.edu/~schmidt/ACE.html (2)Asio Asio基于Boo ...
    
			
    4. 
						
  4. Centos 修改时间地区及NTP同步北京时间
			
    在我们使用CentOS系统的时候,也许时区经常会出现问题,有时候改完之后还是会出错,下面我们就来学习一种方法来改变这个状况.如果没有安装,而你使用的是 CentOS系统 那使用命令 yum insta ...
    
			
    5. 
						
  5. UVa 900 - Brick Wall Patterns
			
    题目大意:用1*2的砖头建n*2的墙,问有多少种不同的砖头排列方式?与斐波那契序列相似. #include <cstdio> #define MAXN 60 #define N 50 un ...
    
			
    6. 
						
  6. 微信小程序之----navigator页面跳转
			
    navigator navigator跳转页面样式分为两种一种是左上角带返回按钮跳转到新的页面,另一种不带即在本页跳转,通过控制redirect属性 .js <view> <navi ...
    
			
    7. 
						
  7. Maven的安装环境配置
			
    一.Maven的安装 二.Maven的配置 Settings.xml可以用来定义本地仓库.远程仓库.联网代理 Settings.xml文件可以存在两个地方: 1.多用户情况 conf目录下 2.单用户 ...
    
			
    8. 
						
  8. UVa 10667 - Largest Block
			
    题目大意:这个也是和UVa 836 - Largest Submatrix差不多,修改一下数据就可以套用代码的. #include <cstdio> #include <cstrin ...
    
			
    9. 
						
  9. 如何获取DOM中当前获取焦点的元素
			
    <script type="text/javascript"> function msg(e) // e = event { var target; //initial ...
    
			
    10. 
						
  10. cpsr当前程序状态寄存器
			
    详解CPSR寄存器(ls_core) (2012-10-11 17:29:47) 转载▼ 标签: arm920t寄存器 cpsr cpu工作原理 分类: 第四章-踏入嵌入式领域之ARM 在介绍CPSR ...
    
			
    11.