最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當(dāng)前位置: 首頁 - 科技 - 知識百科 - 正文

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

來源:懂視網(wǎng) 責(zé)編:小采 時間:2020-11-27 21:53:44
文檔

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

微信小程序中如何計算距離某個節(jié)日還有多少天:先看一下頁面效果: 頁面是這樣的: 好了,正文如下 最近碰到個需求需要計算,距離圣誕、元旦、高考、國慶啊等最近一個節(jié)日,還剩多少天。 因為后臺沒空理我,所以本文講解在js中如何解決這個需求。(建議實際中獲取標(biāo)準(zhǔn)時間,當(dāng)前時間有點不靠譜) 首
推薦度:
導(dǎo)讀微信小程序中如何計算距離某個節(jié)日還有多少天:先看一下頁面效果: 頁面是這樣的: 好了,正文如下 最近碰到個需求需要計算,距離圣誕、元旦、高考、國慶啊等最近一個節(jié)日,還剩多少天。 因為后臺沒空理我,所以本文講解在js中如何解決這個需求。(建議實際中獲取標(biāo)準(zhǔn)時間,當(dāng)前時間有點不靠譜) 首

先看一下頁面效果:

頁面是這樣的:

好了,正文如下

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

因為后臺沒空理我,所以本文講解在js中如何解決這個需求。(建議實際中獲取標(biāo)準(zhǔn)時間,當(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)念一想,這個做法太繁瑣了。于是換個思路,直接獲取目標(biāo)日期的時間戳和當(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) // 目標(biāo)日期
 
 // 先保存起來,后續(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)時很別扭的地方多想一下,沒準(zhǔn)就能想出更好的解決思路。

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

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

總結(jié)

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

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

微信小程序中如何計算距離某個節(jié)日還有多少天:先看一下頁面效果: 頁面是這樣的: 好了,正文如下 最近碰到個需求需要計算,距離圣誕、元旦、高考、國慶啊等最近一個節(jié)日,還剩多少天。 因為后臺沒空理我,所以本文講解在js中如何解決這個需求。(建議實際中獲取標(biāo)準(zhǔn)時間,當(dāng)前時間有點不靠譜) 首
推薦度:
標(biāo)簽: 微信小程序 計算 多少天
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top