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


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简单实现让文本框内容逐个字的显示出来
Oct 22 Javascript
js获得页面的高度和宽度的方法
Feb 23 Javascript
JavaScript 开发工具webstrom使用指南
Dec 09 Javascript
JavaScript实现表格点击排序的方法
May 11 Javascript
JQuery实现动态操作表格
Jan 11 Javascript
JS字符串按逗号和回车分隔的方法
Apr 25 Javascript
bootstrap响应式工具使用详解
Nov 29 Javascript
浅谈Vue 性能优化之深挖数组
Dec 11 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
Dec 21 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
May 09 Javascript
解决Layui数据表格显示无数据提示的问题
Nov 14 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
Dec 09 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的单引号和双引号 字符串效率
2009/05/27 PHP
改写ThinkPHP的U方法使其路由下分页正常
2014/07/02 PHP
php使用递归函数实现数字累加的方法
2015/03/16 PHP
最新最全PHP生成制作验证码代码详解(推荐)
2016/06/12 PHP
PDO::lastInsertId讲解
2019/01/29 PHP
学习ExtJS accordion布局
2009/10/08 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
2020/04/04 Javascript
jQuery标签替换函数replaceWith()的使用例子
2014/08/28 Javascript
比较常见的javascript中定义函数的区别
2015/11/09 Javascript
TypeScript学习之强制类型的转换
2016/12/27 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
2018/09/04 Javascript
JS实现页面鼠标点击出现图片特效
2020/08/19 Javascript
Python实现获取邮箱内容并解析的方法示例
2018/06/16 Python
django 基于中间件实现限制ip频繁访问过程详解
2019/07/30 Python
python实现自动化报表功能(Oracle/plsql/Excel/多线程)
2019/12/02 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
Xadmin+rules实现多选行权限方式(级联效果)
2020/04/07 Python
自学python用什么系统好
2020/06/23 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
发现两个有趣的CSS3动画效果
2013/08/14 HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
2019/12/03 HTML / CSS
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
荣耀商城:HIHONOR
2020/11/03 全球购物
学校岗位设置方案
2014/01/16 职场文书
降消项目实施方案
2014/03/30 职场文书
高考寄语大全
2014/04/08 职场文书
通信工程求职信
2014/07/16 职场文书
基层党员对照检查材料
2014/09/24 职场文书
公司前台接待岗位职责
2015/04/03 职场文书
天气温馨提示语
2015/07/14 职场文书
2015年幼儿教育工作总结
2015/07/24 职场文书
《刷子李》教学反思
2016/02/20 职场文书
决心书格式及范文
2019/06/24 职场文书
python 如何执行控制台命令与操作剪切板
2021/05/20 Python