微信小程序实现批量倒计时功能


Posted in Javascript onNovember 01, 2020

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

//适用于商品列表倒计时/** * end_time int 结束时间 * param int 数组键 */

1.展示效果如下:

微信小程序实现批量倒计时功能

2.wxml代码:

<p class="promotion-label-tits">仅{{item.endtime}}</p>

3.js代码: 

//封装的倒计时方法
//批量倒计时
function grouponcountdown(that, end_time, param) {
 var EndTime = new Date(end_time).getTime();
 // console.log(EndTime);
 var NowTime = new Date().getTime();
 
 var total_micro_second = EndTime - NowTime;
 
 var groupons = that.data.groupon;
 // console.log(groupons);
 groupons[param].endtime = dateformats(total_micro_second);
 if (total_micro_second <= 0) {
 groupons[param].endtime = "已结束"
 }
 that.setData({
 groupon: groupons
 })
 setTimeout(function () {
 grouponcountdown(that, end_time, param);
 }, 1000)
}
 
// 时间格式化输出,每1s都会调用一次
function dateformats(micro_second) {
 // 总秒数
 var second = Math.floor(micro_second / 1000);
 // 天数
 var day = Math.floor(second / 3600 / 24);
 // 小时
 var hr = Math.floor(second / 3600 % 24);
 var hrStr = hr.toString();
 if (hrStr.length == 1) hrStr = '0' + hrStr;
 
 // 分钟
 var min = Math.floor(second / 60 % 60);
 var minStr = min.toString();
 if (minStr.length == 1) minStr = '0' + minStr;
 
 // 秒
 var sec = Math.floor(second % 60);
 var secStr = sec.toString();
 if (secStr.length == 1) secStr = '0' + secStr;
 
 if (day <= 1) {
 return "剩 " + hrStr + ":" + minStr + ":" + secStr;
 } else {
 return "剩 " + day + " 天 " + hrStr + ":" + minStr + ":" + secStr;
 }
}
//end
 
var app=getApp()
Page({
 
 /**
 * 页面的初始数据
 */
 data: {
  collageTeamlist : {}
 },
 
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
  app.showLoading();
  var that = this
  
  wx.request({
   success:function(res){
    var grouponList = request.data.collageTeamlist
    // console.log(grouponList);
    for (var i = 0; i < grouponList.length; i++) {
     var lack_num = grouponList[i].create_num - grouponList[i].current_num
     grouponList[i].lack_num = lack_num
    }
 
    that.setData({
     groupon: grouponList
    })
    var data = that.data.groupon
    //列表获取到数据进行遍历
    for (var i = 0; i < data.length; i++) {
     var end_time = data[i].end_time.replace(/-/g, '/')
     grouponcountdown(that,end_time, i)
    }
   },
  })
 },

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

Javascript 相关文章推荐
JavaScript prototype属性深入介绍
Nov 27 Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 Javascript
ionic 上拉菜单(ActionSheet)实例代码
Jun 06 Javascript
JS中sort函数排序用法实例分析
Jun 16 Javascript
ajax异步请求详解
Jan 06 Javascript
jQuery中DOM节点删除之empty与remove
Jan 20 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
Apr 21 Javascript
使用Jenkins部署React项目的方法步骤
Mar 11 Javascript
JavaScript装饰者模式原理与用法实例详解
Mar 09 Javascript
bootstrap实现tab选项卡切换
Aug 09 Javascript
vue element ui validate 主动触发错误提示操作
Sep 21 Javascript
uni-app 自定义底部导航栏的实现
Dec 11 Javascript
微信小程序实现订单倒计时
Nov 01 #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
You might like
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
php将会员数据导入到ucenter的代码
2010/07/18 PHP
php在linux下检测mysql同步状态的方法
2015/01/15 PHP
PHP+AJAX实现投票功能的方法
2015/09/28 PHP
PHP实现微信支付(jsapi支付)流程步骤详解
2018/03/15 PHP
Javascript模板技术
2007/04/27 Javascript
用js实现键盘方向键翻页功能的代码
2007/06/03 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
简单封装js的dom查询实例代码
2016/07/08 Javascript
Vue-Router实现页面正在加载特效方法示例
2017/02/12 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
2017/02/24 Javascript
Vue.js实现实例搜索应用功能详细代码
2017/08/24 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
2018/03/12 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
2020/11/19 Javascript
详解Python的Django框架中Manager方法的使用
2015/07/21 Python
python实现kNN算法
2017/12/20 Python
使用urllib库的urlretrieve()方法下载网络文件到本地的方法
2018/12/19 Python
Python 使用Numpy对矩阵进行转置的方法
2019/01/28 Python
Python学习笔记之视频人脸检测识别实例教程
2019/03/06 Python
pip 安装库比较慢的解决方法(国内镜像)
2019/10/06 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
python实现简单坦克大战
2020/03/27 Python
解决Pytorch自定义层出现多Variable共享内存错误问题
2020/06/28 Python
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
预备党员入党思想汇报
2014/01/04 职场文书
班主任工作经验交流材料
2014/05/13 职场文书
洗手间标语
2014/06/23 职场文书
总经理岗位职责说明书
2014/07/30 职场文书
邹越演讲观后感
2015/06/15 职场文书
2015毕业设计工作总结
2015/07/24 职场文书
Python生成九宫格图片的示例代码
2021/04/14 Python