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 CSS修改学习第三章 修改样式表
Feb 19 Javascript
利用谷歌地图API获取点与点的距离的js代码
Oct 11 Javascript
jQuery简单实现隐藏以及显示特效
Feb 26 Javascript
JavaScript实现的多种鼠标拖放效果
Nov 03 Javascript
js判断文本框输入的内容是否为数字
Dec 23 Javascript
Angular实现跨域(搜索框的下拉列表)
Feb 16 Javascript
vue如何从接口请求数据
Jun 22 Javascript
Vue ElementUI之Form表单验证遇到的问题
Aug 21 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
May 10 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
Sep 03 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
Oct 26 Javascript
如何检测JavaScript中的死循环示例详解
Aug 30 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
第一个无线电台是由谁发明的
2021/03/01 无线电
php使用filter过滤器验证邮箱 ipv6地址 url验证
2013/12/25 PHP
php隐藏IP地址后两位显示为星号的方法
2014/11/21 PHP
PHP Cookie学习笔记
2016/08/23 PHP
ThinkPHP中session函数详解
2016/09/14 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
javascript 写的一个简单的timer
2009/07/30 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
JS防止用户多次提交的简单代码
2013/08/01 Javascript
jquery代码实现多选、不同分享功能
2015/07/31 Javascript
详解javascript事件冒泡
2016/01/09 Javascript
Bootstrap 模态框(Modal)插件代码解析
2016/12/21 Javascript
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
2019/04/30 Javascript
详解基于原生JS验证表单组件xy-form
2019/08/20 Javascript
JavaScript实现简单计算器功能
2019/12/19 Javascript
Vue 实现分页与输入框关键字筛选功能
2020/01/02 Javascript
jquery实现淡入淡出轮播图效果
2020/12/13 jQuery
[03:12]完美世界DOTA2联赛PWL DAY7集锦
2020/11/06 DOTA
pandas 空的dataframe 插入列名的示例
2018/10/30 Python
python+pyqt5编写md5生成器
2019/03/18 Python
python 列表转为字典的两个小方法(小结)
2019/06/28 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
tensorflow 分类损失函数使用小记
2020/02/18 Python
基于Canvas+Vue的弹幕组件的实现
2019/07/23 HTML / CSS
美国最灵活的移动提供商:Tello
2017/07/18 全球购物
舒适的豪华鞋:Taryn Rose
2018/05/03 全球购物
西班牙语在线票务市场:SuperBoletería
2019/06/10 全球购物
三维科技面试题
2013/07/27 面试题
爱我中华教学反思
2014/04/28 职场文书
老乡聚会通知
2015/04/23 职场文书
2015年行政部工作总结
2015/04/28 职场文书
抢劫罪辩护词
2015/05/21 职场文书
预备党员群众意见
2015/06/01 职场文书
李清照的诗词赏析(20首)
2019/08/22 职场文书