微信小程序基于数据库时间实现商品倒计时功能(可重用代码)
作者:小李不背锅 时间:2024-01-16 06:05:38
最近做拍卖小程序,里面有一个需求是监控拍卖时间,需要对时间进行动态的倒计时显示
从构思开始,做这个倒计时也花了我4个小时多,也遇到了很多问题,现在我把完整的功能给实现了,可以拿来套用,只需要传入你自己数据库的时间即可。
1、第一个函数
//传入数据库结束时间参数并计算倒计时
countdown(endTime){//取出竞拍结束时间,精确到秒,如果数据库设置的是精确到毫秒,这里需要再除以1000
let auctionEndtime = res.data.end_time
console.log(res)
//获取当前系统时间,默认精确到毫秒,这里要用秒,所以除以1000
var nowTime = new Date().getTime() / 1000
//剩余时间总的秒数
var totalSecond = Math.floor(auctionEndtime - nowTime)
console.log('剩余秒数',totalSecond)
//计算倒计时
this.doCountdown(totalSecond)
}
2、第二个函数
//计算商品倒计时
doCountdown(totalSecond){
let _this = this
//每隔一秒执行一次代码,将计数器赋值给页面变量myTime
myTime = setInterval(function () {
//如果竞拍已经结束
if(totalSecond < 0){
_this.setData({
clock: ''
})
clearInterval(myTime)
return
}else{
//执行计算
var time = _this.formatTime(totalSecond)
_this.setData({
clock: time
})
}
totalSecond --;
},1000)
},
注意,需要在page()上面定义页面全局变量myTime,以便对计数器进行清除
3、第三个函数
//倒计时时间格式化
formatTime(totalSecond){
//剩余天数
var day = Math.floor(totalSecond / 3600 / 24)
//n天后剩余小时数
var hour = Math.floor(totalSecond /3600 % 24)
//n天n小时后剩余分钟数
var min = Math.floor(totalSecond / 60 % 60)
//n天n小时n分钟后剩余秒数
var sec = Math.floor(totalSecond % 60)
return day + "天" + hour + "小时" + min + "分" + sec + "秒"
}
4、计数器的清除
每次离开页面需要清除计数器
来源:https://www.cnblogs.com/lishilin-glut/archive/2022/07/22/16506653.html
标签:小程序,倒计时
0
投稿
猜你喜欢
vue3.2中的vuex使用详解
2024-05-25 15:16:58
python 读写文件包含多种编码格式的解决方式
2022-01-12 18:02:10
bootstrap table单元格新增行并编辑
2024-04-10 16:09:09
PHP中使用cURL实现Get和Post请求的方法
2023-08-18 13:15:35
利用python判断字母大小写的几种方法小结
2022-05-10 16:41:49
python实现逐个读取txt字符并修改
2021-03-11 21:25:53
Python实现自动添加脚本头信息的示例代码
2022-07-02 18:12:42
高效的MySQL分页
2011-01-04 20:01:00
python实现Windows电脑定时关机
2021-05-17 02:46:58
利用python在excel里面直接使用sql函数的方法
2023-10-15 00:34:57
mysql使用LOAD语句批量录入数据
2010-03-18 16:19:00
在MySQL中获得更好的全文搜索结果
2008-05-09 10:38:00
Python random模块(获取随机数)常用方法和使用例子
2023-12-27 18:09:06
pygame多种方式实现屏保操作(自动切换、鼠标切换、键盘切换)
2022-12-08 20:39:49
python数据可视化plt库实例详解
2022-11-30 21:23:28
Python实战整活之聊天机器人
2022-10-13 09:57:50
SQLServer 2005 实现数据库同步备份 过程-结果-分析
2012-07-11 15:56:55
基于SQL Server中如何比较两个表的各组数据 图解说明
2024-01-22 06:36:03
python机器学习理论与实战(六)支持向量机
2023-10-18 22:59:53
如何安装并使用conda指令管理python环境
2022-07-02 04:08:43