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

 更新时间:2022年07月23日 11:14:11   作者:小李不背锅  
这篇文章主要介绍了微信小程序基于数据库时间实现商品倒计时功能(可重用代码),代码很完整,拿来就可以使用,现在我把完整的代码分享给大家,需要的朋友可以参考下

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

从构思开始,做这个倒计时也花了我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、计数器的清除

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

到此这篇关于微信小程序基于数据库时间实现商品倒计时功能(可重用代码)的文章就介绍到这了,更多相关小程序商品倒计时内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript实现下拉列表选择框

    JavaScript实现下拉列表选择框

    这篇文章主要为大家详细介绍了JavaScript实现下拉列表选择框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • 详谈$.data()的用法和作用

    详谈$.data()的用法和作用

    下面小编就为大家带来一篇详谈$.data()的用法和作用。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • 老生常谈js动态添加事件--- 事件委托

    老生常谈js动态添加事件--- 事件委托

    下面小编就为大家带来一篇老生常谈js动态添加事件--- 事件委托。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • javascript定义类和类的实现实例详解

    javascript定义类和类的实现实例详解

    这篇文章主要介绍了javascript定义类和类的实现,结合实例形式较为详细的分析了JavaScript类的定义方式与相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-12-12
  • 浅谈javascript的原型继承

    浅谈javascript的原型继承

    javascript的继承在很多框架中都有运用,尤其是原型式继承。首先要理解一个概念,什么是原型式继承?所谓的原型式继承,就是在函数内部先创建一个临时性的构造函数,然后将传入的对象做这个构造函数的原型,最后返回这个临时类型的新实例
    2012-07-07
  • javascript 常见的闭包问题的解决办法

    javascript 常见的闭包问题的解决办法

    javascript 常见的闭包问题的解决办法,需要的朋友可以参考下。
    2009-11-11
  • js写的评论分页(还不错)

    js写的评论分页(还不错)

    js写的分页在网上可以搜到很多的文章,在也为大家介绍一个,喜欢的的朋友可以参考下
    2013-12-12
  • js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)

    js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)

    下面小编就为大家分享一篇js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法),具有很的参考价值,希望对大家有所帮助
    2017-12-12
  • js判断数据类型如判断是否为数组是否为字符串等等

    js判断数据类型如判断是否为数组是否为字符串等等

    js判断数据类型如判断是否为数组类型、判断是否为字符串类型、判断是否为数值类型等等,本文有几个不错的示例,大家可以学习下
    2014-01-01
  • JS实现小星星特效

    JS实现小星星特效

    这篇文章主要为大家详细介绍了JS实现小星星特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12

最新评论