侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

微信小程序实现订单倒计时

微信(小程序)  /  管理员 发布于 3年前   379

本文实例为大家分享了微信小程序实现订单倒计时的具体代码,供大家参考,具体内容如下

之前在做一个有拼团功能项目的时候遇到过倒计时的问题,由于当时技术不熟在这方面耽搁了好些时间,所以这里整理出来希望能为后来人提供些许启发。

1.实现思路

求出发起拼团时间与拼团结束时间的时间差
再将时间差格式化得到我们想要的格式如:

时间每秒递减使用了 setTimeout(this.setTimeCount,1000);这个函数,让这个函数每隔一秒执行一次。

效果图:

2.实现中的难点

若是要实现单个倒计时如60s发送验证码倒不是很难,难的是多条倒计时。

不同的订单下单时间是不一样的时间差time也就不一样,所以当初在这卡了很久,后来想通一切才觉得原来如此。

实现方法1:是后台计算出时间前端直接获取时间差,当时为了不影响项目进度我们用的就是这个方法,真是苦了那个些后台的兄弟还得迁就我这个菜鸟。

获取这个时间差time后我们就可以将它处理后放入数组循环。这样做的好处是前端不用将time作为一个属性添加到原数组中。

index.wxml

单条倒计时:{{time}} 多条倒计时 暂无任何记录       剩余时间:{{item.countDown}}     

index.wxss

page{ height:100%; background: #fff; position: relative;}.item{ height:4%; background: #fff; text-align: center;}.content{ border:1px solid rgb(167, 159, 159); background: #F6F8F8; margin-bottom:300rpx; border-bottom: none;}.no{ text-align: center; position: absolute; top:8%; z-index: -11;}.tip{  position: relative; background: #fff; width:100%; height:100rpx; margin-bottom: 5rpx; padding:20rpx 0; border-bottom: 1px solid gainsboro;}.isShow{ display:none;}.dis{ width:100%; font-size: 35rpx; color:#009FE5; box-sizing: border-box;}.dis_time{ width:50%;}

index.js

Page({ /** * 页面的初始数据 */ data: { pingData: [  {  "id": "1",  "icon": "../../images/image2.jpg",  "number": "20",  "pingTime": "2019-3-28 23:30:00",  "time": "55267",  "showList": "false",  },  {  "id": "2",  "icon": "../../images/image3.jpg",  "number": "4566",  "pingTime": "2019-3-28 12:30:00",  "time": "58934",  "showList": "false",  },  {  "id": "3",  "icon": "../../images/image2.jpg",  "number": "20",  "pingTime": "2019-3-28 08:30:00",  "time": "555234",  "showList": "false",  } ], time:"30" }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this  that.setData({   listData: that.data.pingData  })  that.setCountDown();   that.setTimeCount(); }, /** * 60s倒计时 */ setTimeCount:function(){ let time=this.data.time time--; if (time <= 0) {  time = 0; } this.setData({  time:time }) setTimeout(this.setTimeCount,1000); }, /**  * 倒计时  */ setCountDown: function () { let time = 1000; let { listData } = this.data; let list = listData.map((v, i) => {  if (v.time <= 0) {  v.time = 0;  }  let formatTime = this.getFormat(v.time);  v.time -= time;  v.countDown = `${formatTime.hh}:${formatTime.mm}:${formatTime.ss}`;  return v; }) this.setData({  listData: list }); setTimeout(this.setCountDown, time); }, /** * 格式化时间 */ getFormat: function (msec) { let ss = parseInt(msec / 1000); let ms = parseInt(msec % 1000); let mm = 0; let hh = 0; if (ss > 60) {  mm = parseInt(ss / 60);  ss = parseInt(ss % 60);  if (mm > 60) {  hh = parseInt(mm / 60);  mm = parseInt(mm % 60);  } } ss = ss > 9 ? ss : `0${ss}`; mm = mm > 9 ? mm : `0${mm}`; hh = hh > 9 ? hh : `0${hh}`; return { ss, mm, hh }; }})

实现方法2:本着不想做菜鸟的心情,我在项目完成后由研究了下当初未完成的方法,即前端计算出时间差并将时间差数组作为原数组的属性加入循环遍历。当初一直不知如何在原数组中再添加一个数组作为它的一个属性。
在之前的基础上将time时间差作为一个属性放到原数组中

关键代码如下:

var pinData = that.data.pingData for (var i = 0; i < pinData.length;i++){  console.log("计算出长度为" + pinData.length)  var endtime = that.data.pingData[i].pingTime  console.log("计算出长度为" + endtime)  that.queryTime(endtime)  var time ="pingData["+i+"].time"  that.setData({  [time]:that.queryTime(endtime),  listData:pinData  }) }

新增计算时间差的方法:

queryTime:function(pintime){ var start_date = new Date(); var end_date = new Date(pintime.replace(/-/g, "/")); var days = end_date.getTime() - start_date.getTime(); console.log("获取到时间差" + days) return days; }

之前困惑我的地方就是如何将时间差这个数组添加到原来的数组中,现在想想思路清晰,曾经的难题也不过尔尔。

index.js方法二修改后的代码

Page({ /** * 页面的初始数据 */ data: { pingData: [  {  "id": "1",  "icon": "../../images/image2.jpg",  "number": "20",  "pingTime": "2019-4-15 23:30:00",  "time": "55267",  "showList": "false",  },  {  "id": "2",  "icon": "../../images/image3.jpg",  "number": "4566",  "pingTime": "2019-4-13 12:30:00",  "time": "58934",  "showList": "false",  },  {  "id": "3",  "icon": "../../images/image2.jpg",  "number": "20",  "pingTime": "2019-4-13 08:30:00",  "time": "555234",  "showList": "false",  } ], time:"60" }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this var pinData = that.data.pingData for (var i = 0; i < pinData.length;i++){  console.log("计算出长度为" + pinData.length)  var endtime = that.data.pingData[i].pingTime  console.log("计算出长度为" + endtime)  that.queryTime(endtime)  var time ="pingData["+i+"].time"  that.setData({  [time]:that.queryTime(endtime),  listData:pinData  }) }  that.setCountDown();   that.setTimeCount(); }, /** * 60s倒计时 */ setTimeCount:function(){ let time=this.data.time time--; if (time <= 0) {  time = 0; } this.setData({  time:time }) setTimeout(this.setTimeCount,1000); }, /**  * 倒计时  */ setCountDown: function () { let time = 1000; let { listData } = this.data; let list = listData.map((v, i) => {  if (v.time <= 0) {  v.time = 0;  }  let formatTime = this.getFormat(v.time);  v.time -= time;  v.countDown = `${formatTime.hh}:${formatTime.mm}:${formatTime.ss}`;  return v; }) this.setData({  listData: list }); setTimeout(this.setCountDown, time); }, /** * 格式化时间 */ getFormat: function (msec) { let ss = parseInt(msec / 1000); let ms = parseInt(msec % 1000); let mm = 0; let hh = 0; if (ss > 60) {  mm = parseInt(ss / 60);  ss = parseInt(ss % 60);  if (mm > 60) {  hh = parseInt(mm / 60);  mm = parseInt(mm % 60);  } } ss = ss > 9 ? ss : `0${ss}`; mm = mm > 9 ? mm : `0${mm}`; hh = hh > 9 ? hh : `0${hh}`; return { ss, mm, hh }; }, queryTime:function(pintime){ var start_date = new Date(); var end_date = new Date(pintime.replace(/-/g, "/")); var days = end_date.getTime() - start_date.getTime(); console.log("获取到时间差" + days) return days; }})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

您可能感兴趣的文章:

  • 微信小程序实现日期格式化和倒计时
  • 微信小程序实现商城倒计时
  • 微信小程序实现批量倒计时功能
  • 微信小程序 倒计时组件实现代码
  • 微信小程序动态显示项目倒计时效果
  • 微信小程序之发送短信倒计时功能
  • 微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
  • 微信小程序实现倒计时60s获取验证码
  • 微信小程序倒计时功能实现代码
  • 微信小程序动态显示项目倒计时


  • 上一条:
    如何在微信小程序中实现Mixins方案
    下一条:
    微信小程序实现批量倒计时功能
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 2023年9月1日起:微信小程序必须备案才能上线运营(0个评论)
    • 腾讯官方客服回应了:微信好友上限约10000个!(0个评论)
    • 2023年做微信小程序的老铁注意:新增收费项、微信小程序获取手机号也收费了(0个评论)
    • 小程序开发之跳转微信直播示例api(0个评论)
    • 在uni_app中开发小程序之常用功能示例代码汇总(0个评论)
    • 近期文章
    • 在Nuxt3中如何减少import model声明及初始化加载models快速开发秘诀(0个评论)
    • 适用于 Laravel 的表单请求测试程序包(0个评论)
    • Laravel 10.25版本发布(0个评论)
    • 在go语言中实现生成文件的校验和功能代码示例(0个评论)
    • Laravel 11版本抢先看,看将有什么新功能发布(0个评论)
    • goose数据库迁移工具介绍及使用流程步骤(0个评论)
    • 中国程序员“翻墙”为海外软件公司打工,105.8万工资被罚没!转知乎(0个评论)
    • 在go语言gin框架中使用Sharding(Gorm分表中间件)实现分表流程步骤(0个评论)
    • 在PHP提高性能方式之开启OPCache扩展及OPCache配置参数详解(0个评论)
    • 在js的websocket客户端开发中遇到代码割裂情况解决方案(0个评论)
    • 近期评论
    • 路人 在

      php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..
    • 博主 在

      科学上网翻墙之v2rayN-Core客户端免费公益节点使用教程中评论 @ mashrdn 多切换几个节点测试,免费ssr是没那么稳..
    • mashrdn 在

      科学上网翻墙之v2rayN-Core客户端免费公益节点使用教程中评论 V2rayn免费节点添加上去了,youtobe无法打开网页,是怎么回事..
    • 张伟 在

      科学上网翻墙之v2rayN-Core客户端免费公益节点使用教程中评论 3q!有用,不过免费节点隔天就要去git上复制新的导进去..
    • 博主 在

      科学上网翻墙访问Google , 上外网神器佛跳墙VPN(永久免费)使用流程步骤中评论 该篇教程已不能用了,告知大家,免的老有老铁问我!..
    • 2016-10
    • 2017-10
    • 2018-01
    • 2020-03
    • 2021-06
    • 2021-10
    • 2022-03
    • 2023-02
    • 2023-06
    • 2023-07
    • 2023-08
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客