說明：
1、前端只負(fù)責(zé)展示倒計時，不具備實(shí)際功能；
2、實(shí)際實(shí)現(xiàn)方式：數(shù)據(jù)庫中設(shè)置一個每分鐘執(zhí)行一次的定時任務(wù)（故與實(shí)際情況會有一分鐘以內(nèi)的誤差），只要訂單創(chuàng)建時間超過15分鐘會自動將訂單狀態(tài)改為“取消”。
遇到難點(diǎn)：
1、字符串轉(zhuǎn)date中，蘋果satari瀏覽器不支持“yyyy-mm-dd hh:mi:ss”格式，須將字符串轉(zhuǎn)為“yyyy/mm/dd hh:mi:ss”
new Date($scope.order.createtime.replace(//-/g, "/"))
2、AngularJS 對JavaScript自帶的 定時任務(wù)window.setInterval 支持不完善，需使用其自有的方法 $interval
html相關(guān)代碼（使用ionic框架）：
<div ng-class="{true: 'payCountDown', false: ''}[payClass]" ng-bind="payCountDown"> </div> js相關(guān)代碼：
$scope.order = Storage.get("order");//order為后臺傳來的訂單信息，里面包含訂單創(chuàng)建時間 var createTime;//訂單創(chuàng)建時間 var curTime;//當(dāng)前時間 var totalSecond;//設(shè)置計時總時間（分鐘） if($scope.order.createtime !=null){ //為了支持safari瀏覽器 createTime=new Date($scope.order.createtime.replace(//-/g, "/")).getTime(); curTime=new Date().getTime(); totalSecond=Math.round((createTime+15*60*1000-curTime)/1000); }else{ totalSecond = 15 * 60; } /** * 支付倒計時 */ timePromise = $interval(function(){ if (totalSecond >= 0) { var t1 = Math.floor(totalSecond / 60); var m = t1 < 10 ? "0" + t1 : t1; var t2 = totalSecond - t1 * 60; var s = t2 < 10 ? "0" + t2 : t2; totalSecond = totalSecond - 1; $scope.payClass=true;//添加class $scope.payCountDown="支付剩余時間："+m+"分鐘"+s+"秒" } else { $scope.confirmPay=true; $scope.payClass=true;//添加class $scope.payCountDown= "支付超時，請重新下單！"; $interval.cancel(timePromise);//終止倒計時 } },1000) css代碼：
.payCountDown{ color:#FFFFFF; background-color:red; text-align:center; padding:14px 0; opacity:0.8 }運(yùn)行效果：
補(bǔ)充：
oracle定時任務(wù)代碼：
begin sys.dbms_job.submit(job => :job, what => 'UpdateOrderStatues;', next_date => to_date('05-06-2017 10:05:50', 'dd-mm-yyyy hh24:mi:ss'), interval => 'sysdate +1/1440'); commit; end; / 以上所述是小編給大家介紹的AngularJS 支付倒計時功能實(shí)現(xiàn)思路，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
