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


Posted in Javascript onNovember 01, 2020

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

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

1.实现思路

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

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

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

效果图:

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

2.实现中的难点

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

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

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

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

index.wxml

<view class="item">单条倒计时:{{time}}</view>
 <view class="item">多条倒计时</view>
 <view class='no'>暂无任何记录</view>
 <view class="content">
 <block wx:for="{{listData}}"wx:key="idx" wx:for-item="item" wx:for-index="{{idx}}">
 <view class="tip {{item.time<=0?'isShow':''}}">
 <view class="dis">
 <view class='dis_time left'>剩余时间:{{item.countDown}}</view>
 </view>
 </view>
 </block>
</view>

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;
 }
})

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

Javascript 相关文章推荐
限制复选框的最大可选数
Jul 01 Javascript
拖拉表格的JS函数
Nov 20 Javascript
javascript this用法小结
Dec 19 Javascript
js禁止小键盘输入数字功能代码
Aug 01 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
Nov 30 Javascript
javascript函数中参数传递问题示例探讨
Jul 31 Javascript
jQuery实现表格行上下移动和置顶效果
Jun 05 Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 Javascript
Vue-Router进阶之滚动行为详解
Sep 13 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 Javascript
详解在Node.js中发起HTTP请求的5种方法
Jan 10 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
Apr 30 Javascript
Vue监听页面刷新和关闭功能
Jun 20 #Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
Jun 20 #Javascript
js实现页面多个日期时间倒计时效果
Jun 20 #Javascript
vue实现绑定事件的方法实例代码详解
Jun 20 #Javascript
javascript实现5秒倒计时并跳转功能
Jun 20 #Javascript
JS实现的简单tab切换功能完整示例
Jun 20 #Javascript
Vue 页面权限控制和登陆验证功能的实例代码
Jun 20 #Javascript
You might like
php下实现伪 url 的超简单方法[转]
2007/09/24 PHP
PHP 反射机制实现动态代理的代码
2008/10/22 PHP
php中过滤非法字符的具体实现
2013/10/29 PHP
PHP生成随机密码方法汇总
2015/08/27 PHP
php并发加锁示例
2016/10/17 PHP
使用CSS3实现字体颜色渐变的实现
2021/03/09 HTML / CSS
疯掉了,尽然有js写的操作系统
2007/04/23 Javascript
jQuery textarea的长度进行验证
2009/05/06 Javascript
javascript自启动函数的问题探讨
2013/10/05 Javascript
JavaScript中的数组操作介绍
2014/12/30 Javascript
jQuery大于号(&gt;)选择器的作用解释
2015/01/13 Javascript
js实现透明度渐变效果的方法
2015/04/10 Javascript
JavaScript判断前缀、后缀是否是空格的方法
2015/04/15 Javascript
js实现简单的验证码
2015/12/25 Javascript
javascript+css3 实现动态按钮菜单特效
2016/02/06 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
Vue数字输入框组件使用方法详解
2020/02/10 Javascript
Python常见MongoDB数据库操作实例总结
2018/07/24 Python
python列表,字典,元组简单用法示例
2019/07/11 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
python tkinter图形界面代码统计工具
2019/09/18 Python
pytorch如何冻结某层参数的实现
2020/01/10 Python
使用python实现下载我们想听的歌曲,速度超快
2020/07/09 Python
matplotlib 画双轴子图无法显示x轴的解决方法
2020/07/27 Python
Python GUI之tkinter窗口视窗教程大集合(推荐)
2020/10/20 Python
前端水印的简单实现代码示例
2020/12/02 HTML / CSS
英国No.1文具和办公用品在线:Euroffice
2016/09/21 全球购物
美国最大的旗帜经销商:Carrot-Top
2018/02/26 全球购物
捐助贫困学生倡议书
2014/05/16 职场文书
女生节标语
2014/06/26 职场文书
学校综治宣传月活动总结
2014/07/02 职场文书
奶茶店创业计划书
2014/08/14 职场文书
先进单位事迹材料
2014/12/25 职场文书
个人总结与自我评价2015
2015/03/11 职场文书
毕业论文指导老师意见
2015/06/04 职场文书
闪闪的红星观后感
2015/06/08 职场文书