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 相关文章推荐
Windows Live的@live.com域名注册漏洞 利用代码
Dec 27 Javascript
javaScript checkbox 全选/反选及批量删除
Apr 28 Javascript
JavaScript 异步方法队列链实现代码分析
Jun 05 Javascript
javaScript的函数对象的声明详解
Feb 06 Javascript
JavaScript类型系统之Object详解
Jan 07 Javascript
php输出全部gb2312编码内的汉字方法
Mar 04 Javascript
js插件实现图片滑动验证码
Sep 29 Javascript
vue弹窗组件使用方法
Apr 28 Javascript
微信运维交互机器人的示例代码
Nov 12 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
Feb 01 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
Apr 24 Javascript
node脚手架搭建服务器实现token验证的方法
Jan 20 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+DBM的同学录程序(1)
2006/10/09 PHP
调试一段PHP程序时遇到的三个问题
2012/01/17 PHP
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
PHP通过串口实现发送短信
2015/07/08 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
php使用ffmpeg向视频中添加文字字幕的实现方法
2016/05/23 PHP
File文件控件,选中文件(图片,flash,视频)即立即预览显示
2009/04/09 Javascript
javascript 同时在IE和FireFox获取KeyCode的代码
2010/02/07 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
2013/08/27 Javascript
javascript操作html控件实例(javascript添加html)
2013/12/02 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
2014/03/06 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
2014/09/29 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
JavaScript中join()方法的使用简介
2015/06/09 Javascript
不用一句js代码初始化组件
2016/01/27 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
2016/04/26 Javascript
微信小程序 navigation API实例详解
2016/10/02 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
2016/12/07 Javascript
js+html5实现复制文字按钮
2017/07/15 Javascript
weex slider实现滑动底部导航功能
2017/08/28 Javascript
微信小程序radio组件使用详解
2018/01/31 Javascript
微信小程序商品详情页的底部弹出框效果
2020/11/16 Javascript
koa2 从入门到精通(小结)
2019/07/23 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
2019/10/11 Javascript
在Vue中使用Select选择器拼接label的操作
2020/10/22 Javascript
Python库urllib与urllib2主要区别分析
2014/07/13 Python
Python中的choice()方法使用详解
2015/05/15 Python
Python实现的字典值比较功能示例
2018/01/08 Python
Python cookie的保存与读取、SSL讲解
2020/02/17 Python
家用个人磨皮机:Trophy Skin
2017/03/30 全球购物
高中班长自我鉴定
2013/12/20 职场文书
企业党员个人自我评价
2014/09/20 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
PyCharm 配置SSH和SFTP连接远程服务器
2022/05/11 Python
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server