微信小程序基于数据库时间实现商品倒计时功能(可重用代码)

作者:小李不背锅 时间: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
  • asp之家 网络编程 m.aspxhome.com