• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

小程序,倒计时效果

原作者: [db:作者] 来自: [db:来源] 收藏 邀请


其实,原理很简单。
知道结束时间之后,进行计算,还有多少天,多少小时,多少分,多少秒。
每秒刷新一次时间。
倒计时结束之后,不再刷新,统统清零。

  data: {
    endTime: \'\', // 时间戳
  },
  // 倒计时
  countDown: function () {
    var that = this;
    var nowTime = new Date().getTime();//现在时间(时间戳)
    // var endTime = new Date(that.data.endTime).getTime();//结束时间(时间戳)
    var endTime = that.data.endTime * 1000;//结束时间(时间戳)
    var time = (endTime - nowTime) / 1000;//距离结束的毫秒数
    // 获取天、时、分、秒
    let day = parseInt(time / (60 * 60 * 24));
    let hou = parseInt(time % (60 * 60 * 24) / 3600);
    let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
    let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
    // console.log(day + "," + hou + "," + min + "," + sec)
    day = that.timeFormin(day),
      hou = that.timeFormin(hou),
      min = that.timeFormin(min),
      sec = that.timeFormin(sec);

    // 天,换成小时
    hou = day * 24 + hou;

    that.setData({
      // day: that.timeFormat(day),
      hou: that.timeFormat(hou),
      min: that.timeFormat(min),
      sec: that.timeFormat(sec)
    })
    // 每1000ms刷新一次
    if (time > 0) {
      that.setData({
        countDown: true
      })
      setTimeout(this.countDown, 1000);
    } else {
      that.setData({
        countDown: false
      })
    }
  },
  //小于10的格式化函数(2变成02)
  timeFormat(param) {
    return param < 10 ? \'0\' + param : param;
  },
  //小于0的格式化函数(不会出现负数)
  timeFormin(param) {
    return param < 0 ? 0 : param;
  }
onLoad: function ({ id }) {
    this.openid = app.globalData.openid || Storage.get().openid;
    request("getSeckillDetail", { id, openid: this.openid }).then(({ data }) => {
      this.setData({
        bannerList: data.product_banner_list,
        productInfo: data.product_info,
        productDetail: data.product_sample_list,
        endTime: data.end_time
      });

      // 开启倒计时
      var that = this;
      that.countDown()
    });
}

后台,返回时间戳,或者结束时间字符串都可以。前台,根据不同结果,进行处理。
处理成,day,hou,min,sec在页面中展示。
html

<view class="seckill_box">
    <view class="left">
        <view class="title">秒杀抢购中</view>
        <progress class="process" percent="20" backgroundColor="#9F2033" activeColor="#FFE0E5" font-size="20rpx" border-radius="5rpx" stroke-width="10rpx" show-info />
    </view>
    <view class="right">
        <view class="title">距本场结束剩余</view>
        <view class="count_down">
            <text class="time">{{hou}}</text> : <text class="time">{{min}}</text> : <text class="time">{{sec}}</text>
        </view>
    </view>
</view>

css

.seckill_box {
  width:750rpx;
  height: 100rpx;
  background-color: #E9455E;
  display: flex;
  
  .left {
    padding-top: 18rpx;
    width: 50%;
    height: 100rpx;
    padding-left: 40rpx;
    .title {
      font-size: 32rpx;
      font-weight: bold;
      color:#fff;
    }
    .process {
      width: 90%;
      color:#FFF;
    }
  }
  .right {
    width: 50%;
    height: 100rpx;
    padding-left:172rpx;
    padding-top: 18rpx;
    .title {
      font-size: 24rpx;
      font-weight: 500;
      color:#FFF;
    }
    .count_down {
      margin-top:5rpx;
      margin-left:15rpx;
      font-size: 20rpx;
      font-weight: 500;
      color:#FFF;
      .time {
        color:#E9455E;
        padding-left:5rpx;
        padding-right:5rpx;
        min-width: 36rpx;
        height: 26rpx;
        text-align: center;
        line-height: 26rpx;
        background-color: #FFF;
        display: inline-block;
      }
    }

  }
}

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap