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 相关文章推荐
js字符编码函数区别分析
Jun 05 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
Jun 24 Javascript
JavaScript中原型和原型链详解
Feb 11 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
Dec 24 Javascript
canvas滤镜效果实现代码
Feb 06 Javascript
完美解决浏览器跨域的几种方法(汇总)
May 08 Javascript
深入理解ES6 Promise 扩展always方法
Sep 26 Javascript
Nuxt.js踩坑总结分享
Jan 18 Javascript
JS事件绑定的常用方式实例总结
Mar 02 Javascript
vue h5移动端禁止缩放代码
Oct 28 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
Feb 11 Javascript
javascript实现雪花飘落效果
Aug 19 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
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
PHP使用pcntl_fork实现多进程下载图片的方法
2014/12/16 PHP
php动态绑定变量的用法
2015/06/16 PHP
PHP之图片上传类实例代码(加了缩略图)
2016/06/30 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
js的with语句使用方法
2007/09/21 Javascript
jQuery 源码分析笔记(7) Queue
2011/06/19 Javascript
javascript日期对象格式化为字符串的实现方法
2014/01/14 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
2015/03/04 Javascript
浅谈类似于(function(){}).call()的js语句
2015/03/30 Javascript
再谈JavaScript线程
2015/07/10 Javascript
JavaScript表单验证开发
2016/11/23 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
2017/07/24 Javascript
使用node打造自己的命令行工具方法教程
2018/03/26 Javascript
详解Webpack + ES6 最新环境搭建与配置
2018/06/04 Javascript
Vue Echarts实现可视化世界地图代码实例
2019/05/07 Javascript
webpack的 rquire.context用法实现工程自动化的方法
2020/02/07 Javascript
vue实现折线图 可按时间查询
2020/08/21 Javascript
Python的面向对象思想分析
2015/01/14 Python
python引用DLL文件的方法
2015/05/11 Python
Python3.2中Print函数用法实例详解
2015/05/19 Python
Python实现保证只能运行一个脚本实例
2015/06/24 Python
详解Python下ftp上传文件linux服务器
2018/06/21 Python
python实现雨滴下落到地面效果
2018/06/21 Python
python实现机器学习之多元线性回归
2018/09/06 Python
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
简单了解python的一些位运算技巧
2019/07/13 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
PyCharm License Activation激活码失效问题的解决方法(图文详解)
2020/03/12 Python
Django实现微信小程序支付的示例代码
2020/09/03 Python
python绘图pyecharts+pandas的使用详解
2020/12/13 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
2014高考励志标语
2014/06/05 职场文书
谁动了我的奶酪读书笔记
2015/06/30 职场文书
创业计划书之淘宝网店
2019/10/08 职场文书