欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序中如何計算距離某個節(jié)日還有多少天

 更新時間:2019年07月15日 11:07:23   作者:甚時躍馬歸來  
這篇文章主要給大家介紹了關(guān)于微信小程序中如何計算距離某個節(jié)日還有多少天的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

先看一下頁面效果:

頁面是這樣的:

好了,正文如下

最近碰到個需求需要計算,距離圣誕、元旦、高考、國慶啊等最近一個節(jié)日,還剩多少天。

因為后臺沒空理我,所以本文講解在js中如何解決這個需求。(建議實際中獲取標準時間,當(dāng)前時間有點不靠譜)

首先肯定是要用 new Date() 獲得當(dāng)前時間對象,然后再用它的一些方法獲取當(dāng)前年月日等,根據(jù)年月日判斷。

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

  getYear(); //獲取當(dāng)前年份(2位)
  getFullYear(); //獲取檔期年份(4位)
  getMonth(); // 獲取當(dāng)前月份(0-11,0代表1月,很神經(jīng),獲取日是正常的1-31...)
  getDate(); // 獲取當(dāng)前日(1-31)
  getDay(); //獲取當(dāng)前星期幾(0-6,0代表星期天...)
  getTime(); //獲取當(dāng)前時間(從1970.1.1開始的毫秒數(shù)),注意,是毫秒數(shù)?。?!
  getHours(); // 獲取當(dāng)前小時數(shù)(0-23)
  getMinutes(); // 獲取當(dāng)前分鐘數(shù)(0-59)
  getSeconds(); // 獲取當(dāng)前秒數(shù)
  getMilliseconds(); //獲取當(dāng)前毫秒數(shù)
  toLocalDateString(); // 獲取當(dāng)前日期

一開始,我是先取得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{
      
    }
  }

但是轉(zhuǎn)念一想,這個做法太繁瑣了。于是換個思路,直接獲取目標日期的時間戳和當(dāng)前日期的時間戳,兩者之間進行比較。

代碼如下:

 // 公共API
 // @params 傳入節(jié)日日期的str,例如'-10-1','-12-25','-1-1'等
 // @return resolve()回調(diào)的是個數(shù)組
 // 數(shù)組第一個參數(shù)返回的是'今'或者'明'這個字符串,第二個參數(shù)返回的是還剩多少天
 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()
   
   // 求當(dāng)前日期和時間的時間戳
   // 這里需要注意的是,利用new Date().getMonth()得到的是0-11的數(shù)值
   // 而用new Date('year-month-day')初始化求今天0點0分0秒時的Month
   // 需要傳入的是1-12的,也就是month要+1

   let now = new Date() 
   let target = new Date(year + str)  // 目標日期
   
   // 先保存起來,后續(xù)還會用
   let nowtime = now.getTime()    // 當(dāng)前日期時間戳
   let sjc = nowtime - target.getTime() // 時間差

    // 回調(diào)的2個參數(shù),會組成數(shù)組傳入回調(diào)函數(shù)中
   // 這2個信息會直接賦值顯示到頁面中
   let theyear = '今'
   let thedays = 0

   if (sjc < 0) {

    // 還未過今年某個節(jié)日
    theyear = '今'
    thedays = Math.floor(Math.abs(sjc / (24 * 60 * 60 * 1000)))

   } else if (sjc > 0) {

    // 已經(jīng)過了今年某個節(jié)日
    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 {
    // 一年的節(jié)日期間
    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>

在頁面中這樣調(diào)用:

 /**
  * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
  */
 onReady: function () {
  // 設(shè)置距離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]
   })
  })
 },

 // 設(shè)置國慶信息
 setgq:function(){
  let promis = this.settime('-10-01')
  let that = this

  promis.then((arr) => {
   that.setData({
    gq_year: arr[0],
    gq_days: arr[1]
   })
  })
 },

 // 設(shè)置元旦
 setyd:function(){
  let promis = this.settime('-01-01')
  let that = this

  promis.then((arr) => {
   that.setData({
    yd_year: arr[0],
    yd_days: arr[1]
   })
  })
 },
 // 設(shè)置圣誕
 setsd: function () {
  let promis = this.settime('-12-25')
  let that = this

  promis.then((arr) => {
   that.setData({
    sd_year: arr[0],
    sd_days: arr[1]
   })
  })
 },

附注:調(diào)用的時候要人為的補全日期,也就是不足10要在前面補個0,這部分代碼在開發(fā)工具上就算不補全也是可以用的。但是在iphone 6s ios12下,不補全,就無效。不知道這個是不是bug,其他手機沒測試,不清楚不補全是否可用。建議用的時候還是人為補全日期吧。

小結(jié),編程就是這樣,很多時候我們換個思路,得出來的思路會比之前的好很多。所以,就算當(dāng)前項目很緊,做完了之后,還是要多多思考。將一些當(dāng)時很別扭的地方多想一下,沒準就能想出更好的解決思路。

這一點無論是對個人還是項目,都是有益的。

10-24更新備注:取當(dāng)前日期的時間戳計算天數(shù)存在bug,有1天的差異。所以將settime:function()  中獲取當(dāng)前日期的時間戳,改成了獲取當(dāng)前時間的時間戳,因為后續(xù)是用Math.floor()函數(shù)向下取整,能夠解決時間點帶來的時間戳差異的問題。
最后看一下效果(第一張圖片上的字和第二張最底部的灰色字體,2018-10-24更新)

總結(jié)

以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,謝謝大家對腳本之家的支持。

相關(guān)文章

  • avalonjs實現(xiàn)仿微博的圖片拖動特效

    avalonjs實現(xiàn)仿微博的圖片拖動特效

    JavaScript實現(xiàn)仿微博的圖片拖動特效,貌似這些天有不少朋友需要這功能,今天發(fā)現(xiàn)這款是js制作的好,不敢獨享,希望需要的朋友喜歡哦。
    2015-05-05
  • js實現(xiàn)鼠標拖拽多選功能示例

    js實現(xiàn)鼠標拖拽多選功能示例

    本篇文章主要介紹了js實現(xiàn)鼠標拖拽多選功能示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08
  • ECharts柱狀排名圖柱子上方顯示文字與圖標代碼實例

    ECharts柱狀排名圖柱子上方顯示文字與圖標代碼實例

    我們在繪制柱狀圖時如果想要柱條上顯示文字,可以參考本文,這篇文章主要給大家介紹了關(guān)于ECharts柱狀排名圖柱子上方顯示文字與圖標的相關(guān)資料,需要的朋友可以參考下
    2023-11-11
  • layui 富文本圖片上傳接口與普通按鈕 文件上傳接口的例子

    layui 富文本圖片上傳接口與普通按鈕 文件上傳接口的例子

    今天小編就為大家分享一篇layui 富文本圖片上傳接口與普通按鈕 文件上傳接口的例子,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • 深入理解js 中async 函數(shù)的含義和用法

    深入理解js 中async 函數(shù)的含義和用法

    async 函數(shù)就是隧道盡頭的亮光,很多人認為它是異步操作的終極解決方案。接下來通過本文給大家分享js 中async 函數(shù)的含義和用法,感興趣的朋友跟隨腳本之家小編一起看看吧
    2018-05-05
  • JS增加行復(fù)制行刪除行的實現(xiàn)代碼

    JS增加行復(fù)制行刪除行的實現(xiàn)代碼

    這篇文章介紹了JS增加行復(fù)制行刪除行的實現(xiàn)代碼,有需要的朋友可以參考一下
    2013-11-11
  • JS傳參及動態(tài)修改頁面布局

    JS傳參及動態(tài)修改頁面布局

    本篇文章主要介紹了JS傳參及動態(tài)修改頁面布局的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧
    2017-04-04
  • 使用uniapp實現(xiàn)發(fā)布朋友圈功能

    使用uniapp實現(xiàn)發(fā)布朋友圈功能

    這篇文章主要介紹了使用uniapp實現(xiàn)發(fā)布朋友圈功能,在文章底部給大家介紹了uniapp?微信小程序分享、分享朋友圈功能,通過頁內(nèi)自定義分享按鈕,結(jié)合實例代碼給大家介紹的非常詳細,需要的朋友可以參考下
    2022-09-09
  • 小程序富文本提取圖片可放大縮小

    小程序富文本提取圖片可放大縮小

    這篇文章主要為大家詳細介紹了小程序富文本提取圖片可放大縮小,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-05-05
  • JavaScript字符串檢索字符的方法

    JavaScript字符串檢索字符的方法

    這篇文章主要為大家詳細介紹了JavaScript字符串檢索字符的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-06-06

最新評論