当前位置:首页 > 日记 > 正文

AngularJS 支付倒计时功能实现思路

AngularJS 支付倒计时功能实现思路

说明:

1、前端只负责展示倒计时,不具备实际功能;

2、实际实现方式:数据库中设置一个每分钟执行一次的定时任务(故与实际情况会有一分钟以内的误差),只要订单创建时间超过15分钟会自动将订单状态改为“取消”。

遇到难点:

1、字符串转date中,苹果satari浏览器不支持“yyyy-mm-dd hh:mi:ss”格式,须将字符串转为“yyyy/mm/dd hh:mi:ss”

new Date($scope.order.createtime.replace(/\-/g, "/")) 

2、AngularJS 对JavaScript自带的 定时任务window.setInterval 支持不完善,需使用其自有的方法 $interval

html相关代码(使用ionic框架):

<div ng-class="{true: 'payCountDown', false: ''}[payClass]" ng-bind="payCountDown"> </div> 

js相关代码:

$scope.order = Storage.get("order");//order为后台传来的订单信息,里面包含订单创建时间   var createTime;//订单创建时间   var curTime;//当前时间   var totalSecond;//设置计时总时间(分钟)   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 }

运行效果:

补充:

oracle定时任务代码:

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 支付倒计时功能实现思路,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

相关文章

详解Vue 2.0封装axios笔记

详解Vue 2.0封装axios笔记

封装,详解,笔记,电脑软件,Vue,前言单页面应用大多采用前后端分离开发思路,我们知道,前端和后端交互有多中方式(服务器端渲染、Ajax、websocket等),今天我们主要讲解Ajax部分。最近团队讨论了一下,Ajax 本身跟 Vue 并没有什么需要特别整合的地方…

微信小程序 wx.login解密出现乱码

微信小程序 wx.login解密出现乱码

解密,解决办法,出现乱码,程序,电脑软件,微信小程序 wx.login解密出现乱码的问题解决办法最近在给公司开发微信小程序,需要用到微信登录,根据文档要求需要把获取的用户信息按照AES进行解密。我使用的是官方提供的PHP demo,拷贝到程序中,测试发现…

nodejs 子进程正确的打开方式

nodejs 子进程正确的打开方式

打开方式,子进程,正确,电脑软件,nodejs,因为库太拙了,需要在 nodejs 里调用子进程来获取数据。然而看到 child_process 的文档真是头疼,这么多种启动子进程的方法直接推到人面前,也没个解释,命名也十分无用。只能一个个地查看详细说明来找到应…

node.js实现回调的方法示例

node.js实现回调的方法示例

方法,回调,示例,电脑软件,node,本文实例讲述了node.js实现回调的方法。分享给大家供大家参考,具体如下:向回调函数传递额外的参数在调用函数中,使用匿名函数中实现需传递的参数,再次匿名函数内调用回调函数。var events = require("events");…

ps如何调整的色阶

ps如何调整的色阶

调整,方法,的色,图片,电脑软件,  图层的色阶在ps中经常会调节,这样可以调出好看的图片。其实这个也不算太难,下面就让小编告诉你ps如何调整图片的色阶的方法,一起学习吧。ps调整图片的色阶的方法1.选定要调整的图层,如下图:2.图像--调整--色阶…

JS中使用gulp实现压缩文件及浏览器

JS中使用gulp实现压缩文件及浏览器

热加载,压缩文件,浏览器,功能,电脑软件,gulp类似于grunt,都是基于Node.js的前端构建工具。不过gulp压缩效率更高。一.安装gulp  首先,你要安装过nodejs,如果没有安装过的同学请自行下载。 先再命令行里输入 npm install gulp -g 下载gu…

es6的数字处理的方法(5个)

es6的数字处理的方法(5个)

方法,数字处理,电脑软件,// Math.trunc方法用于去除一个数的小数部分,返回整数部分。 Math.trunc(4.1) // 4 Math.trunc(4.9) // 4 Math.trunc(-4.1) // -4 Math.trunc(-4.9) // -4 Math.trunc(NaN); // NaN Math.trunc('foo'); // NaN Ma…

如何将word2013转成PDF

如何将word2013转成PDF

转成,如何将,电脑软件,PDF,  我们在使用Word2013编辑好Word文档资料后,需要把文档资料转换成为PDF格式的文件。那么,在这种情况下我们应该怎样做呢?那么下面就由小编给大家分享下将word2013转成PDF的技巧,希望能帮助到您。将word2013转成PDF…

简述Ajax的优点与缺点

简述Ajax的优点与缺点

缺点,优点,电脑软件,Ajax,ajax的优点Ajax的给我们带来的好处大家基本上都深有体会,在这里我只简单的讲几点:1、最大的一点是页面无刷新,在页面内与服务器通信,给用户的体验非常好。2、使用异步方式与服务器通信,不需要打断用户的操作,具有更加迅…

微信小程序实现放大预览功能

微信小程序实现放大预览功能

功能,程序,电脑软件,微信小,需求:当点击图片时,当前图片放大预览,且可以左右滑动实现方式:使用微信小程序图片预览接口我们可以看到api需要两个参数,分别通过下面的data-list和data-src来传到js中wxml代码:<!--图片描述--> <view wx:if="{{item.…

Fireworks如制作折叠效果的菜单

Fireworks如制作折叠效果的菜单

菜单,折叠,效果,电脑软件,Fireworks,现在菜单效果越来越炫,如何实现折叠的效果呢,就几步,很简单,下面我们来看看吧!步骤:1、&ldquo;文件&rdquo;----&ldquo;新建&rdquo;一个图形,尺寸是150x350,当然可以按照需要定义。2、选中左侧的&ldquo;矩形工具&…

怎么在word2007中设置大纲的级别wo

怎么在word2007中设置大纲的级别wo

设置,级别,操作方法,步骤,大纲,  在编辑文档的时候,目录有时是必不可少的一项,但在实际情况当中,那么今天小编就教你怎么在word2007中设置大纲的级别。word2007中设置大纲的级别的步骤选择&ldquo;视图&ldquo;选项卡word2007中设置大纲的级别…