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 相关文章推荐
动态改变textbox的宽高的js
Oct 26 Javascript
JavaScript 对话框和状态栏使用说明
Oct 25 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
Jan 11 Javascript
javascript 文件的同步加载与异步加载实现原理
Dec 13 Javascript
JS 对象属性相关(检查属性、枚举属性等)
Apr 05 Javascript
jQuery Validate表单验证入门学习
Dec 18 Javascript
animate 实现滑动切换效果【实例代码】
May 05 Javascript
轮播的简单实现方法
Jul 28 Javascript
关于Vue.js一些问题和思考学习笔记(1)
Dec 02 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
vue实现瀑布流组件滑动加载更多
Mar 10 Javascript
Vue 构造选项 - 进阶使用说明
Aug 14 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笔记之:php数组相关函数的使用
2013/04/26 PHP
PHP实现根据时间戳获取周几的方法
2016/02/26 PHP
jQuery中的val()示例应用
2014/02/26 Javascript
css如何让浮动元素水平居中
2015/08/07 Javascript
JavaScript事件类型中UI事件详解
2016/01/14 Javascript
深入理解bootstrap框架之入门准备
2016/10/09 Javascript
微信小程序 加载 app-service.js 错误解决方法
2016/10/12 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
2016/11/09 Javascript
js中开关变量使用实例
2017/02/24 Javascript
vue 巧用过渡效果(小结)
2018/09/22 Javascript
Electron + vue 打包桌面操作流程详解
2019/06/24 Javascript
vue遍历生成的输入框 绑定及修改值示例
2019/10/30 Javascript
Vue element-ui父组件控制子组件的表单校验操作
2020/07/17 Javascript
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
Python获取服务器信息的最简单实现方法
2015/03/05 Python
python连接字符串的方法小结
2015/07/13 Python
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
Sublime开发python程序的示例代码
2018/01/24 Python
解决python 无法加载downsample模型的问题
2018/10/25 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
python各类经纬度转换的实例代码
2019/08/08 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
python实现图像高斯金字塔的示例代码
2020/12/11 Python
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
美国网上鞋子零售商:Dr. Scholl’s Shoes
2017/11/17 全球购物
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
Farfetch台湾官网:奢侈品牌时尚购物平台
2019/06/17 全球购物
运动会表扬稿大全
2014/01/16 职场文书
技校毕业生自荐信范文
2014/03/07 职场文书
淘宝好评语大全
2014/05/05 职场文书
大学教师师德师风演讲稿
2014/08/22 职场文书
高职教师先进事迹材料
2014/08/24 职场文书
旷课检讨书500字
2014/10/14 职场文书
合作合同协议书范本
2015/01/27 职场文书
学生安全责任协议书
2016/03/22 职场文书
Mysql中where与on的区别及何时使用详析
2021/08/04 MySQL