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 相关文章推荐
让FireFox支持innerText的实现代码
Dec 01 Javascript
jQuery 数据缓存data(name, value)详解及实现
Jan 04 Javascript
用JQuery调用Session的实现代码
Oct 29 Javascript
基于jquery的获取浏览器窗口大小的代码
Mar 28 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
Aug 07 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
Sep 01 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
Jul 01 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
Dec 13 Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
Mar 07 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
Nov 19 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 无限级 SelectTree 类
2009/05/19 PHP
PHP数据类型之布尔型的介绍
2013/04/28 PHP
php5.4传引用时报错问题分析
2016/01/22 PHP
php把字符串指定字符分割成数组的方法
2018/03/12 PHP
Prototype使用指南之string.js
2007/01/10 Javascript
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
actionscript与javascript的区别
2011/05/25 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
readonly和disabled属性的区别
2015/07/26 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
2017/02/19 Javascript
javascript 正则表达式分组、断言详解
2017/04/20 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
2017/11/21 Javascript
javascript实现Emrips反质数枚举的示例代码
2017/12/06 Javascript
JS简单添加元素新节点的方法示例
2018/02/10 Javascript
手把手教你如何使用nodejs编写cli命令行
2018/11/05 NodeJs
jquery检测上传文件大小示例
2020/04/26 jQuery
js数组中去除重复值的几种方法
2020/08/03 Javascript
在react项目中使用antd的form组件,动态设置input框的值
2020/10/24 Javascript
Python语言技巧之三元运算符使用介绍
2013/03/04 Python
老生常谈python函数参数的区别(必看篇)
2017/05/29 Python
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
使用python实现语音文件的特征提取方法
2019/01/09 Python
tensorflow实现将ckpt转pb文件的方法
2020/04/22 Python
PIL.Image.open和cv2.imread的比较与相互转换的方法
2020/06/03 Python
python求解汉诺塔游戏
2020/07/09 Python
CSS书写规范、顺序和命名规则
2014/03/06 HTML / CSS
Banggood官网:面向全球客户的综合商城
2017/04/19 全球购物
考试不及格的检讨书
2014/01/22 职场文书
广告学专业毕业生自荐信
2014/05/28 职场文书
学生抄作业检讨书(2篇)
2014/10/17 职场文书
幼儿园万圣节活动总结
2015/05/05 职场文书
2015年防灾减灾工作总结
2015/07/24 职场文书
mysql数据库入门第一步之创建表
2021/05/14 MySQL
MySQL 聚合函数排序
2021/07/16 MySQL
Logback 使用TurboFilter实现日志级别等内容的动态修改操作
2021/08/30 Java/Android
本地搭建minio文件服务器(使用bat脚本启动)的方法
2022/07/15 Servers