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 相关文章推荐
HTML中不支持静态Expando的元素的问题
Mar 08 Javascript
JS获取URL中的参数数据
Dec 05 Javascript
javascript清空table表格的方法
May 14 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
Jun 30 Javascript
使用jquery插件qrcode生成二维码
Oct 22 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
Jan 19 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
Mar 14 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
May 17 Javascript
JQueryEasyUI之DataGrid数据显示
Nov 23 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
Jun 25 Javascript
VUE预渲染及遇到的坑
Sep 03 Javascript
vue项目中仿element-ui弹框效果的实例代码
Apr 22 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 高手之路(一)
2006/10/09 PHP
浅析PHP关键词替换的类(避免重复替换,保留与还原原始链接)
2015/09/22 PHP
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
PHP 7安装使用体验之性能大提升,兼容性强,扩展支持不够(升级PHP要谨慎)
2017/07/27 PHP
PHP命令Command模式用法实例分析
2018/08/08 PHP
PHP精确到毫秒秒杀倒计时实例详解
2019/03/14 PHP
JS创建自定义表格具体实现
2014/02/11 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
2015/06/17 Javascript
javascript实现控制div颜色
2015/07/07 Javascript
javascript与jquery中的this关键字用法实例分析
2015/12/24 Javascript
解析Vue2.0双向绑定实现原理
2017/02/23 Javascript
jquery单击文字或图片内容放大并居中显示
2017/06/23 jQuery
JavaScript实现快速排序的方法分析
2018/01/10 Javascript
详解JavaScript的BUG和错误
2018/05/07 Javascript
React-router4路由监听的实现
2018/08/07 Javascript
layui弹出层按钮提交iframe表单的方法
2018/08/20 Javascript
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
微信小程序实现卡片左右滑动效果的示例代码
2019/05/01 Javascript
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
Python实现钉钉发送报警消息的方法
2019/02/20 Python
Django框架用户注销功能实现方法分析
2019/05/28 Python
机器学习实战之knn算法pandas
2019/06/22 Python
python实现将json多行数据传入到mysql中使用
2019/12/31 Python
python构造IP报文实例
2020/05/05 Python
Windows 下更改 jupyterlab 默认启动位置的教程详解
2020/05/18 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
工程专业应届生求职信
2014/02/19 职场文书
大学生2014全国两会学习心得体会
2014/03/10 职场文书
三八妇女节活动总结
2014/05/04 职场文书
高考作弊检讨书1500字
2015/02/16 职场文书
教师辞职书范文
2015/02/26 职场文书
大学感恩节活动总结
2015/05/05 职场文书
Python Pytorch查询图像的特征从集合或数据库中查找图像
2022/04/09 Python
vue判断按钮是否可以点击
2022/04/09 Vue.js
vue实现登陆页面开发实践
2022/05/30 Vue.js