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下阻止表单重复提交、防刷新、防后退
Aug 17 Javascript
javascript 精粹笔记
May 09 Javascript
jquery 选择器引擎sizzle浅析
Feb 06 Javascript
jQuery实现 注册时选择阅读条款 左右移动
Apr 11 Javascript
细说javascript函数从函数的构成开始
Aug 29 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
Oct 20 Javascript
AngularJS equal比较对象实例详解
Sep 14 Javascript
JavaScript中 DOM操作方法小结
Apr 25 Javascript
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
vue.js异步上传文件前后端实现代码
Aug 22 Javascript
vue-cli3环境变量与分环境打包的方法示例
Feb 18 Javascript
JavaScript实现英语单词题库
Dec 24 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 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
PHP与MYSQL中UTF8编码的中文排序实例
2014/10/21 PHP
laravel自定义分页效果
2017/07/23 PHP
php如何获取Http请求
2020/04/30 PHP
javascript获取设置div的高度和宽度兼容任何浏览器
2013/09/22 Javascript
浅析JavaScript中的隐式类型转换
2013/12/05 Javascript
JS 获取浏览器和屏幕宽高等信息代码
2014/03/31 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
2015/12/12 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
2016/12/26 Javascript
详解JS异步加载的三种方式
2017/03/07 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
2017/11/24 Javascript
react实现菜单权限控制的方法
2017/12/11 Javascript
react-router browserHistory刷新页面404问题解决方法
2017/12/29 Javascript
Angular ElementRef简介及其使用
2018/10/01 Javascript
Nuxt.js开启SSR渲染的教程详解
2018/11/30 Javascript
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
Pycharm学习教程(3) 代码运行调试
2017/05/03 Python
浅谈python连续赋值可能引发的错误
2018/11/10 Python
python性能测量工具cProfile使用解析
2019/09/26 Python
Python在字符串中处理html和xml的方法
2020/07/31 Python
Python抓包并解析json爬虫的完整实例代码
2020/11/03 Python
Python3 用什么IDE开发工具比较好
2020/11/28 Python
用html5的canvas画布绘制贝塞尔曲线完整代码
2013/08/14 HTML / CSS
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
官方授权图形T恤和服装:Fifth Sun
2019/06/12 全球购物
香港零食网购:上仓胃子
2020/06/08 全球购物
介绍一下Linux文件的记录形式
2012/04/18 面试题
老师推荐信
2013/10/28 职场文书
物流仓管员岗位职责
2013/12/04 职场文书
《宿建德江》教学反思
2014/04/23 职场文书
大学新生入学教育方案
2014/05/16 职场文书
幼儿教师辞职信
2015/02/27 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书
标准演讲稿格式结尾应该怎么书写?
2019/07/17 职场文书
关于React Native 无法链接模拟器的问题
2021/06/21 Javascript