1,前端只负责展示倒计时,不具备实际功能,
2,实际实现方式:数据库中设置一个每分钟执行一次的定时任务(故与实际情况会有一分钟以内的误差),只要订单创建时间超过15分钟会自动将订单状态改为“取消”。
1,字符串转日期中,苹果satari浏览器不支持“yyyy-mm-dd hh: mi: ss”格式,须将字符串转为“yyyy/mm/dd hh: mi: ss”
新日期(scope.order.createtime美元。替换(/\/g,“/?)
2, AngularJS对JavaScript自带的定时任务窗口。setInterval支持不完善,需使用其自有的方法美元区间
html相关代码(使用离子框架):
& lt; div ng-class="{真的:“payCountDown”,错误的:”}[payClass]“ng-bind=皃ayCountDown”比;
& lt;/div>之前
js相关代码:
美元的范围。订单=Storage.get(“订单”);//订单为后台传来的订单信息,里面包含订单创建时间
var createTime;//订单创建时间
var curTime;//当前时间
var totalSecond;//设置计时总时间(分钟)
如果(scope.order美元。createtime !=null) {//为了支持safari浏览器
createTime=new日期(scope.order.createtime美元。替换(/\/g,“/?) .getTime ();
.getTime curTime=new日期()();
totalSecond=Math.round ((createTime + 15 * 60 * 1000 - curtime)/1000);
其他}{
totalSecond=15 * 60;
}/* *
*支付倒计时
*/timePromise=$间隔(函数(){
如果(totalSecond祝辞=0){
var t1=数学。地板(totalSecond/60);
var m=t1 & lt;10 & # 63;“0”+ t1: t1;
var t2=totalSecond - t1 * 60;
var s=t2 & lt;10 & # 63;“0”+ t2: t2;
totalSecond=totalSecond - 1;
scope.payClass=true;美元//添加课
美元scope.payCountDown="支付剩余时间:“+ m +”分钟”+ s +“秒”
其他}{
美元scope.confirmPay=true;
scope.payClass=true;美元//添加课
美元的范围。payCountDown="支付超时,请重新下的单!”;
美元interval.cancel (timePromise);//终止倒计时
}
},1000)
css代码:
.payCountDown {
颜色:# FFFFFF;
背景颜色:红色;
text-align:中心;
填充:14 0 px;
透明度:0.8
}
运行效果:
补充:
甲骨文定时任务代码:
开始
sys.dbms_job。提交(工作=比;:工作,=比什么;“UpdateOrderStatues;”
next_date=比;to_date (' 05-06-2017 10:05:50”、“dd-mm-yyyy hh34: mi: ss”),
间隔=比;“sysdate + 1/1440”);
提交;
结束;/
以上所述是小编给大家介绍的AngularJS支付倒计时功能实现思路,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
