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


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 相关文章推荐
完美解决AJAX跨域问题
Nov 01 Javascript
jQuery实现购物车多物品数量的加减+总价计算
Jun 06 Javascript
jQuery实现3D文字特效的方法
Mar 10 Javascript
JavaScript获取数组最小值和最大值的方法
Jun 09 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
Jun 19 Javascript
JS+CSS实现精美的二级导航效果代码
Sep 17 Javascript
javascript函数命名的三种方式及区别介绍
Mar 22 Javascript
layer弹出层框架alert与msg详解
Mar 14 Javascript
p5.js入门教程之图片加载
Mar 20 Javascript
node puppeteer(headless chrome)实现网站登录
May 09 Javascript
node后端服务保活的实现
Nov 10 Javascript
vue使用exif获取图片经纬度的示例代码
Dec 11 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与MySQL开发中页面出现乱码的一种解决方法
2007/07/29 PHP
基于Discuz security.inc.php代码的深入分析
2013/06/03 PHP
php+mysql数据库查询实例
2015/01/21 PHP
以文件形式缓存php变量的方法
2015/06/26 PHP
Symfony的安装和配置方法
2016/03/17 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
基于jquery的blockui插件显示弹出层
2011/04/14 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
2011/09/29 Javascript
javascript date格式化示例
2013/09/25 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
jQuery UI设置固定日期选择特效代码分享
2015/08/27 Javascript
图解Sublime Text3使用技巧
2015/12/21 Javascript
jquery UI Datepicker时间控件冲突问题解决
2016/12/16 Javascript
jQuery实现百度登录框的动态切换效果
2017/04/21 jQuery
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
javascript cookie的基本操作(添加和删除)
2017/07/24 Javascript
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
微信禁止下拉查看URL的处理方法
2017/09/28 Javascript
React Native使用Modal自定义分享界面的示例代码
2017/10/31 Javascript
详解ES6语法之可迭代协议和迭代器协议
2018/01/13 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
[02:41]2015国际邀请赛中国区预选赛观战指南
2015/05/20 DOTA
Python的爬虫包Beautiful Soup中用正则表达式来搜索
2016/01/20 Python
Django读取Mysql数据并显示在前端的实例
2018/05/27 Python
padas 生成excel 增加sheet表的实例
2018/12/11 Python
python爬虫爬取微博评论案例详解
2019/03/27 Python
20行python代码实现人脸识别
2019/05/05 Python
python二元表达式用法
2019/12/04 Python
计算pytorch标准化(Normalize)所需要数据集的均值和方差实例
2020/01/15 Python
分享CSS3制作卡片式图片的方法
2016/07/08 HTML / CSS
2014年师德承诺书
2014/05/23 职场文书
老龙头导游词
2015/02/11 职场文书
Python实战之大鱼吃小鱼游戏的实现
2022/04/01 Python
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python
Python实现简单得递归下降Parser
2022/05/02 Python