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 相关文章推荐
jquery imgareaselect 使用利用js与程序结合实现图片剪切
Jul 30 Javascript
ExtJS 2.0 GridPanel基本表格简明教程
May 25 Javascript
js实现选中页面文字将其分享到新浪微博
Nov 05 Javascript
温习Javascript基础语法之词法结构
May 31 Javascript
很棒的Bootstrap选项卡切换效果
Jul 01 Javascript
微信小程序 navigation API实例详解
Oct 02 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
Dec 13 Javascript
详解如何在vue中使用sass
Jun 21 Javascript
JavaScript实现计数器基础方法
Oct 10 Javascript
微信公众平台 发送模板消息(Java接口开发)
Apr 17 Javascript
Vue实现验证码功能
Dec 03 Javascript
JS一次前端面试经历记录
Mar 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实现链结人气统计
2006/10/09 PHP
php 信息采集程序代码
2009/03/17 PHP
php数据入库前清理 注意php intval与mysql的int取值范围不同
2010/12/12 PHP
mysql 查询指定日期时间内sql语句实现原理与代码
2012/12/16 PHP
PHP利用REFERER根居访问来地址进行页面跳转
2013/09/28 PHP
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
几行代码轻松实现PHP文件打包下载zip
2017/03/01 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
Prototype使用指南之form.js
2007/01/10 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
jquery+php实现滚动的数字特效
2015/11/29 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
2016/05/25 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
2016/06/30 Javascript
详解jQuery简单的表格应用
2016/12/16 Javascript
js中作用域的实例解析
2017/03/16 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
2018/03/08 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
2018/07/06 Javascript
JS实现关闭小广告特效
2021/01/29 Javascript
Python异常处理总结
2014/08/15 Python
Python脚本实现下载合并SAE日志
2015/02/10 Python
pymongo给mongodb创建索引的简单实现方法
2015/05/06 Python
Python中的默认参数详解
2015/06/24 Python
分享给Python新手们的几道简单练习题
2017/09/21 Python
python获取代理IP的实例分享
2018/05/07 Python
python中pip的使用和修改下载源的方法
2019/07/08 Python
详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)
2019/11/11 Python
如何通过Django使用本地css/js文件
2020/01/20 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
python通过文本在一个图中画多条线的实例
2020/02/21 Python
基于Python的图像阈值化分割(迭代法)
2020/11/20 Python
Matlab使用Plot函数实现数据动态显示方法总结
2021/02/25 Python
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
美国高级工作服品牌:Carhartt
2018/01/25 全球购物
同学聚会策划方案
2014/06/06 职场文书
HTML页面滚动时部分内容位置固定不滚动的实现
2021/04/14 HTML / CSS
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android