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. windows server 2012 AD 活动目录部署系列（五）备份和还原域控制器
			
    在前篇博文中,我们介绍了用户资源的权限分配,用户只要在登录时输入一次口令,就能访问基于该域所分配给他的所有资源. 但是我们需要考虑一个问题:万一域控制器坏了怎么办?!如果这个域控制器损坏了,那用户登录 ...
    
			
    2. 
						
  2. WPF 制作电子相册浏览器
			
    周末的时候,闲着无聊,做了一个电子相册浏览器.比较简单.界面如下: 主要部分代码如下: MainWindow.xaml <local:HeaderedWindow x:Class="P ...
    
			
    3. 
						
  3. tp框架实现验证码验证
			
    //实现验证页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
    
			
    4. 
						
  4. 【转】程序员必须知道的几个Git代码托管平台
			
     一.VS2013中克隆远程Git仓库和SSH的配置 1.VS2013中克隆远程项目  首先感谢园友的评论和补充,今日又仔细看了一下,VS2013中是可以克隆项目的,只是我一直用的GitHub来克隆的 ...
    
			
    5. 
						
  5. sqlserver 脚本方式导出数据到excel
			
    use EntDataCenter go SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO -- =========================== ...
    
			
    6. 
						
  6. Vector类
			
    /* * Vector的特有功能 * * Vector出现较早,比集合更早出现 * * 1:添加功能 * public void addElement(Object obj);//用add()替代 * ...
    
			
    7. 
						
  7. Tessnet2图片识别（2）
			
    1. 引用 tessnet2.dll (只有NET2.0版本) 2. 视图页 <%@ Page Language="C#" MasterPageFile="~/Vi ...
    
			
    8. 
						
  8. 自己实现一个IOC（控制翻转，DI依赖注入）容器
			
    1.新建一个控制台应用程序 TestIOC 2.新增一个 IocFactory类 using System; using System.Collections.Generic; using Syste ...
    
			
    9. 
						
  9. 二级横向菜单实现——ListView
			
    实现类似于大众点评客户端的横向listview二级列表 这种横向的listview二级列表在手机软件上还不太常见,但是使用过平板的都应该知道,在平板上市比较常见的.可能是因为平板屏幕比较大,而且也能展 ...
    
			
    10. 
						
  10. Linux安装Tomcat外部不能访问
			
    Linux安装Tomcat后本地可以正常访问,可是这时Tomcat还不能被外界访问需要在Linux默认防护墙上打开8080端口 打开 /etc/sysconfig/iptables [root@loc ...
    
			
    11.