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的常规数组和关联数组对比小结
May 24 Javascript
JS模板实现方法
Apr 03 Javascript
JavaScript常用全局属性与方法记录积累
Jul 03 Javascript
javascript获取隐藏dom的宽高 具体实现
Jul 14 Javascript
setInterval计时器不准的问题解决方法
May 08 Javascript
Windows 系统下安装和部署Egret的开发环境
Jul 31 Javascript
在Docker快速部署Node.js应用的详细步骤
Sep 02 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 Javascript
JS实现去除数组中重复json的方法示例
Dec 21 Javascript
深入Vue-Router路由嵌套理解
Aug 13 Javascript
详解小程序不同页面之间通讯的解决方案
Nov 23 Javascript
微信小程序生成分享海报方法(附带二维码生成)
Mar 29 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桌面中心(一) 创建数据库
2007/03/11 PHP
php实现将字符串按照指定距离进行分割的方法
2015/03/14 PHP
PHP多维数组元素操作类的方法
2016/11/14 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
php使用event扩展的io复用测试的示例
2020/10/20 PHP
jQuery 学习第七课 扩展jQuery的功能 插件开发
2010/05/17 Javascript
JQuery从头学起第三讲
2010/07/06 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
2013/05/21 Javascript
from表单多个按钮提交用onclick跳转不同action
2014/04/24 Javascript
JS限制文本框只能输入数字和字母方法
2015/02/28 Javascript
js给网页加上背景音乐及选择音效的方法
2015/03/03 Javascript
详细分析JavaScript函数定义
2015/07/16 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
js实现不提示直接关闭网页窗口
2017/03/30 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
详解webpack2异步加载套路
2018/09/14 Javascript
layui异步加载table表中某一列数据的例子
2019/09/16 Javascript
JavaScript实现抖音罗盘时钟
2019/10/11 Javascript
Python urlopen()函数 示例分享
2014/06/12 Python
Python数据结构之翻转链表
2017/02/25 Python
使用python获取电脑的磁盘信息方法
2018/11/01 Python
python生成每日报表数据(Excel)并邮件发送的实例
2019/02/03 Python
python Django 创建应用过程图示详解
2019/07/29 Python
windows下python安装pip方法详解
2020/02/10 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
python中return如何写
2020/06/18 Python
大学毕业生文采飞扬的自我鉴定
2013/12/03 职场文书
实习单位接收函
2014/01/11 职场文书
《陈涉世家》教学反思
2014/04/12 职场文书
房屋买卖授权委托书
2014/09/27 职场文书
校长个人总结
2015/03/03 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
分享几个JavaScript运算符的使用技巧
2021/04/24 Javascript