小程序实现列表多个批量倒计时


Posted in Javascript onJanuary 29, 2021

最近在写一个列表功能,列表中有倒计时的效果,网上没有可用的素材,以下是本人自己写的,如有问题,希望大家指出。

先来看看基本的效果

小程序实现列表多个批量倒计时

小程序中列表倒计时,类似活动倒计时列表,列表中有多个倒计时效果,且不冲突

先把时间打印出来,放在data中,然后在写计时器;如果先写计时器,然后把打印出来的时间放在data就会报错,setData不支持这种操作。

数据文件(dates.js,返回的时间数据是剩余时间)

var dates=[
 {
 dat:324235235
 },
 {
 dat:7200000
 },
 {
 dat:675875754
 }
]
 
module.exports = {
 datetime: dates
}

wxml文件(a.wxml)

<view wx:for="{{wearList.datetime}}" wx:for-item="item" wx:key="id">
 <view class='dates'>{{item.difftime}}</view>
</view>

js文件(a.js)

var dates=require('../utils/dates.js');//数据文件
 
Page({
 data:{},
 onShow(a){
 // console.log(dates.datetime)//数据
 let that=this;
 let len=dates.datetime.length;//时间数据长度
 
 function nowTime() {//时间函数
  // console.log(a)
  for (var i = 0; i < len; i++) {
  var intDiff = dates.datetime[i].dat;//获取数据中的时间戳
  // console.log(intDiff)
  var day=0, hour=0, minute=0, second=0;  
  if(intDiff > 0){//转换时间
   day = Math.floor(intDiff / (60 * 60 * 24));
   hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
   minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
   second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
   if(hour <=9) hour = '0' + hour;
   if (minute <= 9) minute = '0' + minute;
   if (second <= 9) second = '0' + second;
   dates.datetime[i].dat--;
   var str=hour+':'+minute+':'+ second 
   // console.log(str) 
  }else{
   var str = "已结束!";
   clearInterval(timer); 
  }
  // console.log(str);
  dates.datetime[i].difftime = str;//在数据中添加difftime参数名,把时间放进去
  }
  that.setData({
  wearList: dates
  })
  // console.log(that)
 }
 
 nowTime();
 var timer = setInterval(nowTime, 1000);
 
 }
})

小程序中列表倒计时,类似活动倒计时列表,列表中有多个倒计时效果,且不冲突

先把时间打印出来,放在data中,然后在写计时器;如果先写计时器,然后把打印出来的时间放在data就会报错,setData不支持这种操作。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的一个简单的脚本验证插件
Apr 05 Javascript
JavaScript 学习历程和心得分享
Dec 12 Javascript
Javascript操作cookie的函数代码
Oct 03 Javascript
Jquery读取URL参数小例子
Aug 30 Javascript
javascript的创建多行字符串的7种方法
Apr 29 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
Oct 14 Javascript
javascript转换静态图片,增加粒子动画效果
May 28 Javascript
JSON对象转化为字符串详解
Aug 11 Javascript
浅谈箭头函数写法在ReactJs中的使用
Aug 22 Javascript
JS中Attr的用法详解
Oct 09 Javascript
小程序getLocation需要在app.json中声明permission字段
Apr 04 Javascript
JavaScript实现简单动态表格
Dec 02 Javascript
记一次vue-webpack项目优化实践详解
Feb 17 #Javascript
Vuepress 搭建带评论功能的静态博客的实现
Feb 17 #Javascript
详解javascript replace高级用法
Feb 17 #Javascript
Nuxt.js 数据双向绑定的实现
Feb 17 #Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
Feb 17 #Javascript
JavaScript遍历DOM元素的常见方式示例
Feb 16 #Javascript
原生JS实现逼真的图片3D旋转效果详解
Feb 16 #Javascript
You might like
php数组函数序列之array_unique() - 去除数组中重复的元素值
2011/10/29 PHP
PHP登陆后跳转到登陆前页面实现思路及代码
2014/01/17 PHP
ThinkPHP字符串函数及常用函数汇总
2014/07/18 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
PHP GD库相关图像生成和处理函数小结
2016/09/30 PHP
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
javascript基于DOM实现权限选择实例分析
2015/05/14 Javascript
Bootstrap布局方式详解
2016/05/27 Javascript
使用jQuery,Angular实现登录界面验证码详解
2017/04/27 jQuery
vue-loader教程介绍
2017/06/14 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
2020/03/27 Javascript
javascript浏览器用户代理检测脚本实现方法
2017/10/27 Javascript
JS 中document.write()的用法和清空的原因浅析
2017/12/04 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
15个顶级开源JavaScript框架和库
2018/10/10 Javascript
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
在windows系统中实现python3安装lxml
2016/03/23 Python
python装饰器使用实例详解
2019/12/14 Python
python打开音乐文件的实例方法
2020/07/21 Python
python 偷懒技巧——使用 keyboard 录制键盘事件
2020/09/21 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
纽约手袋品牌:KARA
2018/03/18 全球购物
异常和异常类的概念
2014/09/12 面试题
物业管理公司实习生自我鉴定
2013/09/19 职场文书
公司拓展活动方案
2014/02/13 职场文书
企业节能减排实施方案
2014/03/19 职场文书
商超业务员岗位职责
2015/02/13 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书
让子弹飞观后感
2015/06/11 职场文书
六年级语文教学反思
2016/03/03 职场文书
数据库的高级查询六:表连接查询:外连接(左外连接,右外连接,UNION关键字,连接中ON与WHERE的不同)
2021/04/05 MySQL
使用goaccess分析nginx日志的详细方法
2021/07/09 Servers
JS前端监控采集用户行为的N种姿势
2022/07/23 Javascript