uniapp小程序倒计时

小程序倒计时

需求：根据创建时间来判断当前时间到截止日期还有多少天

/**
* 时间和期限关系处理函数
* @param {Number} range 限制截止的天数
* @param {string} creatTime 创建时间 2020-01-01 13:10:11
* @returns {void}
*/
timeFun(range = 7, creatTime) {const that = thiscreatTime = creatTime.replace(new RegExp('-','g'), '/')// ios兼容NAN问题 不支持2020-1-2 只支持2020/1/2let nowtime = new Date().getTime()let i = new Date(creatTime).getTime()i+=range * 24 * 60 * 60*1000let overtime = new Date(i).getTime()let differenceDay = overtime-nowtime// 大于截止日期返回if(differenceDay < 0){this.timerShow = falsereturn false;}else{this.timerShow = true}let day = Math.floor(differenceDay / 1000 / 60 / 60 / 24);//计算整数天数let hour = Math.floor(differenceDay / 1000 / 60 / 60 % 24);//计算整数小时数let min = Math.floor(differenceDay / 1000 / 60 % 60);//计算整数分let afterMin =  Math.floor(differenceDay / 1000 % 60);//取得算出分后剩余的秒数console.log(differenceDay,day,hour,min,afterMin)that.timeData.day = daythat.timeData.hour = hourthat.timeData.min = minthat.timeData.afterMin = afterMinthat.myInterval = setInterval(this.timing,1000)
},
// 递减逻辑
timing(){const that = thisthat.timeData.afterMin--if(that.timeData.afterMin < 0){--that.timeData.minif(that.timeData.min < 0){--that.timeData.hourif(that.timeData.hour < 0){--that.timeData.dayif(that.timeData.day == 0) {that.timerShow = falseclearInterval(that.myInterval)// 关闭之后的逻辑// ....}that.timeData.hour = 0// that.$set(that.timeData,'hour',0)}that.timeData.min = 59// that.$set(that.timeData,'min',59)}that.timeData.afterMin = 59// that.$set(that.timeData,'afterMin',59)}
},

每次递减的时候计算时间感觉会影响性能所以就把计算的时间的逻辑放到了外边，每次递减对应的数值就行而不是每次在做递减逻辑的时候计算时间

小程序隐藏的时候可以把这个定时器清除掉然后把都归为0，再显示的时候再调用方法计算

uniapp小程序倒计时相关推荐

uniapp(小程序) 配置海康威视-萤石监控(直播替代方案) 踩坑与解决方法
uniapp(小程序) 配置海康威视-萤石监控(直播替代方案) 踩坑与解决方法因为公司业务需求需要获取监控的摄像头,萤石是给出了几种方案去实现. 直播接入:萤石开放平台API文档小程序接入:萤石 ...
uni-app小程序实现录音功能，uniapp实现录音功能并上传java，uniapp简单实现录音功能
前言 [简单的录音例子,复制过去就可用] 使用了uni组件和uView组件: uniapp小程序授权录音并录制后保存到java后端. 效果图 uniapp实现直接复制过去粘贴到.vue文件即可测试: ...
uniapp小程序迁移到TS
uniapp小程序迁移到TS 我一直在做的小程序就是山科小站也已经做了两年了,目前是用uniapp构建的,在这期间也重构好几次了,这次在鹅厂实习感觉受益良多,这又得来一次很大的重构,虽然小程序功能 ...
uni-app 小程序多图上传
uni-app 小程序多图上传: 官方提示说,App支持多文件上传,微信小程序只支持单文件上传,传多个文件需要反复调用本API.所以跨端的写法就是循环调用本API 步骤: //1.首先通过 uni.c ...
uniapp小程序发布经验
一.概述 uniapp已经开发好了,有需求转为小程序发布,一般上转为微信小程序. 这里以微信小程序为例. 二.转化方法 1.打开HBuilder X开发工具: 2.打开uniapp代码: 3.点击菜单 ...
uniapp小程序开发设置系统状态栏高度、全屏背景图设置
效果: uniapp小程序开发设置系统状态栏高度/全屏背景图设置 <view class="login"><view class="status_bar ...
uni-app小程序分享
uni-app小程序分享(全局) 在common文件下share.js export default {data() {return {share: {// 转发的标题 (默认标题)title: '' ...
【uniapp小程序】request发起请求
这里写目录标题写在前面微信小程序和uniapp小程序区别
uniapp 小程序实现 RSA 加密
uniapp 小程序实现 RSA 加密引言创建并使用 jsencrypt 进行 RSA 加密创建 rsa 文件在需要的地方引用注意引言前端开发时,有时候不可避免会使用到加密,本人在这次的 ...
uniapp小程序运行正常，app运行报cid unmatched at view.umd.min.js
uniapp小程序运行正常,app运行报cid unmatched at view.umd.min.js 阐述 uniapp 运行小程序正常,但是调试App.有时候就会报一大堆错误,是因为小程序编辑器 ...

uniapp小程序倒计时

小程序倒计时

uniapp小程序倒计时相关推荐

最新文章

热门文章