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 相关文章推荐
Javascript面向对象扩展库代码分享
Mar 27 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
Jun 26 Javascript
浅析JavaScript中的类型和对象
Nov 29 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
Feb 19 Javascript
jQuery实现Twitter的自动文字补齐特效
Nov 28 Javascript
JavaScript创建对象的方式小结(4种方式)
Dec 17 Javascript
jQuery插件fullPage.js实现全屏滚动效果
Dec 02 Javascript
微信小程序开发入门基础教程
Apr 19 Javascript
Node.js学习之地址解析模块URL的使用详解
Sep 28 Javascript
iview日期控件,双向绑定日期格式的方法
Mar 15 Javascript
详解如何在Vue里建立长按指令
Aug 20 Javascript
在vue项目中封装echarts的步骤
Dec 25 Vue.js
解决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
ADODB类使用
2006/11/25 PHP
php 分页类 扩展代码
2009/06/11 PHP
提高代码性能技巧谈—以创建千行表格为例
2006/07/01 Javascript
aspx中利用js实现确认删除代码
2010/07/22 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
JQuery以JSON方式提交数据到服务端示例代码
2014/05/05 Javascript
Js实现手机发送验证码时按钮延迟操作
2014/06/20 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
2014/10/28 Javascript
JS去除iframe滚动条的方法
2015/04/01 Javascript
React中jquery引用的实现方法
2017/09/12 jQuery
JavaScript 有用的代码片段和 trick
2018/02/22 Javascript
在vue项目中,使用axios跨域处理
2018/03/07 Javascript
vue-cli4.x创建企业级项目的方法步骤
2020/06/18 Javascript
vue键盘事件点击事件加native操作
2020/07/27 Javascript
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
Windows下用py2exe将Python程序打包成exe程序的教程
2015/04/08 Python
在Python中用keys()方法返回字典键的教程
2015/05/21 Python
Python排序搜索基本算法之归并排序实例分析
2017/12/08 Python
python实现数据库跨服务器迁移
2018/04/12 Python
python操作excel文件并输出txt文件的实例
2018/07/10 Python
Django框架会话技术实例分析【Cookie与Session】
2019/05/24 Python
django 消息框架 message使用详解
2019/07/22 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
全面解析CSS Media媒体查询使用操作(推荐)
2017/08/15 HTML / CSS
印度最大的旅游网站:MakeMyTrip
2016/10/05 全球购物
出口公司经理求职简历中的自我评价
2013/10/13 职场文书
宾馆总经理岗位职责
2014/02/14 职场文书
《罗布泊,消逝的仙湖》教学反思
2014/03/01 职场文书
物流管理专业自荐信
2014/06/23 职场文书
党支部创先争优活动总结
2014/08/28 职场文书
2014年个人教学工作总结
2014/12/09 职场文书
2016年春节慰问信息大全
2015/11/30 职场文书
演讲开头怎么书写?
2019/08/06 职场文书
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS
Java实现HTML转为Word的示例代码
2022/06/28 Java/Android