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


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 相关文章推荐
Jquery AJAX 用于计算点击率(统计)
Jun 30 Javascript
JSONP 跨域共享信息
Aug 16 Javascript
商城常用滚动的焦点图效果代码简单实用
Mar 28 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
May 08 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
Jun 06 Javascript
jQuery中inArray方法注意事项分析
Jan 25 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
Mar 11 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
Mar 30 Javascript
js+html5实现canvas绘制网页时钟的方法
May 21 Javascript
基于BootStrap的图片轮播效果展示实例代码
May 23 Javascript
简单了解TypeScript中如何继承 Error 类
Jun 21 Javascript
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
微信小程序实现订单倒计时
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 Ctemplate引擎开发相关内容
2012/03/03 PHP
PHP+MySQL投票系统的设计和实现分享
2012/09/23 PHP
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
PHP编写学校网站上新生注册登陆程序的实例分享
2016/03/21 PHP
Yii2框架加载css和js文件的方法分析
2019/05/25 PHP
使用Rancher在K8S上部署高性能PHP应用程序的教程
2020/07/10 PHP
Avengerls vs Newbee BO3 第二场2.18
2021/03/10 DOTA
处理及遍历XML文档DOM元素属性及方法整理
2013/08/23 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
2014/02/27 Javascript
jquery.cookie.js使用指南
2015/01/05 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
jquery实现多条件筛选特效代码分享
2015/08/28 Javascript
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
javascript实现瀑布流动态加载图片原理
2016/08/12 Javascript
解决URL地址中的中文乱码问题的办法
2017/02/10 Javascript
Angular4编程之表单响应功能示例
2017/12/13 Javascript
vue数据初始化initState的实例详解
2019/04/11 Javascript
通过实例了解js函数中参数的传递
2019/06/15 Javascript
谈谈IntersectionObserver懒加载的具体使用
2019/10/15 Javascript
详解JavaScript中new操作符的解析和实现
2020/09/04 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
2020/12/20 Javascript
[04:28]2014DOTA2国际邀请赛 采访小兔子LGD挺进钥匙体育馆
2014/07/14 DOTA
python常用知识梳理(必看篇)
2017/03/23 Python
Python定时任务工具之APScheduler使用方式
2019/07/24 Python
Pytorch to(device)用法
2020/01/08 Python
python温度转换华氏温度实现代码
2020/12/06 Python
详解Python中的文件操作
2021/01/14 Python
英国足球店:UK Soccer Shop
2017/11/19 全球购物
英国汽车零件购物网站:GSF Car Parts
2019/05/23 全球购物
北大研究生linux应用求职信
2013/10/29 职场文书
电子商务专业学生职业生涯规划
2014/03/07 职场文书
最新大学生创业计划书写作攻略
2014/04/02 职场文书
党员个人剖析材料
2014/09/30 职场文书
原告代理词范文
2015/05/25 职场文书
Java 多态分析
2022/04/26 Java/Android