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


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 相关文章推荐
js导出table到excel同时兼容FF和IE示例
Sep 03 Javascript
详解jquery uploadify 上传文件
Nov 09 Javascript
jQuery学习笔记之jQuery原型属性和方法
Jun 09 Javascript
jquery实现鼠标滑过显示提示框的方法
Feb 05 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
Oct 26 Javascript
浅析jQuery中使用$所引发的问题
May 29 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
Nov 26 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
Dec 14 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
vue 使用html2canvas将DOM转化为图片的方法
Sep 11 Javascript
JS删除String里某个字符的方法
Jan 06 Javascript
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
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使用parse_url和parse_str解析URL
2015/02/22 PHP
Smarty模板引擎缓存机制详解
2016/05/23 PHP
CI框架封装的常用图像处理方法(缩略图,水印,旋转,上传等)
2016/11/22 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
List the UTC Time on a Computer
2007/06/11 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
2013/05/07 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
javascript设置连续两次点击按钮时间间隔的方法
2014/10/28 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
2016/12/08 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
angularjs 获取默认选中的单选按钮的value方法
2018/02/28 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
微信小程序中使用wxss加载图片并实现动画效果
2018/08/13 Javascript
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
Python文件与文件夹常见基本操作总结
2016/09/19 Python
python实现自动发送邮件
2018/06/20 Python
python3.6+selenium实现操作Frame中的页面元素
2019/07/16 Python
python函数参数(必须参数、可变参数、关键字参数)
2019/08/16 Python
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
使用Python实现正态分布、正态分布采样
2019/11/20 Python
Python迷宫生成和迷宫破解算法实例
2019/12/24 Python
python实现井字棋小游戏
2020/03/04 Python
Python %r和%s区别代码实例解析
2020/04/03 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
scrapy中如何设置应用cookies的方法(3种)
2020/09/22 Python
澳大利亚领先的内衣店:Bendon Lingerie澳大利亚
2020/05/15 全球购物
机电一体化大学生求职信
2013/11/08 职场文书
市场营销求职信范文
2014/02/21 职场文书
巾帼文明岗汇报材料
2014/12/24 职场文书
2016年社区“6.26”禁毒日宣传活动总结
2016/04/05 职场文书
2019年大学生职业生涯规划书最新范文
2019/03/25 职场文书
springboot新建项目pom.xml文件第一行报错的解决
2022/01/18 Java/Android
详解NumPy中的线性关系与数据修剪压缩
2022/05/25 Python