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


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 相关文章推荐
JS处理VBArray的函数使用说明
May 11 Javascript
利用javascript数组长度循环数组内所有元素
Dec 27 Javascript
js获取当前页面路径示例讲解
Jan 08 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
Feb 18 Javascript
JavaScript 节流函数 Throttle 详解
Jul 04 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
Jul 15 Javascript
详解angularjs获取元素以及angular.element()用法
Jul 25 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 Javascript
uni-app使用countdown插件实现倒计时
Nov 01 Javascript
微信小程序实现加入购物车滑动轨迹
Nov 18 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
Dec 07 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
php上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
分享十款最出色的PHP安全开发库中文详细介绍
2015/03/22 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
Js操作Select大全(取值、设置选中等等)
2013/10/29 Javascript
jquery滚动条插件jScrollPane的使用介绍
2013/11/08 Javascript
无限树Jquery插件zTree的常用功能特性总结
2014/09/11 Javascript
JavaScript性能优化之小知识总结
2015/11/20 Javascript
javascript类型系统——undefined和null全面了解
2016/07/13 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
微信小程序开发之IOS和Android兼容的问题
2017/09/26 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
angularjs 的数据绑定实现原理
2018/07/02 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
p5.js临摹动态图形实现方法详解
2019/10/23 Javascript
js刷新页面location.reload()用法详解
2019/12/09 Javascript
js get和post请求实现代码解析
2020/02/06 Javascript
javascript实现数字时钟效果
2021/02/06 Javascript
[49:21]TNC vs VG 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第三场 8.20.mp4
2019/08/22 DOTA
python socket 超时设置 errno 10054
2014/07/01 Python
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
Pycharm编辑器技巧之自动导入模块详解
2017/07/18 Python
python爬虫之urllib,伪装,超时设置,异常处理的方法
2018/12/19 Python
pytorch索引查找 index_select的例子
2019/08/18 Python
PyCharm设置Ipython交互环境和宏快捷键进行数据分析图文详解
2020/04/23 Python
python模块如何查看
2020/06/16 Python
pandas实现导出数据的四种方式
2020/12/13 Python
详解Django关于StreamingHttpResponse与FileResponse文件下载的最优方法
2021/01/07 Python
英国轻奢珠宝品牌:Astley Clarke
2016/12/18 全球购物
大学生的网络创业计划书
2013/12/26 职场文书
模具专业自荐信
2014/05/29 职场文书
党政领导班子四风问题对照检查材料思想汇报
2014/10/02 职场文书
会计师事务所实习证明
2014/11/16 职场文书
工作推荐信模板
2015/03/25 职场文书
赵氏孤儿观后感
2015/06/09 职场文书
Python编解码问题及文本文件处理方法详解
2021/06/20 Python
Python 数据可视化之Matplotlib详解
2021/11/02 Python