微信小程序时间戳与日期格式转换及倒计时实现

作者:资源驿站时间:2026-10-31 20:57:55浏览:129

本文详解微信小程序中时间戳与日期格式的相互转换方法,涵盖获取昨天、今天、明天日期的技巧,以及将时间字符串转为时间戳的两种实现。重点解析多订单倒计时功能的实现思路,包括计算时间差、处理多组数据及前端循环渲染,提供完整代码示例与难点解决方案。

1. 微信小程序 时间戳与日期格式的转换

微信小程序中的时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总秒数。例如现在北京时间2015-12-31 17:00:00的时间戳是1451552400,就是指从北京时间1970-01-01 08:00:00到2015-12-31 17:00:00已经过去了1451552400秒。 在编程语言中使用时间戳的好处: (1)时间戳没有时区概念,比如如果用’2015-12-31 17:00:00’这么一个字符串表示时间的话,北京时间和美国时间是不一样的,但是用时间戳1451552400来表示的话,那就是一定是唯一的时间,不会有歧义; (2)时间戳在编程语言中一般是长整形数据类型,无论何种编程语言都能认识时间戳,如果用字符串表示时间,还需要转换。

1.1. 获取昨天,今天,明天的xx-xx-xx格式的日期

微信小程序的picker日期选择组件常需使用“年-月-日”格式的时间数据,以下方法便于后续开发参考。

//时间的格式为 xxxx-xx-xx 即 年-月-日, 小程序picker中经常可以用到
//昨天的时间
var day1 = new Date();
day1.setTime(day1.getTime()-24*60*60*1000);
var s1 = day1.getFullYear()+"-" + (day1.getMonth()+1) + "-" + day1.getDate();
//今天的时间
var day2 = new Date();
day2.setTime(day2.getTime());
var s2 = day2.getFullYear()+"-" + (day2.getMonth()+1) + "-" + day2.getDate();
//明天的时间
var day3 = new Date();
day3.setTime(day3.getTime()+24*60*60*1000);
var s3 = day3.getFullYear()+"-" + (day3.getMonth()+1) + "-" + day3.getDate();

1.2. 获取前一天时间

微信小程序获取前一天时间。

1. 微信小程序 时间戳与日期格式的转换

 that.getDeadline("2025-04-16 17:35:15");
getDeadline: function (time) {
    var date1 = new Date(time + ":000");
    var timeStamp1 = date1.getTime();
    var date2 = new Date(timeStamp1);
    date2.setTime(date1.getTime() - 24 * 60 * 60 * 1000);
    var year = date2.getFullYear()
    var month = date2.getMonth() + 1
    if (month < 10) {
      month = "0" + month
    }
    var day = date2.getDate()
    if (day < 10) {
      day = "0" + day
    }
    var hour = date2.getHours()
    if (hour < 10) {
      hour = "0" + hour
    }
    var minite = date2.getMinutes();
    if (minite < 10) {
      minite = "0" + minite
    }
    var second = date2.getSeconds();
    if (second < 10) {
      second = "0" + second
    }
    var time2 = year + "-" + month + "-" + day + ' ' + hour + ":" + minite + ":" + second;
    return time2;
  },

1.3. 时间转换为时间戳

(1)方法一

   var date = new Date("2022-12-04 17:15:53:555");
    // 有三种方式获取
    var time1 = date.getTime();
    var time2 = date.valueOf();
    var time3 = Date.parse(date);
    console.log(time1); //1670145353555
    console.log(time2); //1670145353555
    console.log(time3); //1670145353000

(2)方法二

var time = '2020-04-01 00:00:00';
var repTime = time.replace(/-/g, '/');//用正则主要是把“2020-04-01 00:00:00'”转换成“2020/04/01 00:00:00'”兼容ios
console.log("返回时间:" + repTime);
var timeTamp = Date.parse(repTime);
console.log("返回时间戳:" + timeTamp)

1.4. 订单倒计时实现

1.4.1. 实现思路:

计算发起拼团时间与拼团结束时间的时间差,并将该时间差格式化为所需形式(如“时:分:秒”)。通过每秒递减显示,利用setTimeout(this.setTimeCount,1000)函数实现每秒执行一次倒计时逻辑。

1.4.2. 实现中的难点

单个倒计时(如60秒发送验证码)实现相对简单,难点在于多条倒计时的处理。由于不同订单的下单时间不同,导致时间差time各异,初期在此处耗时较多,理清逻辑后才发现实现原理。

1.4.3. 实现方法

后台计算时间差,前端直接获取。为不影响项目进度,采用此方案,需后台配合提供时间差数据。获取time后,经处理放入数组进行循环渲染。此方法优势在于前端无需将time作为属性添加到原数组中。

1.4.4. 示例代码

(1)timeCount.wxml

<view class="TimeSeond">{{timeSecond}}</view>

(2)timeCount.js

Page({
  data: {
    timeSecond: '', //倒计时
  },
  onLoad() {
    this.timeCountdown();
  },
  timeCountdown() {
    var that = this
    var timeStampCur = new Date().getTime();
    //30分钟前
    var timeStampBefore = timeStampCur - 30 * 60 * 1000;
    if (timeStampCur > timeStampBefore) {
      var timeStampInterval = timeStampCur - timeStampBefore
      var hours = parseInt((timeStampInterval % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
      var minutes = parseInt((timeStampInterval % (60 * 60 * 1000)) / (60 * 1000));
      var seconds = parseInt((timeStampInterval % (60 * 1000)) / 1000);
      var timeNum = setInterval(function () {
        timeStampInterval = timeStampInterval - 1000
        hours = parseInt((timeStampInterval % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
        minutes = parseInt((timeStampInterval % (60 * 60 * 1000)) / (60 * 1000));
        seconds = parseInt((timeStampInterval % (60 * 1000)) / 1000);
        if (timeStampInterval < 1) {
          that.setData({
            timeSecond: '00:00:00'
          })
          clearInterval(timeNum)
          return false
        }
        hours = hours > 9 ? hours : '0' + hours
        minutes = minutes > 9 ? minutes : '0' + minutes
        seconds = seconds > 9 ? seconds : '0' + seconds
        that.setData({
          timeSecond: hours + ':' + minutes + ':' + seconds
        })
      }, 1000)
    } else {
      that.setData({
        timeSecond: '00:00:00'
      })
    }
  },
})

1. 微信小程序 时间戳与日期格式的转换

到此这篇关于微信小程序时间戳与日期格式的转换的文章就介绍到这了,更多相关小程序时间戳与日期格式转换内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!

作者最新文章