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 相关文章推荐
学习YUI.Ext第五日--做拖放Darg&amp;Drop
Mar 10 Javascript
Mootools 1.2教程 Tooltips
Sep 15 Javascript
用javascript关闭本窗口技巧小结
Sep 05 Javascript
js 定位到某个锚点的方法
Nov 19 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
Feb 08 Javascript
微信分享调用jssdk实例
Jun 08 Javascript
AngularJS实现进度条功能示例
Jul 05 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
Sep 03 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
Mar 15 Javascript
javascript获取元素的计算样式
May 24 Javascript
npm qs模块使用详解
Feb 07 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
Apr 07 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
星际争霸任务指南——神族
2020/03/04 星际争霸
PHP 输出URL的快捷方式示例代码
2013/09/22 PHP
WIN8.1下搭建PHP5.6环境
2015/04/29 PHP
php 使用fopen函数创建、打开文件详解及实例代码
2016/09/24 PHP
用js实现的仿sohu博客更换页面风格(简单版)
2007/03/22 Javascript
js兼容标准的表格变色效果
2008/06/28 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
jQuery之选择组件的深入解析
2013/06/19 Javascript
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
深入理解JavaScript是如何实现继承的
2013/12/12 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
AngularJS 使用$sce控制代码安全检查
2016/01/05 Javascript
Bootstrap每天必学之滚动监听
2016/03/16 Javascript
js显示动态时间的方法详解
2016/08/20 Javascript
原生js实现淘宝购物车功能
2020/06/23 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
2017/03/27 Javascript
layui 给数据表格加序号的方法
2018/08/20 Javascript
详解使用uni-app开发微信小程序之登录模块
2019/05/09 Javascript
NodeJS读取分析Nginx错误日志的方法
2019/05/14 NodeJs
基于vuex实现购物车功能
2021/01/10 Vue.js
python控制台中实现进度条功能
2015/11/10 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
Python制作动态字符图的实例
2019/01/27 Python
浅谈python新式类和旧式类区别
2019/04/26 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
零基础学python应该从哪里入手
2020/08/11 Python
世界上最大的网络主机公司:1&1
2016/10/12 全球购物
捷克街头、运动和滑板一站式商店:BoardStar.cz
2019/10/06 全球购物
软件测试有哪些?什么是配置项?
2012/02/12 面试题
汇科协同Java笔试题
2012/03/31 面试题
新春联欢会主持词
2014/03/24 职场文书
成品库仓管员岗位职责
2014/04/06 职场文书
三好学生个人先进事迹材料
2014/05/17 职场文书
计生专干事迹
2014/05/28 职场文书
中秋节寄语2015
2015/03/24 职场文书