【微信小程序】【可重用代码】基于数据库时间实现商品倒计时

javascript 文章 2022-07-22 18:20 536 0 全屏看文

AI助手支持GPT4.0

最近做拍卖小程序,里面有一个需求是监控拍卖时间,需要对时间进行动态的倒计时显示

从构思开始,做这个倒计时也花了我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)
    /天后剩余小时数
    var hour = Math.floor(totalSecond /3600 % 24)
    /天n小时后剩余分钟数
    var min = Math.floor(totalSecond / 60 % 60)
    /天n小时n分钟后剩余秒数
    var sec = Math.floor(totalSecond % 60)
    return day + "天" + hour + "小时" + min + "分" + sec + "秒"
  }

4、计数器的清除

每次离开页面需要清除计数器

-EOF-

AI助手支持GPT4.0


国内超级便宜服务器

摸鱼人热门新闻聚合

钻级赞助商 我要加入

开发者在线工具

第三方支付技术请加QQ群

相关文章
从零开始制作【立体键盘】,画UI免写CSS,【盲打练习】的交互逻辑只用了10来行表达式!
微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题
JS:信息录入系统
数据类型
前端开发性能优化方案
随便看看
线上防疫题库正确答案 2938
线上防疫题库正确答案(多选题) 4833
微信设置不可以使用小程序(游戏小程序) 5644
adsense申请已经支付的订单回退的网址 3215
BT面板查看网站入口、账号密码的命令 6017
ucloud海外服务器超级优惠券 3278
根据您的消费情况,您的延停权益已发生变化,变更后的延停权益为延停额度20.00元 5835
为什么我们喜欢迈克尔杰克逊。 4168
阿里云com、cn域名续费优惠码(2020年5月可用) 3590
阿里云com、cn域名续费优惠码(2020年6月可用) 3612