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

2024-09-29 05:39:37

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

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

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

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

vue 实现小程序或商品秒杀倒计时

下面先给大家介绍下vue 设计一个倒计时秒杀的组件 ,具体内容如下所述: 简介: 倒计时秒杀组件在电商网站中层出不穷不过思路万变不离其踪,我自己根据其他资料设计了一个vue版的核心思路:1.时间不能是本地客户端的时间必须是服务器的时间这里用一个settimeout代替以为时间必须统一 2.开始时间,结束时间通过父组件传入,当服务器时间在这个开始时间和结束时间的范围内参加活动按钮可以点击,并且参加过活动以后不能再参加, 3.在组件创建的时候同步得到现在时间服务时间差,并且在这里边
微信小程序的注册页面包含倒计时验证码、获取用户信息

1.页面展示 2.wxml代码  <scroll-view> <image src='/images/register.png' mode='widthFix' class="topImage"></image> <view class='input-top'> <input id="telphone" maxlength='11'
微信小程序倒计时功能实现代码

倒计时功能是一个比较常见的功能,比如用户获取验证码就需要用到.这里记录一下在微信小程序里面倒计时功能的简单实现. 直接看看代码吧 //倒计时60秒 function countDown(that,count) { if (count == 0) { that.setData({ timeCountDownTop: '获取验证码', counting:false }) return; } that.setData({ counting:true, timeCountDownTop: count +
微信小程序注册60s倒计时功能使用JS实现注册60s倒计时功能

微信小程序+WEB使用JS实现注册[60s]倒计时功能开发步骤: 1.效果图: 2.页面仅仅利用了JS的相关功能,包含:wxml.js.wxss 2.1wxml页面代码: <text>绑定手机</text> <form bindsubmit="bindMobile"> <view class="form_group"> <text>手机:</text> <input type="
详解微信小程序用定时器实现倒计时效果

平常在微信小程序开发的时候,因项目的需求,倒计时必不可少,下面主要讲解定时器在微信小程序中的使用. 这里要先声明一点的就是,该篇主要实现倒计时功能,而且实现是时长较短的倒计时,其他的优化什么的不作主要考虑. 如果实现简单的60s倒计时效果,我们可直接使用setInterval即可,但是在微信小程序中,我们需要用微信小程序的语法,这时就会遇到一个难题,那就是怎么关闭定时器的问题,下面给出实例. WXML代码 <view class='countDown'>倒计时:<text style='
微信小程序动态显示项目倒计时效果

本文实例为大家分享了微信小程序动态显示项目倒计时的具体代码,供大家参考,具体内容如下 1.一般我们说的显示秒杀都是指的单条数据,循环我没做. 效果: 2.wxml代码: <p> <block wx:if="{{total_micro_second<=0}}">剩余时间:已经截止</block> <block wx:if="{{clock!='已经截止'}}">剩余时间:{{clock}}</block>
微信小程序基于数据库时间实现商品倒计时功能(可重用代码)

最近做拍卖小程序,里面有一个需求是监控拍卖时间,需要对时间进行动态的倒计时显示从构思开始,做这个倒计时也花了我4个小时多,也遇到了很多问题,现在我把完整的功能给实现了,可以拿来套用,只需要传入你自己数据库的时间即可. 1.第一个函数 //传入数据库结束时间参数并计算倒计时 countdown(endTime){//取出竞拍结束时间,精确到秒,如果数据库设置的是精确到毫秒,这里需要再除以1000 let auctionEndtime = res.data.end_time console.log
微信小程序6位或多位验证码密码输入框功能的实现代码

在做小程序过程中做一个6位验证码输入框,本以为很简单,但是在写的时候遇到各种各样的阻力,在网上查阅资料也寥寥无几,后来经过一番思考,终于敲定下来本人最满意的方案,特意发出来让大家参考一下,希望能帮到大家! 一.效果图如下: 二.代码部分 wxml: <form bindsubmit="formSubmit"> <view class='content'> <block wx:for="{{Length}}" wx:key="i
微信小程序连续签到7天积分获得功能的示例代码

每周每天签到获得积分的案例功能设计:计算每天签到得1分,显示得到的签到积分,连续签到3天[周一二三]即得+多3分,连续签到7天[周一二三四五六日]+多7分,没有连续即不显示多余的3分或7分的提示- wxml结构:  <view class='sign-new'> <view class='in'> <view class='new-head'> <view class='sig-tl'
微信小程序实现单个或多个倒计时功能

微信小程序实现单个/多个倒计时显示单个倒计时多个倒计时思路:首先获取到每个倒计时的结束时间,然后把结束时间跟当前时间转换成时间戳,结束时间减去当前时间再除以1000(因为时间戳是毫秒级)就是该结束时间距离当前时间的秒数了,然后根据公式计算出时分秒,最后使用定时器每秒跑一次就实现成功啦~ 两种倒计时思路差不多,多个倒计时多了遍历数组步骤,遍历拿到数组中每个对象结束时间来计算时间好啦!说完思路先上效果图看看单个倒计时上代码,上代码!!!重点来啦 wxml: // 单个倒计时-----w
微信小程序自定义底部导航带跳转功能

本文实例为大家分享了微信小程序实现底部导航带跳转功能的具体代码,供大家参考,具体内容如下 index.wxml  <view class='footer'> <view class='footer_list' data-id='{{index}}' catchtap='Navigation' wx:for="{{listInfo}}" data-current="{{index}}" wx:key="t
微信小程序自定义单选框样式实现单选功能

本文实例为大家分享了微信小程序自定义单选框样式实现单选功能的具体代码,供大家参考,具体内容如下实现效果: 选择小车时,其他类型的车取消选中. 具体思路: 用数组存几种类型车的数据,给每条数据设置点击未选中的效果(checked 设为 false).点击某一种车时,获取其下标,将它的设置为选中(checked 设置 true). 代码如下: // index.js Page({ /** * 页面的初始数据 */ data: { list: [{ img
微信小程序选择器（时间，日期，地区）实例详解

微信小程序选择器(时间,日期,地区) 微信小程序开发由于本人最近学习微信小程序的开发,根据自己的实践结果整理了下结果,对日期选择器,时间选择器,地区选择器做的实例,有不对的地方,希望大家指正. 用微信封装好的控件感觉很好,为我们开发人员省去了很多麻烦.弊端就是不能做大量的自定义.今天试用了选择器. 上gif: 上代码: 1.index.js //index.js //获取应用实例 var app = getApp() Page({ data: { date: '2016-11-08', ti
微信小程序滚动选择器(时间日期)详解及实例代码

微信小程序滚动选择器(时间日期)详解微信小程序自己封装了很多控件,用起来确实很方便,如果这是Android里面,还需要自己去定义,不废话,效果图: 一起来看看怎么实现的呢?看完你应该就该说,尼玛,这就行啦-. 这个效果呢,要用到picker组件,动画从底部弹起的滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器. 看下相应的属性: 具体的来看看代码,布局: <view class="section" > <
微信小程序基于slider组件动态修改标签透明度的方法示例

本文实例讲述了微信小程序基于slider组件动态修改标签透明度的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml <view class="img" style="opacity:{{imgOpacity}}"></view> <slider min="0" max="1" step="0.1" show-value value=&quo
微信小程序基于腾讯云对象存储的图片上传功能

在使用腾讯云对象存储之前,公司一直使用的是传统的FTP的上传模式,而随着用户量的不断增加,FTP所暴露出来的问题也越来越多,1.传输效率低,上传速度慢.2.时常有上传其他文件来攻击服务器,安全上得不到保障.所以我们在经过慎重考虑觉得使用第三方的云存储服务. 在最开始的时候我们在腾讯云与阿里云中选择,最终我们选择腾讯云,腾讯云在文件上传用时方面的性能比较突出,文件越大表现越好:在下载用时方面表现略优于阿里云:文件删除用时方面总体速度略逊于,但在不同大小文件删除用时上都比较稳定.当然这与我们主要用于

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

相关推荐

随机推荐