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. STM32驱动AT24CXX系列芯片
			
    AT24Cxx系列EEPROM是由美国Mcrochip公司出品,1-512K位的支持I2C总线数据传送协议的串行CMOS E2PROM,可用电擦除,可编程自定时写周期(包括自动擦除时间不超过10ms, ...
    
			
    2. 
						
  2. Memcached源码分析之线程模型
			
    作者:Calix 一)模型分析 memcached到底是如何处理我们的网络连接的? memcached通过epoll(使用libevent,下面具体再讲)实现异步的服务器,但仍然使用多线程,主要有两种 ...
    
			
    3. 
						
  3. 使用ExecutorCompletionService 管理线程池处理任务的返回结果
			
    在我们日常使用线程池的时候,经常会有需要获得线程处理结果的时候.此时我们通常有两种做法. 1. 使用并发容器将callable.call() 的返回Future存储起来.然后使用一个消费者线程去遍历这 ...
    
			
    4. 
						
  4. DDD之:Repository仓储模式
			
    在DDD设计中大家都会使用Repository pattern来获取domain model所需要的数据. 1.什么事Repository? "A Repository mediates b ...
    
			
    5. 
						
  5. Mybatis oracle多表联合查询分页数据重复的问题
			
    Mybatis oracle多表联合查询分页数据重复的问题 多表联合查询分页获取数据时出现一个诡异的现象:数据总条数正确,但有些记录多了,有些记录却又少了甚至没了.针对这个问题找了好久,最后发现是由于 ...
    
			
    6. 
						
  6. wordpress数据表结构
			
    Table: wp_commentmeta Field Type Null Key Default Extra meta_id bigint(20) unsigned PRI NULL auto_in ...
    
			
    7. 
						
  7. Python3基础 set() 集合 创建集合与特点：自动将重复合并掉 不支持索引
			
    镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...
    
			
    8. 
						
  8. ZOJ 1011 - NTA
			
    题目大意:有一颗完全二叉树,给节点一个信号会从一个表中选择一对信号分别传递给两个子节点.最后判断所有叶子节点是否满足给定的规则.题目有点长,具体可参见原题. 首先是表格中数据的存储,由于会有多个元素, ...
    
			
    9. 
						
  9. 大数据全栈式开发语言 – Python
			
    前段时间,ThoughtWorks在深圳举办一次社区活动上,有一个演讲主题叫做“Fullstack JavaScript”,是关于用JavaScript进行前端.服务器端,甚至数据库(MongoDB) ...
    
			
    10. 
						
  10. Vue 响应式总结
			
    有些时候,不得不想添加.修改数组和对象的值,但是直接添加.修改后getter.setter又失去了. 由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项 ...
    
			
    11.