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

 更新时间: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、计数器的清除

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

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

相关文章

  • js的隐含参数(arguments,callee,caller)使用方法

    js的隐含参数(arguments,callee,caller)使用方法

    本篇文章只要是对js的隐含参数(arguments,callee,caller)使用方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • js、jquery实现列表模糊搜索功能过程解析

    js、jquery实现列表模糊搜索功能过程解析

    这篇文章主要介绍了js、jquery实现列表模糊搜索功能过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-03-03
  • uniapp项目实践自定义分享组件示例

    uniapp项目实践自定义分享组件示例

    这篇文章主要为大家介绍了uniapp项目实践自定义分享组件示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • JS防止网页被嵌入iframe框架的方法分析

    JS防止网页被嵌入iframe框架的方法分析

    这篇文章主要介绍了JS防止网页被嵌入iframe框架的方法,结合实例形式分析了针对不同浏览器防止网页被嵌入框架的相关注意事项与操作技巧,需要的朋友可以参考下
    2016-09-09
  • JavaScript中yield实用简洁实现方式

    JavaScript中yield实用简洁实现方式

    原以为是一个蛮复杂的题目,想了许久没思路,当然要实现绝对能实现,但如果分析JavaScript脚本或是动态产生代码,都太复杂了。
    2010-06-06
  • 微信小程序完美解决scroll-view高度自适应问题的方法

    微信小程序完美解决scroll-view高度自适应问题的方法

    这篇文章主要介绍了微信小程序完美解决scroll-view高度自适应问题的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • 分享XmlHttpRequest调用Webservice的一点心得

    分享XmlHttpRequest调用Webservice的一点心得

    因为项目需要,以后前端、手机客户端调用ASP.NET的Webservice来获取信息.所以这段时间开始看Webservice,试着通过XmlHttpRequest调用Webservice,过程中碰到不少问题,也有不少的收获
    2012-07-07
  • 简单实现js轮播图效果

    简单实现js轮播图效果

    这篇文章主要教大家如何简单实现js轮播图效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • 浅谈Rx响应式编程

    浅谈Rx响应式编程

    在学习Rx编程的过程中,理解Observable这个概念至关重要,常规学习过程中,通常需要进行多次碰壁才能逐渐开悟。这个有点像小时候学骑自行车,必须摔几次才能掌握一样。当然如果有办法能言传,则可以少走一些弯路,尽快领悟Rx的精妙
    2021-06-06
  • JS获取填报扩展单元格控件的值的解决办法

    JS获取填报扩展单元格控件的值的解决办法

    这篇文章主要介绍了JS获取填报扩展单元格控件的值的解决办法,需要的朋友可以参考下
    2017-07-07

最新评论