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


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 相关文章推荐
你所要知道JS(DHTML)中的一些技巧
Jan 09 Javascript
Javascript图像处理思路及实现代码
Dec 25 Javascript
javaScript基础语法介绍
Feb 28 Javascript
理解Javascript的call、apply
Dec 16 Javascript
JQuery Mobile实现导航栏和页脚
Mar 09 Javascript
浅谈JS中String()与 .toString()的区别
Oct 20 Javascript
Bootstrap文件上传组件之bootstrap fileinput
Nov 25 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 Javascript
Vue按需加载的具体实现
Dec 02 Javascript
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
js实现多图和单图上传显示
Dec 18 Javascript
js实现九宫格布局效果
May 28 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版)
2006/10/09 PHP
PHP导入导出Excel代码
2015/07/07 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
在UpdatePanel内jquery easyui效果失效的解决方法
2010/04/11 Javascript
jQuery Clone Bug解决代码
2010/12/22 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
2011/03/03 Javascript
关于jQuery中.attr()和.prop()的问题探讨
2013/09/06 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
NodeJS实现客户端js加密
2017/01/09 NodeJs
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
vue2.0中click点击当前li实现动态切换class
2017/06/21 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
2017/12/27 Javascript
JavaScript模拟实现自由落体效果
2018/08/28 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
2019/05/14 Javascript
微信小程序如何调用图片接口API并居中显示
2019/06/29 Javascript
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
使用python统计文件行数示例分享
2014/02/21 Python
python字符串排序方法
2014/08/29 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
python的sys.path模块路径添加方式
2020/03/09 Python
Idea安装python显示无SDK问题解决方案
2020/08/12 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
建筑专业自荐信范文
2014/01/05 职场文书
放飞梦想演讲稿
2014/05/05 职场文书
党员承诺践诺书
2014/05/20 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
委托书英文
2015/01/28 职场文书
放射科岗位职责
2015/02/14 职场文书
酒店销售经理岗位职责
2015/04/02 职场文书
致运动员赞词
2015/07/22 职场文书
Python实战之实现康威生命游戏
2021/04/26 Python
在 HTML 页面中使用 React的场景分析
2022/01/18 Javascript
Pandas搭配lambda组合使用详解
2022/01/22 Python