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 相关文章推荐
用ASP将SQL搜索出来的内容导出为TXT的代码
Jul 27 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
Apr 17 Javascript
JS截取url中问号后面参数的值信息
Apr 29 Javascript
php+ajax+jquery实现点击加载更多内容
May 03 Javascript
javascript实现图片上传前台页面
Aug 18 Javascript
js html5 css俄罗斯方块游戏再现
Oct 17 Javascript
Vue实现自带的过滤器实例
Mar 09 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
Jan 03 Javascript
Vue.js 实现数据展示全部和收起功能
Sep 05 Javascript
react+redux仿微信聊天界面
Jun 21 Javascript
JS实现的碰撞检测与周期移动完整示例
Sep 02 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
在Windows版的PHP中使用ADO
2006/10/09 PHP
简单的移动设备检测PHP脚本代码
2011/02/19 PHP
基于PHP异步执行的常用方式详解
2013/06/03 PHP
将PHP从5.3.28升级到5.3.29时Nginx出现502错误
2015/05/09 PHP
php根据日期显示所在星座的方法
2015/07/13 PHP
php代码架构的八点注意事项
2016/01/25 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
php 将json格式数据转换成数组的方法
2018/08/21 PHP
Javascript Math ceil()、floor()、round()三个函数的区别
2010/03/09 Javascript
javascript:window.open弹出窗口的位置问题
2014/03/18 Javascript
在JavaScript中构建ArrayList示例代码
2014/09/17 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
2016/06/12 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
2016/06/15 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
理解nodejs的stream和pipe机制的原理和实现
2017/08/12 NodeJs
Vue自定义事件(详解)
2017/08/19 Javascript
浅谈angular4生命周期钩子
2017/09/05 Javascript
简单实现vue验证码60秒倒计时功能
2017/10/11 Javascript
Python读写Redis数据库操作示例
2014/03/18 Python
Python中捕获键盘的方式详解
2019/03/28 Python
使用django实现一个代码发布系统
2019/07/18 Python
解决python中import文件夹下面py文件报错问题
2020/06/01 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
2013/01/06 HTML / CSS
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
2013/01/31 HTML / CSS
加拿大在线隐形眼镜专家:PerfectLens.ca
2016/11/19 全球购物
总经理助理的八要求
2013/11/12 职场文书
探矿工程师自荐信
2014/01/24 职场文书
病媒生物防治方案
2014/05/13 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
旅游局领导班子“四风”问题对照检查材料思想汇报
2014/09/29 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
2015年安康杯竞赛活动总结
2015/03/26 职场文书
上市公司财务总监岗位职责
2015/04/03 职场文书
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python