微信小程序活动倒计时

客官°小女子只卖身不卖艺 2021-07-24 14:08 439阅读 0赞

示例效果图：

![20200922140424928.png][]

案列效果图

![20200922140349157.png][]

代码

引用页：

{
      "usingComponents": {
        
        "dataTime": "../../../component/dataTime/index"
      }
    }

<block wx:for="{
       {body}}"><countDown bind:onEnd="getPageList" format="{
       {formatTime}}" target="{
       {item.createDateNum}}" /></block>

const formatChinaDate = mss => {
      let days = parseInt(mss / (1000 * 60 * 60 * 24));
      let hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      let minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
      let seconds = parseInt((mss % (1000 * 60)) / 1000);
      return days + ' 天 ' + hours + ' 小时 ' + minutes + ' 分钟 ' + seconds + ' 秒 ';
    };
    Page({
      data: {
        formatTime: formatChinaDate,
    
      },
    
      getPageList: function () {
        //倒计时结束啦
        console.log('倒计时结束啦')
      },
      onLoad: function (options) {
        let list = [{
          id: "07937f9bed394731836b5530f98762a2",
          createDate: "2020-09-16 17:25:12",
         
        }, {
          id: "e60fda068db141f3b484bad347803290",
          createDate: "2020-09-21 17:24:46",
        
        }, {
          id: "f009718a892b442a85ee1567868c99c1",
          createDate: "2020-09-21 17:22:50",
         
        }, {
          id: "f936e612f2304475b69402b319d896c0",
          createDate: "2020-09-21 17:19:05",
         
        }, {
          id: "77f4f1686c514a06b6786c33f8d7ee7f",
          createDate: "2020-09-21 17:15:37",
        
        }, {
          id: "91eba6b9208d46cc860b400060e40004",
          createDate: "2020-09-21 14:24:39",
        
        }]
        for (let i = 0; i < list.length; i++) {
          console.log(list[i])
          // (1000 * 60 * 60 * 24)  24小时时间戳
          let createDateNum = new Date(list[i].createDate).getTime() + (1000 * 60 * 60 * 24)
      
          list[i].createDateNum=createDateNum
        }
        this.setData({
          body:list
        })
      },
    
    
    })

new Date(list\[i\].createDate).getTime()-------------------将时间转为时间戳

(1000 \* 60 \* 60 \* 24)----------24小时时间戳

模板页

var timer = 0;
    var interval = 1000;
    Component({
      /**
       * 组件的属性列表
       */
      properties: {
        target: {
          type: String,
        },
        format: {
          type: Function,
          default: null
        }
      },
     
      lifetimes: {
        attached() {
          //组件创建时
          this.setData({
            lastTime: this.initTime(this.properties).lastTime,  //根据 target 初始化组件的lastTime属性
          }, () => {
            //开启定时器
            this.tick();
            //判断是否有format属性 如果设置按照自定义format处理页面上显示的时间 没有设置按照默认的格式处理
            if (typeof this.properties.format === 'object') {
              this.defaultFormat(this.data.lastTime)
            }
          })
        },
     
        detached() {
          //组件销毁时清除定时器 防止爆栈
          clearTimeout(timer);
        },
      },
     
      /**
       * 组件的初始数据
       */
      data: {
        d: 0, //天
        h: 0, //时
        m: 0, //分
        s: 0, //秒
        result: '',  //自定义格式返回页面显示结果
        lastTime:''  //倒计时的时间错
      },
     
      /**
       * 组件的方法列表
       */
      methods: {
        //默认处理时间格式
        defaultFormat: function(time) {
          const day = 24 * 60 * 60 * 1000
          const hours = 60 * 60 * 1000;
          const minutes = 60 * 1000;
     
          const d = Math.floor(time / day);
          const h = Math.floor((time - d * day) / hours);
          const m = Math.floor((time - d * day - h * hours) / minutes);
          const s = Math.floor((time - d * day - h * hours - m * minutes) / 1000);
          this.setData({
            d,
            h,
            m,
            s
          })
        },
        //定时事件
        tick: function() {
          let {
            lastTime
          } = this.data;
     
          timer = setTimeout(() => {
            if (lastTime < interval) {
              clearTimeout(timer);
              this.setData({
                  lastTime: 0,
                  result: ''
                },
                () => {
                  this.defaultFormat(lastTime)
                  if (this.onEnd) {
                    this.onEnd();
                  }
                }
              );
            } else {
              lastTime -= interval;
              this.setData({
                  lastTime,
                  result: this.properties.format ? this.properties.format(lastTime) : ''
                },
                () => {
                  this.defaultFormat(lastTime)
                  this.tick();
                }
              );
            }
          }, interval);
        },
     
        //初始化时间
        initTime: function(properties) {
          let lastTime = 0;
          let targetTime = 0;
          try {
            if (Object.prototype.toString.call(properties.target) === '[object Date]') {
              targetTime = Number(properties.target).getTime();
            } else {
              targetTime = new Date(Number(properties.target)).getTime();
            }
          } catch (e) {
            throw new Error('invalid target properties', e);
          }
     
          lastTime = targetTime - new Date().getTime();
          return {
            lastTime: lastTime < 0 ? 0 : lastTime,
          };
        },
        //时间结束回调事件
        onEnd: function() {
          this.triggerEvent('onEnd');
        }
      }
    })

<view class="count-down">
      <text wx:if="{
       {result!==''}}">{
       {result}}</text>
      <block wx:else>
        <text wx:if="{
       {comm.numberToFixed(d)>0}}">{
       {d}}天</text>
        <text>{
       {utils.fixedZero(h)}}</text>
        <text style="font-weight: 500">:</text>
        <text>{
       {utils.fixedZero(m)}}</text>
        <text style="font-weight: 500">:</text>
        <text>{
       {utils.fixedZero(s)}}</text>
      </block>
    </view>

[20200922140424928.png]: /images/20210724/e382f03123e44f4f88e9e49e3ad5ce80.png
[20200922140349157.png]: /images/20210724/445b85cf0ef7483b9f4a92f1193f592e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，439人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序获取手机号60s倒计时

1.效果：点击获取》60s倒计时》重新获取 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ib

梦里梦外;/ 2022年12月30日 03:59/ 0 赞/ 179 阅读

相关微信小程序setTimeout实现无限循环倒计时

适用场景: 循环播放视频, 广告,等我这里用一个签到送积分场景广告视频来实现该效果: 我们先来看一下效果: ![watermark_type_ZmFuZ3poZW5n

Bertha 。/ 2022年11月29日 00:49/ 0 赞/ 701 阅读

相关微信小程序实现倒计时

微信小程序倒计时 > 大家好，今天我们来学习一下倒计时的实现，好好看，好好学，超详细的。直接上代码吧 <view class="title-item">倒计

╰半橙微兮°/ 2022年10月09日 06:29/ 0 赞/ 183 阅读

相关小程序倒计时

直接调用函数，传入结束时间的时间戳即可在页面直接输出以下值 countDownDay 天 countDownHour 时 countDownMinute 分

我不是女神ヾ/ 2022年09月05日 04:18/ 0 赞/ 184 阅读

相关微信小程序圆形进度条倒计时效果

效果如下图： ![20180222115619220][] var initNum = 7 ; //倒计时数 var spaceNum = 1000 ; //文字倒

浅浅的花香味﹌/ 2022年05月31日 10:42/ 0 赞/ 699 阅读

相关微信小程序--日期格式化和实现倒计时

首先看看日期怎么格式化第一种： Date.prototype.Format = function (fmt) { //author: meizz

分手后的思念是犯贱/ 2022年05月26日 02:05/ 0 赞/ 636 阅读

相关 JS 倒计时（微信小程序）

下面的例子是微信小程序的写法和web端的都是差不多的，只是显示在页面的写法不一样： var timer = null; /

阳光穿透心脏的1/2处/ 2022年05月11日 01:40/ 0 赞/ 250 阅读

相关商品倒计时活动

var content = document.getElementById("content") //开始时间当前时间 var nowTime =

今天药忘吃喽~/ 2021年12月12日 03:41/ 0 赞/ 321 阅读

相关微信小程序发送短信验证码倒计时

效果图 ![在这里插入图片描述][20200827154829168.gif_pic_left] WXML文件 <view class="containe

桃扇骨/ 2021年09月02日 05:52/ 0 赞/ 434 阅读

相关微信小程序活动倒计时

示例效果图： ![20200922140424928.png][] 案列效果图 ![20200922140349157.png][] 代码引用页： {

客官°小女子只卖身不卖艺/ 2021年07月24日 14:08/ 0 赞/ 440 阅读