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 相关文章推荐
JQuery 学习笔记 选择器之六
Jul 23 Javascript
jQuery load方法用法集锦
Dec 06 Javascript
JavaScript自定义事件介绍
Aug 29 Javascript
一个JavaScript的求爱小特效
May 09 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
Apr 27 Javascript
基于JS递归函数细化认识及实用实例(推荐)
Aug 07 Javascript
vue实现的网易云音乐在线播放和下载功能案例
Feb 18 Javascript
vue 进阶之实现父子组件间的传值
Apr 26 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
Jul 29 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
JS开发前端团队展示控制器来为成员引流
Aug 14 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 adodb分页实现代码
2009/03/19 PHP
8个PHP程序员常用的功能汇总
2014/12/18 PHP
PHP基于pdo的数据库操作类【可支持mysql、sqlserver及oracle】
2018/05/21 PHP
javascript Excel操作知识点
2009/04/24 Javascript
extJs 常用到的增,删,改,查操作代码
2009/12/28 Javascript
点击隐藏页面左栏或右栏实现js代码
2013/04/01 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
2013/10/29 Javascript
转换字符串为json对象的方法详解
2013/11/29 Javascript
jquery实现ajax提交form表单的方法总结
2014/03/03 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
javascript阻止事件冒泡和浏览器的默认行为
2017/01/21 Javascript
原生js和css实现图片轮播效果
2017/02/07 Javascript
通过一次报错详细谈谈Point事件
2018/05/17 Javascript
详解webpack引入第三方库的方式以及注意事项
2019/01/15 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
vue 插件的方法代码详解
2019/06/06 Javascript
在Vue中使用icon 字体图标的方法
2019/06/14 Javascript
React冒泡和阻止冒泡的应用详解
2020/08/18 Javascript
[01:00:54]TI4正赛第二日开场
2014/07/20 DOTA
python模块restful使用方法实例
2013/12/10 Python
shelve  用来持久化任意的Python对象实例代码
2016/10/12 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
详解python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'如何解决
2019/08/27 Python
美国演唱会订票网站:Ticketmaster美国
2017/10/05 全球购物
Marc O’Polo俄罗斯官方在线商店:德国高端时尚品牌
2019/12/26 全球购物
Seavenger官网:潜水服、浮潜、靴子和袜子
2020/03/05 全球购物
SQL面试题
2013/04/30 面试题
挂科检讨书范文
2014/02/20 职场文书
升学宴主持词
2014/04/02 职场文书
学历公证委托书
2014/04/09 职场文书
春节请假条
2014/04/11 职场文书
建设办主任四风问题整改思路和措施
2014/09/20 职场文书
单位实习鉴定评语
2015/01/04 职场文书
postgreSQL数据库基础知识介绍
2022/04/12 PostgreSQL
Oracle数据库事务的开启与结束详解
2022/06/25 Oracle