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


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 call和apply方法
Nov 24 Javascript
常见JS效果之图片减速度滚动实现代码
Dec 08 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
May 07 Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 Javascript
bootstrap3 兼容IE8浏览器!
May 02 Javascript
JS实现简单的右下角弹出提示窗口完整实例
Jun 21 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 Javascript
vue.js实现含搜索的多种复选框(附源码)
Mar 23 Javascript
React Router v4 入坑指南(小结)
Apr 08 Javascript
微信小程序如何实现五星评价功能
Oct 15 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
Jul 17 Javascript
js实现简单选项卡制作
Aug 05 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 array_multisort()函数的使用札记
2011/07/03 PHP
ThinkPHP之N方法实例详解
2014/06/20 PHP
thinkPHP3.2使用RBAC实现权限管理的实现
2019/08/27 PHP
php实现对短信验证码发送次数的限制实例讲解
2021/03/04 PHP
js或css文件后面跟参数的原因说明
2010/01/09 Javascript
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
2010/04/25 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
JavaScript中setInterval的用法总结
2013/11/20 Javascript
node.js学习总结之调式代码的方法
2014/06/25 Javascript
实现图片预加载的三大方法及优缺点分析
2014/11/19 Javascript
javascript实现简单的省市区三级联动
2015/05/14 Javascript
全面解析Bootstrap表单使用方法(表单样式)
2015/11/24 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
2016/05/31 Javascript
关于动态执行代码(js的Eval)实例详解
2016/08/15 Javascript
AngularJS 过滤器(自带和自建)详解
2016/09/19 Javascript
详解handlebars+require基本使用方法
2016/12/21 Javascript
canvas实现简易的圆环进度条效果
2017/02/28 Javascript
浅谈vue中慎用style的scoped属性
2017/11/28 Javascript
微信小程序的授权实现过程解析
2019/08/02 Javascript
Python获取Linux系统下的本机IP地址代码分享
2014/11/07 Python
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
Python中optparser库用法实例详解
2018/01/26 Python
python爬虫开发之selenium模块详细使用方法与实例全解
2020/03/09 Python
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
将HTML5 Canvas的内容保存为图片借助toDataURL实现
2013/05/20 HTML / CSS
德国低价购买灯具和家具网站:Style-home.de
2016/11/25 全球购物
商务日语专业毕业生求职信
2013/10/26 职场文书
竞选部门副经理的自荐书范文
2014/02/11 职场文书
乡村文明行动实施方案
2014/03/29 职场文书
中学生勤俭节约倡议书
2015/04/29 职场文书
学习经验交流会总结
2015/11/02 职场文书
数据结构课程设计心得体会
2016/01/15 职场文书
在 HTML 页面中使用 React的场景分析
2022/01/18 Javascript
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL