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


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 相关文章推荐
Riot.js 快速的JavaScript单元测试框架
Nov 09 Javascript
jQuery中contents()方法用法实例
Jan 08 Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 Javascript
jQuery代码实现对话框右上角菜单带关闭×
May 03 Javascript
javascript 四十条常用技巧大全
Sep 09 Javascript
js实现省份下拉菜单效果
Feb 15 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
Mar 07 Javascript
Vue 单文件中的数据传递示例
Mar 21 Javascript
微信小程序开发animation心跳动画效果
Aug 16 Javascript
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
Vue 请求传公共参数的操作
Jul 31 Javascript
js 执行上下文和作用域的相关总结
Feb 08 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
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
PHP字符串的连接的简单实例
2013/12/30 PHP
php中常见的sql攻击正则表达式汇总
2014/11/06 PHP
php单例模式实现方法分析
2015/03/14 PHP
php计算多维数组中所有值总和的方法
2015/06/24 PHP
老生常谈文本文件和二进制文件的区别
2017/02/27 PHP
CI(CodeIgniter)框架视图中加载视图的方法
2017/03/24 PHP
tp5框架内使用tp3.2分页的方法分析
2019/05/05 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
html中table数据排序的js代码
2011/08/09 Javascript
Javascript设计模式之观察者模式(推荐)
2016/03/29 Javascript
微信QQ的二维码登录原理js代码解析
2016/06/23 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
2016/12/08 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
使用nodejs下载风景壁纸
2017/02/05 NodeJs
webpack入门+react环境配置
2017/02/08 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
动态内存分配导致影响Javascript性能的问题
2018/12/18 Javascript
vue中组件的3种使用方式详解
2019/03/23 Javascript
微信小程序系列之自定义顶部导航功能
2019/05/21 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
vue-cli和v-charts实现可视化图表过程解析
2019/10/08 Javascript
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
python队列queue模块详解
2018/04/27 Python
对python中矩阵相加函数sum()的使用详解
2019/01/28 Python
Pycharm+django2.2+python3.6+MySQL实现简单的考试报名系统
2019/09/05 Python
18个Python脚本可加速你的编码速度(提示和技巧)
2019/10/17 Python
python利用platform模块获取系统信息
2020/10/09 Python
Numpy实现卷积神经网络(CNN)的示例
2020/10/09 Python
CSS3支持IE6, 7, and 8的边框border属性
2012/12/28 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
2020/04/14 HTML / CSS
智能钱包:Ekster
2019/11/21 全球购物
毕业自荐书
2013/12/09 职场文书
运动会入场解说词300字
2014/01/25 职场文书
幼儿园的门卫岗位职责
2014/04/10 职场文书
维稳工作情况汇报
2014/10/27 职场文书