uniapp电商小程序实现订单30分钟倒计时


Posted in Javascript onNovember 01, 2020

本文实例为大家分享了uniapp实现订单30分钟倒计时的具体代码,供大家参考,具体内容如下

uniapp电商小程序实现订单30分钟倒计时

倒计时函数如下:

// cm 参数是截至时间-当前时间
// 截至时间是后台返回的数据,当前时间通过new Date() 的方式进行获取
runBack(cm) {
 if (cm > 0) {
 // 如果时间是超过1分钟,则需要展示的样式是: x分x秒,如果是小于1分钟,则是 00分x秒
 cm > 60000
  ? (this.rocallTime =
  (new Date(cm).getMinutes() < 10
  ? "0" + new Date(cm).getMinutes()
  : new Date(cm).getMinutes()) +
  ":" +
  (new Date(cm).getSeconds() < 10
  ? "0" + new Date(cm).getSeconds()
  : new Date(cm).getSeconds()))
  : (this.rocallTime =
  "00:" +
  (new Date(cm).getSeconds() < 10
  ? "0" + new Date(cm).getSeconds()
  : new Date(cm).getSeconds()));
 let _msThis = this;
 // 使用setTimeout倒计时,1秒后,重复调用此函数。,直到cm =0为止,跳出这个函数
 setTimeout(function() {
  cm -= 1000;
  _msThis.runBack(cm);
 }, 1000);
 } else {
 this.ispay = false
 }
 },

如果只是一个单纯的倒计时,可以通过setInterval进行处理,

let time = 1800;
 setInterval(function(){
 time=time-1;
 var minute=parseInt(time/60);
 var second=parseInt(time%60);
 console.log('还剩'+minute+'分'+second+'秒');
 },1000);

如果上面的这个倒计时函数放在页面的onload函数中,则每次这个页面加载,比如重新加载小程序的时候,都会进行30分钟倒计时,而我们想要的是,从下订单的那一刻开始进行的30分钟倒计时,所以,还是需要用第一种方式来进行处理。截至日期由后台返给的方式来。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 数组运用实现代码
Apr 13 Javascript
js获取光标位置和设置文本框光标位置示例代码
Jan 09 Javascript
jQuery基础知识点总结(DOM操作)
Jun 01 Javascript
AngularJS指令用法详解
Nov 02 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 Javascript
使用webpack搭建react开发环境的方法
May 15 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
Nov 15 Javascript
es6 filter() 数组过滤方法总结
Apr 03 Javascript
Vue.js标签页组件使用方法详解
Oct 19 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
Oct 28 Javascript
vue路由传参的基本实现方式小结【三种方式】
Feb 05 Javascript
VUE项目axios请求头更改Content-Type操作
Jul 24 Javascript
详解JavaScript之Array.reduce源码解读
Nov 01 #Javascript
微信小程序实现星星评分效果
Nov 01 #Javascript
Express 配置HTML页面访问的实现
Nov 01 #Javascript
ant design vue 表格table 默认勾选几项的操作
Oct 31 #Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
Oct 31 #Javascript
Ant design vue中的联动选择取消操作
Oct 31 #Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
Oct 31 #Javascript
You might like
php设计模式 Proxy (代理模式)
2011/06/26 PHP
PHP中is_file()函数使用指南
2015/05/08 PHP
将函数的实际参数转换成数组的方法
2010/01/25 Javascript
JavaScript isPrototypeOf和hasOwnProperty使用区别
2010/03/04 Javascript
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
15款jQuery分布引导插件分享
2015/02/04 Javascript
浅谈jquery事件处理
2015/04/24 Javascript
JavaScript中的Promise使用详解
2015/06/24 Javascript
javascript运动详解
2015/07/06 Javascript
jQuery ready()和onload的加载耗时分析
2016/09/08 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
微信小程序实现美团菜单
2018/06/06 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
2020/08/12 Javascript
详解JavaScript的this指向和绑定
2020/09/08 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
2020/10/14 Javascript
AI人工智能 Python实现人机对话
2017/11/13 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
在Pycharm中调试Django项目程序的操作方法
2019/07/17 Python
python二维键值数组生成转json的例子
2019/12/06 Python
python实现opencv+scoket网络实时图传
2020/03/20 Python
django执行原始查询sql,并返回Dict字典例子
2020/04/01 Python
解决启动django,浏览器显示“服务器拒绝访问”的问题
2020/05/13 Python
Django如何重置migration的几种情景
2021/02/24 Python
如何用PHP实现邮件发送
2012/12/26 面试题
总经理助理的八要求
2013/11/12 职场文书
中学生学雷锋演讲稿
2014/04/26 职场文书
交通事故赔偿协议书怎么写
2014/10/04 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书
幼儿园六一主持词开场白
2015/05/28 职场文书
篮球赛新闻稿
2015/07/17 职场文书
丧事酒宴答谢词
2015/09/30 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书
Pytorch 如何加速Dataloader提升数据读取速度
2021/05/28 Python
JUnit5常用注解的使用
2021/07/02 Java/Android
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python