您的位置：首页 > Web前端 > JQuery

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

2016-06-22 14:41 579 查看

<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>

　　

看一下效果图吧

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航