微信小程序中如何計(jì)算距離某個(gè)節(jié)日還有多少天
先看一下頁面效果:

頁面是這樣的:

好了,正文如下
最近碰到個(gè)需求需要計(jì)算,距離圣誕、元旦、高考、國(guó)慶啊等最近一個(gè)節(jié)日,還剩多少天。
因?yàn)楹笈_(tái)沒空理我,所以本文講解在js中如何解決這個(gè)需求。(建議實(shí)際中獲取標(biāo)準(zhǔn)時(shí)間,當(dāng)前時(shí)間有點(diǎn)不靠譜)
首先肯定是要用 new Date() 獲得當(dāng)前時(shí)間對(duì)象,然后再用它的一些方法獲取當(dāng)前年月日等,根據(jù)年月日判斷。
先看一下new Date()對(duì)象常用的方法。
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)前時(shí)間(從1970.1.1開始的毫秒數(shù)),注意,是毫秒數(shù)!?。? getHours(); // 獲取當(dāng)前小時(shí)數(shù)(0-23) getMinutes(); // 獲取當(dāng)前分鐘數(shù)(0-59) getSeconds(); // 獲取當(dāng)前秒數(shù) getMilliseconds(); //獲取當(dāng)前毫秒數(shù) toLocalDateString(); // 獲取當(dāng)前日期
一開始,我是先取得Date()對(duì)象的月,日,然后判斷月份等不等于某個(gè)日期的月份。分三種情況...
let mydate = new Date();
let year = mydate.getFullYear();
let month = mydate.getMonth();
let day = mydate.getDate();
// 判斷距離下個(gè)高考還需要多久
if(month < 6){
// ...
}else if(month>6){
// ...
}else{
if(day == 7){
}else{
}
}
但是轉(zhuǎn)念一想,這個(gè)做法太繁瑣了。于是換個(gè)思路,直接獲取目標(biāo)日期的時(shí)間戳和當(dāng)前日期的時(shí)間戳,兩者之間進(jìn)行比較。
代碼如下:
// 公共API
// @params 傳入節(jié)日日期的str,例如'-10-1','-12-25','-1-1'等
// @return resolve()回調(diào)的是個(gè)數(shù)組
// 數(shù)組第一個(gè)參數(shù)返回的是'今'或者'明'這個(gè)字符串,第二個(gè)參數(shù)返回的是還剩多少天
settime:function(str){
let promis = new Promise((resolve,reject)=>{
// 獲取時(shí)間對(duì)象
let dateObj = new Date()
let year = dateObj.getFullYear()
let month = dateObj.getMonth()
let day = dateObj.getDate()
// 求當(dāng)前日期和時(shí)間的時(shí)間戳
// 這里需要注意的是,利用new Date().getMonth()得到的是0-11的數(shù)值
// 而用new Date('year-month-day')初始化求今天0點(diǎn)0分0秒時(shí)的Month
// 需要傳入的是1-12的,也就是month要+1
let now = new Date()
let target = new Date(year + str) // 目標(biāo)日期
// 先保存起來,后續(xù)還會(huì)用
let nowtime = now.getTime() // 當(dāng)前日期時(shí)間戳
let sjc = nowtime - target.getTime() // 時(shí)間差
// 回調(diào)的2個(gè)參數(shù),會(huì)組成數(shù)組傳入回調(diào)函數(shù)中
// 這2個(gè)信息會(huì)直接賦值顯示到頁面中
let theyear = '今'
let thedays = 0
if (sjc < 0) {
// 還未過今年某個(gè)節(jié)日
theyear = '今'
thedays = Math.floor(Math.abs(sjc / (24 * 60 * 60 * 1000)))
} else if (sjc > 0) {
// 已經(jīng)過了今年某個(gè)節(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>年國(guó)慶還剩:<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() // 國(guó)慶
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è)置國(guó)慶信息
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)用的時(shí)候要人為的補(bǔ)全日期,也就是不足10要在前面補(bǔ)個(gè)0,這部分代碼在開發(fā)工具上就算不補(bǔ)全也是可以用的。但是在iphone 6s ios12下,不補(bǔ)全,就無效。不知道這個(gè)是不是bug,其他手機(jī)沒測(cè)試,不清楚不補(bǔ)全是否可用。建議用的時(shí)候還是人為補(bǔ)全日期吧。
小結(jié),編程就是這樣,很多時(shí)候我們換個(gè)思路,得出來的思路會(huì)比之前的好很多。所以,就算當(dāng)前項(xiàng)目很緊,做完了之后,還是要多多思考。將一些當(dāng)時(shí)很別扭的地方多想一下,沒準(zhǔn)就能想出更好的解決思路。
這一點(diǎn)無論是對(duì)個(gè)人還是項(xiàng)目,都是有益的。
10-24更新備注:取當(dāng)前日期的時(shí)間戳計(jì)算天數(shù)存在bug,有1天的差異。所以將settime:function() 中獲取當(dāng)前日期的時(shí)間戳,改成了獲取當(dāng)前時(shí)間的時(shí)間戳,因?yàn)楹罄m(xù)是用Math.floor()函數(shù)向下取整,能夠解決時(shí)間點(diǎn)帶來的時(shí)間戳差異的問題。
最后看一下效果(第一張圖片上的字和第二張最底部的灰色字體,2018-10-24更新)


總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
avalonjs實(shí)現(xiàn)仿微博的圖片拖動(dòng)特效
JavaScript實(shí)現(xiàn)仿微博的圖片拖動(dòng)特效,貌似這些天有不少朋友需要這功能,今天發(fā)現(xiàn)這款是js制作的好,不敢獨(dú)享,希望需要的朋友喜歡哦。2015-05-05
js實(shí)現(xiàn)鼠標(biāo)拖拽多選功能示例
本篇文章主要介紹了js實(shí)現(xiàn)鼠標(biāo)拖拽多選功能示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
ECharts柱狀排名圖柱子上方顯示文字與圖標(biāo)代碼實(shí)例
我們?cè)诶L制柱狀圖時(shí)如果想要柱條上顯示文字,可以參考本文,這篇文章主要給大家介紹了關(guān)于ECharts柱狀排名圖柱子上方顯示文字與圖標(biāo)的相關(guān)資料,需要的朋友可以參考下2023-11-11
layui 富文本圖片上傳接口與普通按鈕 文件上傳接口的例子
今天小編就為大家分享一篇layui 富文本圖片上傳接口與普通按鈕 文件上傳接口的例子,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JS增加行復(fù)制行刪除行的實(shí)現(xiàn)代碼
這篇文章介紹了JS增加行復(fù)制行刪除行的實(shí)現(xiàn)代碼,有需要的朋友可以參考一下2013-11-11
使用uniapp實(shí)現(xiàn)發(fā)布朋友圈功能
這篇文章主要介紹了使用uniapp實(shí)現(xiàn)發(fā)布朋友圈功能,在文章底部給大家介紹了uniapp?微信小程序分享、分享朋友圈功能,通過頁內(nèi)自定義分享按鈕,結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09

