jquery实现前台倒计时。应用下单24小时后自动取消该订单

Posted 小祥工作室

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery实现前台倒计时。应用下单24小时后自动取消该订单相关的知识,希望对你有一定的参考价值。

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
		<title>testc</title>
		<script>
			jQuery(document).ready(function(){
				//显示时间,以后应用于自动定时器做某一件事
				jQuery("div[id^=auto_order_cancel]").each(function(index, element) {
					var val=jQuery(this).attr("mark");
					var status=jQuery(this).attr("status");
					timeCount(val,status,"1");  
			    });
				
				
			});
			function timeCount(remain_id,status){
				function _fresh(){
					var nowDate = new Date();//当前时间
					var id=jQuery(\'#\'+remain_id).attr("order_id");   //当前订单的id
					
					var addTime=new Date(jQuery(\'#\'+remain_id).attr(\'addTime\'));//下单开始时间
				    var auto_order_cancel=jQuery(\'#\'+remain_id).attr(\'auto_order_cancel\');//订单支付有效时长
				    var auto_totalS=parseInt(auto_order_cancel*60*60);
				    var ad_totalS  = parseInt((addTime.getTime()/1000)+auto_totalS);  ///下单总秒数
				    var totalS   = parseInt(ad_totalS-(nowDate.getTime()/ 1000));///支付时长
					
					if(status == 10){
						if(totalS>0){
							var _hour   = parseInt((totalS / 3600) % 24);
							var _minute = parseInt((totalS / 60) % 60);
							var _second = parseInt(totalS % 60);
							
							jQuery(\'#status_\'+remain_id).html(\'剩余\'+_hour+\'时\'+_minute+\'分\'+_second+\'秒\');
							jQuery(\'#ico_\'+remain_id).show();
							
						}else{//支付超时
							jQuery(\'#status_\'+remain_id).html(\'\');
							jQuery(\'#ico_\'+remain_id).hide();
							clearInterval(sh);
							jQuery.ajax({
								type:\'POST\',
								url:"http://取消订单的路径",
								data:{"id":id},
								success:function(data){
									window.location.href="http://localhost:8080/buyer/order.htm";
								}
							 });
						 }
					}
					
				}
				_fresh();
				var sh = setInterval(_fresh,1000);
			}
		</script>
		<style>
			.time_icon{
				display: inline-block;
				width: 15px;
				height: 15px;
				text-align: center;
				margin-bottom: 5px;
				margin: 0px 3px 0px 0px;
				vertical-align: middle;
				overflow: hidden;
				background: url(./img/cont_time.png) no-repeat;
			}
		</style>
	</head>
	<body>
		<!-- status=10 为订单为已下单未支付  addtime:下单时间  auto_order_cancel=24 自动取消时间  -->
		<div class="count_time" _val="85542" 
			id="auto_order_cancel" mark="auto_order_cancel"
		    order_id="420" status="10" addtime="06/22/2016 08:34:49"
		    auto_order_cancel="24">
			<span class="time_icon" id="ico_auto_order_cancel"></span><i id="status_auto_order_cancel" style="font-style: normal;"></i>
		</div>
	</body>
</html>

  

 

看一下效果图吧

 

 

这个时间会自己倒计时嘿嘿,希望帮到你

以上是关于jquery实现前台倒计时。应用下单24小时后自动取消该订单的主要内容,如果未能解决你的问题,请参考以下文章

用js或jquery怎么实现一个数字随时间随机增加?

微信内嵌H5网页 解决js倒计时失效

启动 24 小时计时器,当 24 小时结束时通知用户

如何使用 jQuery mobile 进行倒计时?

按下按钮后如何显示 24 小时计数器

vue-实现倒计时功能