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面向对象编程
Mar 02 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
Aug 02 Javascript
ajax提交表单实现网页无刷新注册示例
May 08 Javascript
一行命令搞定node.js 版本升级
Jul 20 Javascript
javaScript中push函数用法实例分析
Jun 08 Javascript
jQuery下拉友情链接美化效果代码分享
Aug 26 Javascript
JS实现的简易拖放效果示例
Dec 29 Javascript
js实现导航栏中英文切换效果
Jan 16 Javascript
Angular如何在应用初始化时运行代码详解
Jun 11 Javascript
JavaScript接口实现方法实例分析
May 16 Javascript
vue2.0实现列表数据增加和删除
Jun 17 Javascript
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
详解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中返回引用类型的方法
2015/04/03 PHP
jquery 简短右键菜单 多浏览器兼容
2010/01/01 Javascript
JavaScript 题型问答有答案参考
2010/02/17 Javascript
jQuery.Validate 使用笔记(jQuery Validation范例 )
2010/06/25 Javascript
JS保存、读取、换行、转Json报错处理方法
2013/06/14 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
2014/01/07 Javascript
jQuery获取checkboxlist的value值的方法
2015/09/27 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
2016/03/05 Javascript
基于javascript显示当前时间以及倒计时功能
2016/03/18 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
2016/08/03 Javascript
Vue.js 父子组件通讯开发实例
2016/09/06 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
2017/05/08 Javascript
详解JavaScript数组过滤相同元素的5种方法
2017/05/23 Javascript
详解vue项目构建与实战
2017/06/27 Javascript
boostrap模态框二次弹出清空原有内容的方法
2018/08/10 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
nodejs制作小爬虫功能示例
2020/02/24 NodeJs
如何在node环境实现“get数据解析”代码实例
2020/07/03 Javascript
[54:56]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第三局
2016/03/06 DOTA
python基础教程之五种数据类型详解
2017/01/12 Python
python3.4下django集成使用xadmin后台的方法
2017/08/15 Python
Python优先队列实现方法示例
2017/09/21 Python
Python实现的简单计算器功能详解
2018/08/25 Python
python列表使用实现名字管理系统
2019/01/30 Python
python实现WebSocket服务端过程解析
2019/10/18 Python
python 链接sqlserver 写接口实例
2020/03/11 Python
基于 HTML5 WebGL 实现的垃圾分类系统
2019/10/08 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
2013/01/07 HTML / CSS
AE美国鹰日本官方网站: American Eagle Outfitters
2016/12/10 全球购物
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
应届生骨科医生求职信
2013/10/31 职场文书
运动会解说词100字
2014/01/31 职场文书
我的1919观后感
2015/06/03 职场文书
使用PDF.js渲染canvas实现预览pdf的效果示例
2021/04/17 Javascript