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


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 相关文章推荐
Javascript操纵Cookie实现购物车程序
Feb 15 Javascript
[推荐]javascript 面向对象技术基础教程
Mar 03 Javascript
Dom在ajax技术中的作用说明
Oct 25 Javascript
能说明你的Javascript技术很烂的五个原因分析
Oct 28 Javascript
UpdatePanel和Jquery冲突的解决方法
Apr 01 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
Jan 04 Javascript
JS实现重新加载当前页面或者父页面的几种方法
Nov 30 Javascript
vue中将网页打印成pdf实例代码
Jun 15 Javascript
搭建vue开发环境
Jul 19 Javascript
Vue登录注册并保持登录状态的方法
Aug 17 Javascript
JavaScript 处理树数据结构的方法示例
Jun 16 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 str_replace的替换漏洞
2008/03/15 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
js函数setTimeout延迟执行的简单介绍
2013/07/17 Javascript
JavaScript中的连字符详解
2013/11/28 Javascript
浅谈jQuery中的事件
2015/03/23 Javascript
JQuery查找DOM节点的方法
2015/06/11 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
JS判断浏览器是否安装flash插件的简单方法
2016/09/13 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
2016/11/21 Javascript
js实现登录验证码
2016/12/22 Javascript
基于JavaScript实现移动端无限加载分页
2017/03/27 Javascript
微信小程序 自定义消息提示框
2017/08/06 Javascript
JS开发中基本数据类型具体有哪几种
2017/10/19 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
Vue隐藏显示、只读实例代码
2018/07/18 Javascript
还不懂递归?读完这篇文章保证你会懂
2018/07/29 Javascript
Node.js如何对SQLite的async/await封装详解
2019/02/14 Javascript
在react项目中使用antd的form组件,动态设置input框的值
2020/10/24 Javascript
使用Python写CUDA程序的方法
2017/03/27 Python
python交互式图形编程实例(一)
2017/11/17 Python
python模拟菜刀反弹shell绕过限制【推荐】
2019/06/25 Python
django框架事务处理小结【ORM 事务及raw sql,customize sql 事务处理】
2019/06/27 Python
python 执行终端/控制台命令的例子
2019/07/12 Python
Python多线程操作之互斥锁、递归锁、信号量、事件实例详解
2020/03/24 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
Django设置Postgresql的操作
2020/05/14 Python
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
联想哥伦比亚网上商城:Lenovo Colombia
2017/01/10 全球购物
戴尔荷兰官方网站:Dell荷兰
2020/10/04 全球购物
char型变量中能不能存贮一个中文汉字
2015/07/08 面试题
《开国大典》教学反思
2014/04/19 职场文书
基层党员对照检查材料
2014/08/25 职场文书
初中成绩单评语
2014/12/29 职场文书
工程服务质量承诺书
2015/04/29 职场文书
广播稿:校园广播稿范文
2019/04/17 职场文书
适合后台管理系统开发的12个前端框架(小结)
2021/06/29 Javascript