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


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 相关文章推荐
AngularJS基础 ng-mouseover 指令简单示例
Aug 02 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
Dec 04 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 Javascript
Vue 进阶教程之v-model详解
May 06 Javascript
js实现方块上下左右移动效果
Aug 17 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
Oct 24 Javascript
详细分析JS函数去抖和节流
Dec 05 Javascript
JS实现简单的浮动碰撞效果示例
Dec 28 Javascript
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
Fundebug支持监控微信小程序HTTP请求错误的方法
Feb 21 Javascript
详解ES6中的Map与Set集合
Mar 22 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
用libtemplate实现静态网页生成
2006/10/09 PHP
支持oicq头像的留言簿(二)
2006/10/09 PHP
PHP中使用file_get_contents抓取网页中文乱码问题解决方法
2014/12/17 PHP
PHP实现链式操作的核心思想
2015/06/23 PHP
PHP采用超长(超大)数字运算防止数字以科学计数法显示的方法
2016/04/01 PHP
PHP计算数组中值的和与乘积的方法(array_sum与array_product函数)
2016/04/01 PHP
PHP中快速生成随机密码的几种方式
2017/04/17 PHP
PHP解析url并得到url参数方法总结
2018/10/11 PHP
showModelessDialog()使用详解
2006/09/07 Javascript
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
javascript创建函数的20种方式汇总
2015/06/23 Javascript
深入理解JavaScript单体内置对象
2016/06/06 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
2017/05/02 Javascript
浅谈vue2 单页面如何设置网页title
2017/11/08 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
Django框架中处理URLconf中特定的URL的方法
2015/07/20 Python
基于Python实现文件大小输出
2016/01/11 Python
centos6.4下python3.6.1安装教程
2017/07/21 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
Python3实现mysql连接和数据框的形成(实例代码)
2020/01/17 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
超级实用的8个Python列表技巧
2020/08/24 Python
HTML5引入的新数组TypedArray介绍
2012/12/24 HTML / CSS
使用HTML5 Canvas API绘制弧线的教程
2016/03/22 HTML / CSS
文秘专业毕业生就业推荐信
2013/11/08 职场文书
建筑工程技术应届生求职信
2013/11/17 职场文书
个人委托书范本
2014/04/02 职场文书
体育系毕业生自荐信
2014/06/28 职场文书
2015年试用期工作总结范文
2015/05/28 职场文书
2016幼儿教师自荐信范文
2016/01/28 职场文书
《花钟》教学反思
2016/02/17 职场文书
pytorch加载预训练模型与自己模型不匹配的解决方案
2021/05/13 Python