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一个无懈可击的实例化XMLHttpRequest的方法
Oct 13 Javascript
理解Javascript_07_理解instanceof实现原理
Oct 15 Javascript
JavaScript flash复制库类 Zero Clipboard
Jan 17 Javascript
基于jQuery的倒计时插件代码
May 07 Javascript
JS控制弹出新页面窗口位置和大小的方法
Mar 02 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
Aug 13 Javascript
如何使用jquery easyui创建标签组件
Nov 18 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
May 28 Javascript
详解Node项目部署到云服务器上
Jul 12 Javascript
如何开发出更好的JavaScript模块
Dec 22 Javascript
JavaScript同源策略和跨域访问实例详解
Apr 03 Javascript
vue element ui validate 主动触发错误提示操作
Sep 21 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获得文件大小和文件创建时间的方法
2015/03/13 PHP
mysql_escape_string()函数用法分析
2016/04/25 PHP
JS对URL字符串进行编码/解码分析
2008/10/25 Javascript
Javascript valueOf 使用方法
2008/12/28 Javascript
Jquery下判断Id是否存在的代码
2011/01/06 Javascript
解决jquery异步按一定的时间间隔刷新问题
2012/12/10 Javascript
javascript定时变换图片实例代码
2013/03/17 Javascript
解析页面加载与js函数的执行 onload or ready
2013/12/12 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
纯JavaScript实现的分页插件实例
2015/07/14 Javascript
浅谈Angularjs link和compile的使用区别
2016/10/21 Javascript
Javascript刷新页面的实例
2017/09/23 Javascript
vue.js,ajax渲染页面的实例
2018/02/11 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
2019/01/25 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
浅谈Vue为什么不能检测数组变动
2019/10/14 Javascript
JavaScript观察者模式原理与用法实例详解
2020/03/10 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
2020/09/02 Javascript
让你30分钟快速掌握vue3教程
2020/10/26 Javascript
python中list列表的高级函数
2016/05/17 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
使用python对文件中的数值进行累加的实例
2018/11/28 Python
Python实现插入排序和选择排序的方法
2019/05/12 Python
在django中实现choices字段获取对应字段值
2020/07/12 Python
印度服装购物网站:Limeroad
2018/09/26 全球购物
教师找工作推荐信
2013/11/23 职场文书
办理居住证介绍信
2014/01/15 职场文书
入股协议书
2014/04/14 职场文书
祖国在我心中演讲稿300字
2014/05/04 职场文书
青年安全生产示范岗事迹材料
2014/05/04 职场文书
大学生职业生涯规划大赛作品(精品)
2014/09/17 职场文书
2014年煤矿工人工作总结
2014/12/08 职场文书
2015年上半年党建工作总结
2015/03/30 职场文书
公司劳动纪律管理制度
2015/08/04 职场文书
【海涛DOTA】D-cup邀请赛NV.cn vs DT.Love
2022/04/01 DOTA