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 相关文章推荐
Google韩国首页图标动画效果
Aug 26 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
Nov 19 Javascript
一个JavaScript变量声明的知识点
Oct 28 Javascript
js charAt的使用示例
Feb 18 Javascript
JavaScript中split与join函数的进阶使用技巧
May 03 Javascript
原生JS实现图片网格式渐显、渐隐效果
Jun 05 Javascript
微信小程序之发送短信倒计时功能
Aug 30 Javascript
vue中实现图片和文件上传的示例代码
Mar 16 Javascript
js console.log打印对象时属性缺失的解决方法
May 23 Javascript
js计算最大公约数和最小公倍数代码实例
Sep 11 Javascript
在VUE中实现文件下载并判断状态的方法
Nov 08 Javascript
解决vue字符串换行问题(绝对管用)
Aug 06 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
利用 window_onload 实现select默认选择
2006/10/09 PHP
PHP面向对象精要总结
2014/11/07 PHP
ajax调用返回php接口返回json数据的方法(必看篇)
2017/05/05 PHP
PHP Ajax跨域问题解决方案代码实例
2020/08/01 PHP
用javascript获取textarea中的光标位置
2008/05/06 Javascript
推荐一款jQuery插件模板
2015/01/09 Javascript
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
JQuery遍历DOM节点的方法
2015/06/11 Javascript
跟我学习javascript的var预解析与函数声明提升
2015/11/16 Javascript
js点击按钮实现带遮罩层的弹出视频效果
2015/12/19 Javascript
大型JavaScript应用程序架构设计模式
2016/06/29 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
老生常谈combobox和combotree模糊查询
2017/04/17 Javascript
javascript 产生随机数的几种方法总结
2017/09/26 Javascript
浅谈 vue 中的 watcher
2017/12/04 Javascript
微信小程序block的使用教程
2018/04/01 Javascript
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
vue表单数据交互提交演示教程
2019/11/13 Javascript
JS中this的4种绑定规则详解
2020/02/04 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
[11:01]2014DOTA2西雅图邀请赛 冷冷带你探秘威斯汀
2014/07/08 DOTA
[04:03][TI9趣味短片] 小鸽子茶话会
2019/08/20 DOTA
Python多进程分块读取超大文件的方法
2016/04/13 Python
python计算auc指标实例
2017/07/13 Python
一篇文章快速了解Python的GIL
2018/01/12 Python
python 字符串常用方法汇总详解
2019/09/16 Python
django的autoreload机制实现
2020/06/03 Python
python将下载到本地m3u8视频合成MP4的代码详解
2020/11/24 Python
城市创卫标语
2014/06/17 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
2014年党员自我评议(5篇)
2014/09/12 职场文书
四风查摆剖析材料
2014/10/10 职场文书
竞聘报告优秀范文
2014/11/06 职场文书
2014年银行工作总结范文
2014/11/12 职场文书
员工家属慰问信
2015/03/24 职场文书
python numpy中multiply与*及matul 的区别说明
2021/05/26 Python