微信小程序实现团购或秒杀批量倒计时


Posted in Javascript onNovember 01, 2020

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

效果图

微信小程序实现团购或秒杀批量倒计时

实现思路

微信小程序实现倒计时,可以将倒计时的时间进行每一秒的计算和渲染!

JS

  1. 模拟商品列表数据 goodsList;
  2. 在 onLoad 周期函数中对活动结束时间进行提取;
  3. 建立时间格式化函数 timeFormat;
  4. 建立倒计时函数 countDown;
  5. 在 onLoad 周期函数的提取结尾执行倒计时函数 countDown。

倒计时函数详解

  1. 获取当前时间,同时得到活动结束时间数组;
  2. 循环活动结束时间数组,计算每个商品活动结束时间的倒计时天、时、分、秒;
  3. 用 setData 方法刷新数据;
  4. 每个一秒执行一次倒计时函数 setTimeout(this.countDown,1000);
let goodsList = [
 {actEndTime: '2018-05-01 10:00:43'},
 {actEndTime: '2018-04-01 11:00:00'},
 {actEndTime: '2018-06-01 12:45:56'},
 {actEndTime: '2018-07-01 15:00:23'},
 {actEndTime: '2018-05-23 17:00:22'},
 {actEndTime: '2018-05-14 19:00:44'},
 {actEndTime: '2018-05-21 21:00:34'},
 {actEndTime: '2018-06-17 09:00:37'},
 {actEndTime: '2018-03-21 05:00:59'},
 {actEndTime: '2018-04-19 07:00:48'},
 {actEndTime: '2018-04-28 03:00:11'}
]
Page({
 data: {
 countDownList: [],
 actEndTimeList: []
 },
 onLoad(){
 let endTimeList = [];
 // 将活动的结束时间参数提成一个单独的数组,方便操作
 goodsList.forEach(o => {endTimeList.push(o.actEndTime)})
 this.setData({ actEndTimeList: endTimeList});
 // 执行倒计时函数
 this.countDown();
 },
 timeFormat(param){//小于10的格式化函数
 return param < 10 ? '0' + param : param; 
 },
 countDown(){//倒计时函数
 // 获取当前时间,同时得到活动结束时间数组
 let newTime = new Date().getTime();
 let endTimeList = this.data.actEndTimeList;
 let countDownArr = [];

 // 对结束时间进行处理渲染到页面
 endTimeList.forEach(o => {
 let endTime = new Date(o).getTime();
 let obj = null;
 // 如果活动未结束,对时间进行处理
 if (endTime - newTime > 0){
 let time = (endTime - newTime) / 1000;
 // 获取天、时、分、秒
 let day = parseInt(time / (60 * 60 * 24));
 let hou = parseInt(time % (60 * 60 * 24) / 3600);
 let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
 let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
 obj = {
  day: this.timeFormat(day),
  hou: this.timeFormat(hou),
  min: this.timeFormat(min),
  sec: this.timeFormat(sec)
 }
 }else{//活动已结束,全部设置为'00'
 obj = {
  day: '00',
  hou: '00',
  min: '00',
  sec: '00'
 }
 }
 countDownArr.push(obj);
 })
 // 渲染,然后每隔一秒执行一次倒计时函数
 this.setData({ countDownList: countDownArr})
 setTimeout(this.countDown,1000);
 }
})

WXML

简单的布局和居中显示。

<view class='tui-countdown-content' wx:for="{{countDownList}}" wx:key="countDownList">
 剩余
 <text class='tui-conutdown-box'>{{item.day}}</text>天
 <text class='tui-conutdown-box'>{{item.hou}}</text>时
 <text class='tui-conutdown-box'>{{item.min}}</text>分
 <text class='tui-conutdown-box tui-countdown-bg'>{{item.sec}}</text>秒
</view>

WXSS

page{background-color: #eee;}
.tui-countdown-content{
 height: 50px;
 line-height: 50px;
 text-align: center;
 background-color: #fff;
 margin-top: 15px;
 padding: 0 15px;
 font-size: 18px;
}
.tui-conutdown-box{
 display: inline-block;
 height: 26px;
 width: 26px;
 line-height: 26px;
 text-align: center;
 background-color: #000;
 color: #fff;
 margin: 0 5px;
}
.tui-countdown-bg{
 background-color: #DF0101;
}

实际应用效果图

由于活动已结束,所以时间全部为'00'

微信小程序实现团购或秒杀批量倒计时

总结

由于微信小程序的数据处理比HTML的更加方便快捷,所以在实现相同效果的时候需要对应的转化一下思路,可能更好的解决问题。

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

Javascript 相关文章推荐
为数据添加append,remove功能
Oct 03 Javascript
Extjs中常用表单介绍与应用
Jun 07 Javascript
在多个页面使用同一个HTML片段《续》
Mar 04 Javascript
JavaScript中的eval()函数详解
Aug 22 Javascript
JavaScript多线程详解
Aug 12 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
May 08 Javascript
JS实现无缝循环marquee滚动效果
May 22 Javascript
js CSS3实现卡牌旋转切换效果
Jul 04 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
用vue构建多页面应用的示例代码
Sep 20 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
jQuery实现简单弹幕制作
Dec 10 jQuery
微信小程序实现倒计时补零功能
Jul 09 #Javascript
Angular6中使用Swiper的方法示例
Jul 09 #Javascript
微信小程序实现自定义picker选择器弹窗内容
May 26 #Javascript
微信小程序实现漂亮的弹窗效果
May 26 #Javascript
Angular通过指令动态添加组件问题
Jul 09 #Javascript
js实现左右两侧浮动广告
Jul 09 #Javascript
vue-router中scrollBehavior的巧妙用法
Jul 09 #Javascript
You might like
农民和部队如何穿矿
2020/03/04 星际争霸
php中用文本文件做数据库的实现方法
2008/03/27 PHP
PHP实现生成透明背景的PNG缩略图函数分享
2014/07/08 PHP
PHP中提问频率最高的11个面试题和答案
2014/09/02 PHP
php实现单笔转账到支付宝功能
2018/10/09 PHP
PHP检查URL包含特定字符串实例方法
2019/02/11 PHP
兼容FireFox 的 js 日历 支持时间的获取
2009/03/04 Javascript
js 屏蔽鼠标右键脚本附破解方法
2009/12/03 Javascript
JQuery 弹出框定位实现方法
2010/12/02 Javascript
基于KMP算法JavaScript的实现方法分析
2013/05/03 Javascript
JavaScript数据类型检测代码分享
2015/01/26 Javascript
AngularJS初始化静态模板详解
2016/01/14 Javascript
javascript设计模式之module(模块)模式
2016/08/19 Javascript
js封装tab标签页实例分享
2016/12/19 Javascript
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
2020/05/17 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
批处理与python代码混合编程的方法
2016/05/19 Python
Python socket网络编程TCP/IP服务器与客户端通信
2017/01/05 Python
django使用图片延时加载引起后台404错误
2017/04/18 Python
Python学习之用pygal画世界地图实例
2017/12/07 Python
解决python3 网络请求路径包含中文的问题
2018/05/10 Python
python numpy实现rolling滚动案例
2020/06/08 Python
将pycharm配置为matlab或者spyder的用法说明
2020/06/08 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
企划专员岗位职责
2013/12/09 职场文书
2014党委书记四风对照检查材料思想汇报
2014/09/21 职场文书
销售人员工作自我评价
2014/09/21 职场文书
意外伤害赔偿协议书范本
2014/09/28 职场文书
幼儿园2014年度工作总结
2014/11/10 职场文书
巾帼文明岗事迹材料
2014/12/24 职场文书
分享几个JavaScript运算符的使用技巧
2021/04/24 Javascript
golang 如何通过反射创建新对象
2021/04/28 Golang
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python
Win11控制面板快捷键是什么?Win11打开控制面板的方法汇总
2022/07/07 数码科技