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 相关文章推荐
巧用js提交表单轻松解决一个页面有多个提交按钮
Nov 17 Javascript
JS获取当前网址、主机地址项目根路径
Nov 19 Javascript
Javascript实现Web颜色值转换
Feb 05 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
Apr 12 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
Bootstrap布局之栅格系统学习笔记
May 04 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
Oct 27 Javascript
开发Vue树形组件的示例代码
Dec 21 Javascript
详解mpvue开发小程序小总结
Jul 25 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
Aug 20 Javascript
微信小程序返回上一页传参并刷新过程解析
Dec 13 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 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下几种删除目录的方法总结
2007/08/19 PHP
php源代码安装常见错误与解决办法分享
2013/05/28 PHP
简单的php中文转拼音的实现代码
2014/02/11 PHP
浅谈PHP表单提交(POST&amp;GET&amp;URL编/解码)
2017/04/03 PHP
PHP静态延迟绑定和普通静态效率的对比
2017/10/20 PHP
理解Javascript_09_Function与Object
2010/10/16 Javascript
web前端开发也需要日志
2010/12/09 Javascript
document.execCommand()的用法小结
2014/01/08 Javascript
JS小游戏之仙剑翻牌源码详解
2014/09/25 Javascript
javascript实现图像循环明暗变化的方法
2015/02/25 Javascript
javascript中createElement的两种创建方式
2015/05/14 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
2016/01/19 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
Js利用Canvas实现图片压缩功能
2017/09/13 Javascript
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
vue实现前进刷新后退不刷新效果
2018/01/26 Javascript
ES6 系列之 WeakMap的使用示例
2018/08/06 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
2018/08/13 jQuery
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
jQuery分组选择器简单用法示例
2019/04/04 jQuery
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
原生JavaScript实现换肤
2021/02/19 Javascript
Python中的数学运算操作符使用进阶
2016/06/20 Python
Python将一个CSV文件里的数据追加到另一个CSV文件的方法
2018/07/04 Python
python实现在cmd窗口显示彩色文字
2019/06/24 Python
对Python中一维向量和一维向量转置相乘的方法详解
2019/08/26 Python
Django数据库操作之save与update的使用
2020/04/01 Python
捐书活动总结
2014/05/04 职场文书
学习张林森心得体会
2014/09/10 职场文书
2014年民主评议党员工作总结
2014/12/02 职场文书
吧主申请感言怎么写
2015/08/03 职场文书
靠谱准确的求职信
2019/04/02 职场文书
2022漫威和DC电影上映作品
2022/04/05 欧美动漫
Python PIL按比例裁剪图片
2022/05/11 Python
一篇文章带你掌握SQLite3基本用法
2022/06/14 数据库