微信小程序中如何计算距离某个节日还有多少天

Z时代
2024-01-10
分类：综合

先看一下页面效果：

页面是这样的：

好了，正文如下

最近碰到个需求需要计算，距离圣诞、元旦、高考、国庆啊等最近一个节日，还剩多少天。

因为后台没空理我，所以本文讲解在js中如何解决这个需求。(建议实际中获取标准时间，当前时间有点不靠谱)

首先肯定是要用 new Date() 获得当前时间对象，然后再用它的一些方法获取当前年月日等，根据年月日判断。

先看一下new Date()对象常用的方法。


  getYear(); //获取当前年份（2位）
  getFullYear(); //获取档期年份（4位）
  getMonth(); // 获取当前月份(0-11,0代表1月,很神经,获取日是正常的1-31...)
  getDate(); // 获取当前日(1-31)
  getDay(); //获取当前星期几(0-6,0代表星期天...)
  getTime(); //获取当前时间(从1970.1.1开始的毫秒数)，注意，是毫秒数！！！
  getHours(); // 获取当前小时数(0-23)
  getMinutes(); // 获取当前分钟数(0-59)
  getSeconds(); // 获取当前秒数
  getMilliseconds(); //获取当前毫秒数
  toLocalDateString(); // 获取当前日期

一开始，我是先取得Date()对象的月，日，然后判断月份等不等于某个日期的月份。分三种情况...


  let mydate = new Date();
  let year = mydate.getFullYear();
  let month = mydate.getMonth();
  let day = mydate.getDate();
  // 判断距离下个高考还需要多久
  if(month < 6){
    // ...
  }else if(month>6){
    // ...
  }else{
    if(day == 7){
    }else{
    }
  }

但是转念一想，这个做法太繁琐了。于是换个思路，直接获取目标日期的时间戳和当前日期的时间戳,两者之间进行比较。

代码如下：


 // 公共API
 // @params 传入节日日期的str，例如'-10-1','-12-25','-1-1'等
 // @return resolve()回调的是个数组
 // 数组第一个参数返回的是'今'或者'明'这个字符串，第二个参数返回的是还剩多少天
 settime:function(str){
  let promis = new Promise((resolve,reject)=>{
   // 获取时间对象
   let dateObj = new Date()
   let year = dateObj.getFullYear()
   let month = dateObj.getMonth()
   let day = dateObj.getDate()
   // 求当前日期和时间的时间戳
   // 这里需要注意的是，利用new Date().getMonth()得到的是0-11的数值
   // 而用new Date('year-month-day')初始化求今天0点0分0秒时的Month
   // 需要传入的是1-12的,也就是month要+1
   let now = new Date() 
   let target = new Date(year + str)  // 目标日期
   // 先保存起来，后续还会用
   let nowtime = now.getTime()    // 当前日期时间戳
   let sjc = nowtime - target.getTime() // 时间差
    // 回调的2个参数，会组成数组传入回调函数中
   // 这2个信息会直接赋值显示到页面中
   let theyear = '今'
   let thedays = 0
   if (sjc < 0) {
    // 还未过今年某个节日
    theyear = '今'
    thedays = Math.floor(Math.abs(sjc / (24 * 60 * 60 * 1000)))
   } else if (sjc > 0) {
    // 已经过了今年某个节日
    let mn = year - 0 + 1
    let mntarget = new Date(mn + str)
    let sjc2 = mntarget.getTime() - nowtime
    theyear = '明'
    thedays = Math.floor(sjc2 / (24 * 60 * 60 * 1000))
   } else {
    // 一年的节日期间
    theyear = '今'
    thedays = 0
   }
   let arr = [theyear, thedays]
   resolve(arr)
  })
  return promis
 }

我页面的wxml是这样的


<view>
 距离<text>{{gk_year}}</text>年高考还剩：<text>{{gk_days}}</text>天
</view>
<view>
距离<text>{{gq_year}}</text>年国庆还剩：<text>{{gq_days}}</text>天
</view>
<view>
距离<text>{{yd_year}}</text>年元旦还剩：<text>{{yd_days}}</text>天
</view>
<view>
距离<text>{{sd_year}}</text>年圣诞还剩：<text>{{sd_days}}</text>天
</view>

在页面中这样调用：


 /**
  * 生命周期函数--监听页面初次渲染完成
  */
 onReady: function () {
  // 设置距离xx还剩多少天
  this.setgk() // 高考
  this.setgq() // 国庆
  this.setyd() // 元旦
  this.setsd() // 圣诞
 },
 /**
  * 求距离高考还剩多少天
  */
 setgk:function(){
  let promis = this.settime('-06-07')
  let that = this
  promis.then((arr)=>{
   that.setData({
    gk_year:arr[0],
    gk_days:arr[1]
   })
  })
 },
 // 设置国庆信息
 setgq:function(){
  let promis = this.settime('-10-01')
  let that = this
  promis.then((arr) => {
   that.setData({
    gq_year: arr[0],
    gq_days: arr[1]
   })
  })
 },
 // 设置元旦
 setyd:function(){
  let promis = this.settime('-01-01')
  let that = this
  promis.then((arr) => {
   that.setData({
    yd_year: arr[0],
    yd_days: arr[1]
   })
  })
 },
 // 设置圣诞
 setsd: function () {
  let promis = this.settime('-12-25')
  let that = this
  promis.then((arr) => {
   that.setData({
    sd_year: arr[0],
    sd_days: arr[1]
   })
  })
 },