AngularJS 支付倒計(jì)時(shí)功能實(shí)現(xiàn)思路
說(shuō)明:
1、前端只負(fù)責(zé)展示倒計(jì)時(shí),不具備實(shí)際功能;
2、實(shí)際實(shí)現(xiàn)方式:數(shù)據(jù)庫(kù)中設(shè)置一個(gè)每分鐘執(zhí)行一次的定時(shí)任務(wù)(故與實(shí)際情況會(huì)有一分鐘以內(nèi)的誤差),只要訂單創(chuàng)建時(shí)間超過(guò)15分鐘會(huì)自動(dòng)將訂單狀態(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 對(duì)JavaScript自帶的 定時(shí)任務(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為后臺(tái)傳來(lái)的訂單信息,里面包含訂單創(chuàng)建時(shí)間 var createTime;//訂單創(chuàng)建時(shí)間 var curTime;//當(dāng)前時(shí)間 var totalSecond;//設(shè)置計(jì)時(shí)總時(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; } /** * 支付倒計(jì)時(shí) */ 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="支付剩余時(shí)間:"+m+"分鐘"+s+"秒" } else { $scope.confirmPay=true; $scope.payClass=true;//添加class $scope.payCountDown= "支付超時(shí),請(qǐng)重新下單!"; $interval.cancel(timePromise);//終止倒計(jì)時(shí) } },1000)
css代碼:
.payCountDown{ color:#FFFFFF; background-color:red; text-align:center; padding:14px 0; opacity:0.8 }
運(yùn)行效果:
補(bǔ)充:
oracle定時(shí)任務(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 支付倒計(jì)時(shí)功能實(shí)現(xiàn)思路,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
angularjs定時(shí)任務(wù)的設(shè)置與清除示例
本篇文章主要介紹了angularjs定時(shí)任務(wù)的設(shè)置與清除示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06AngularJS入門(用ng-repeat指令實(shí)現(xiàn)循環(huán)輸出
這篇文章主要介紹了AngularJS入門(用ng-repeat指令實(shí)現(xiàn)循環(huán)輸出,需要的朋友可以參考下2016-05-05Angular4集成ng2-file-upload的上傳組件
本篇文章主要介紹了Angular4集成ng2-file-upload的上傳組件,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03全面解析Angular中$Apply()及$Digest()的區(qū)別
$apply()和$digest()在AngularJS中是兩個(gè)核心概念,但是有時(shí)候它們又讓人困惑。這篇文章主要介紹了Angular中$Apply()及$Digest()區(qū)別詳細(xì)說(shuō)明的相關(guān)資料,需要的朋友可以參考下2016-08-08AngularJS ng-controller 指令簡(jiǎn)單實(shí)例
本文主要介紹AngularJS ng-controller 指令,這里對(duì)ng-controller指令資料的整理,并附代碼示例和效果圖,有需要的朋友看下2016-08-08AngularJS通過(guò)ng-Img-Crop實(shí)現(xiàn)頭像截取的示例
本篇文章主要介紹了AngularJS通過(guò)ng-Img-Crop實(shí)現(xiàn)頭像截取的示例,具有一定的參考價(jià)值,有興趣的可以了解一下2017-08-08Angular4.0動(dòng)畫(huà)操作實(shí)例詳解
這篇文章主要介紹了Angular4.0動(dòng)畫(huà)操作,結(jié)合實(shí)例形式詳細(xì)分析了Angular4.0動(dòng)畫(huà)的原理、定義及使用等相關(guān)操作技巧,需要的朋友可以參考下2019-05-05