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


Posted in Javascript onJune 05, 2017

说明:

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 
}

运行效果:

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

补充:

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

Javascript 相关文章推荐
50个比较实用jQuery代码段
Sep 18 Javascript
用js通过url传参把数据从一个页面传到另一个页面
Sep 01 Javascript
AspNet中使用JQuery上传插件Uploadify详解
May 20 Javascript
JavaScript表单验证开发
Nov 23 Javascript
JavaScript门道之标准库
May 26 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
Jul 10 Javascript
vue项目打包部署到服务器的方法示例
Aug 27 Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 Javascript
apicloud拉起小程序并传递参数的方法示例
Nov 21 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
Apr 23 Javascript
微信小程序手动添加收货地址省市区联动
May 18 Javascript
vue+axios全局添加请求头和参数操作
Jul 24 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
Jun 05 #Javascript
Vue2.0实现购物车功能
Jun 05 #Javascript
bootstrap multiselect 多选功能实现方法
Jun 05 #Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
Jun 05 #Javascript
详解Angular 4 表单快速入门
Jun 05 #Javascript
原生JS实现图片网格式渐显、渐隐效果
Jun 05 #Javascript
Node.js开发第三方微信公众平台
Jun 05 #Javascript
You might like
php异常处理方法实例汇总
2015/06/24 PHP
两种php给图片加水印的实现代码
2020/04/18 PHP
不要小看注释掉的JS 引起的安全问题
2008/12/27 Javascript
JQuery.Ajax之错误调试帮助信息介绍
2013/07/04 Javascript
常用的jQuery前端技巧收集
2014/12/24 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
2016/01/27 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
2016/03/01 Javascript
jQuery的ready方法实现原理分析
2016/10/26 Javascript
Javascript同时声明一连串(多个)变量的方法
2017/01/23 Javascript
关于Vue Webpack2单元测试示例详解
2017/08/14 Javascript
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
使用Vue完成一个简单的todolist的方法
2017/12/01 Javascript
从零开始用electron手撸一个截屏工具的示例代码
2018/10/10 Javascript
swiper4实现移动端导航切换
2020/10/16 Javascript
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
Python Numpy库安装与基本操作示例
2019/01/08 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
Django认证系统实现的web页面实现代码
2019/08/12 Python
详解python中的生成器、迭代器、闭包、装饰器
2019/08/22 Python
Python3+Requests+Excel完整接口自动化测试框架的实现
2019/10/11 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
python3实现绘制二维点图
2019/12/04 Python
python numpy生成等差数列、等比数列的实例
2020/02/25 Python
PyQt5.6+pycharm配置以及pyinstaller生成exe(小白教程)
2020/06/02 Python
python制作抽奖程序代码详解
2021/01/15 Python
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
Android interview questions
2016/12/25 面试题
大学生毕业自我鉴定范文
2013/09/19 职场文书
党课学习思想汇报
2014/01/02 职场文书
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
优秀教师自我评价范文
2014/09/27 职场文书
教师党的群众路线学习心得体会
2014/11/04 职场文书
一年级数学上册复习计划
2015/01/17 职场文书
护士个人总结范文
2015/02/13 职场文书
幼儿园教师暑期培训心得体会
2016/01/09 职场文书