小程序中计算距离某个节日还剩多少天

先看一下页面效果：

页面是这样的：

好了，正文如下

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

因为后台没空理我，所以本文讲解在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要+1let now = new Date() let target = new Date(year + str) // 目标日期// 先保存起来，后续还会用let nowtime = now.getTime() // 当前日期时间戳let sjc = nowtime - target.getTime() // 时间差// 回调的2个参数，会组成数组传入回调函数中// 这2个信息会直接赋值显示到页面中let theyear = '今'let thedays = 0if (sjc < 0) {// 还未过今年某个节日theyear = '今'thedays = Math.floor(Math.abs(sjc / (24 * 60 * 60 * 1000)))} else if (sjc > 0) {// 已经过了今年某个节日let mn = year - 0 + 1let mntarget = new Date(mn + str)let sjc2 = mntarget.getTime() - nowtimetheyear = '明'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 = thispromis.then((arr)=>{that.setData({gk_year:arr[0],gk_days:arr[1]})})},// 设置国庆信息setgq:function(){let promis = this.settime('-10-01')let that = thispromis.then((arr) => {that.setData({gq_year: arr[0],gq_days: arr[1]})})},// 设置元旦setyd:function(){let promis = this.settime('-01-01')let that = thispromis.then((arr) => {that.setData({yd_year: arr[0],yd_days: arr[1]})})},// 设置圣诞setsd: function () {let promis = this.settime('-12-25')let that = thispromis.then((arr) => {that.setData({sd_year: arr[0],sd_days: arr[1]})})},

附注：调用的时候要人为的补全日期，也就是不足10要在前面补个0，这部分代码在开发工具上就算不补全也是可以用的。但是在iphone 6s ios12下，不补全，就无效。不知道这个是不是bug，其他手机没测试，不清楚不补全是否可用。建议用的时候还是人为补全日期吧。

小结，编程就是这样，很多时候我们换个思路，得出来的思路会比之前的好很多。所以，就算当前项目很紧，做完了之后，还是要多多思考。将一些当时很别扭的地方多想一下，没准就能想出更好的解决思路。

这一点无论是对个人还是项目，都是有益的。

10-24更新备注：取当前日期的时间戳计算天数存在bug，有1天的差异。所以将settime:function() 中获取当前日期的时间戳，改成了获取当前时间的时间戳，因为后续是用Math.floor()函数向下取整，能够解决时间点带来的时间戳差异的问题。

最后看一下效果（第一张图片上的字和第二张最底部的灰色字体，2018-10-24更新）

推荐一下我自己的前端学习群562862926，里面有大神总结的一套前端教学视频，欢迎有兴趣的朋友进群一起学习

小程序中计算距离某个节日还剩多少天相关推荐

微信小程序+laravel8 计算距离
后端API接口 public function length(){$stear = \request()->get('stear'); // dd($stear);$end = \request ...
微信小程序——小程序中计算属性的使用
1.下载npm包 npm install --save miniprogram-computed 2.微信开发者工具--工具 --构建npm --构建完成点击确定 demo.js const comp ...
微信外卖小程序怎么计算与客户的距离_外卖订单少收益低？开发一个小程序皆可以提解决...
外卖是大部分上班族解决吃饭问题的不二之选,因此近几年来外卖行业发展的如火如荼.一些商家赚了个"盆满体满",一些商家却遭遇订单数量少.收益低等问题.因此这些商家都非常想知道,怎么做才 ...
微信小程序中这么简单的设置页面背景图及字体颜色的方法，你还不会？
在微信小程序中,我们不免的要设置背景图片和字体颜色. 那怎么样才能做到简单的设置背景图片和字体颜色呢? 话不多说,直接开讲首先先说怎么设置页面背景图片: 这是博主准备的照片. 下面是在wxml中的代 ...
在c 语言里如何制作滑动图片大小,[教程]教你在微信小程序中实现手势缩放图片...
在小程序中,image 组件的 mode 有 12 种,其中只有三种是缩放模式.而在这三种之中,只有 aspectFit 模式可以等比例缩放图片,并显示完整的图片.此模式是保证图片长边完整地显示出来, ...
html img 手势缩放,微信小程序中利用image组件实现图片手势缩放
微信小程序中利用image组件实现图片手势缩放,前端大神严灏的牛文,讲解了微信小程序中image组件的三种是缩放模式,三种之中,只有 aspectFit 模式可以等比例缩放图片,并显示完整的图片. 原 ...
小程序中所有组件学习
视图容器 view 视图容器属性名类型默认值说明最低版本 hover-class String none 指定按下去的样式类.当 hover-class="none" 时 ...
小程序多个echars_微信小程序中使用echarts以及踩坑总结
人在家中坐,锅从天上来. 半个月前本来在家写着一个项目,还没来得及提测,领导突然一个电话,需要立刻去支援另一个项目,一打听,一个烂尾半年的项目,纵使内心不愿意,还是要去啊.因为鲁迅说过,生活就像强*, ...
小程序中神秘的用户数据
前面上一篇文章手把手教会你小程序登录鉴权介绍了小程序如何进行登录鉴权,那么一般小程序的用户标识可以使用上文所述微信提供的jscode2session接口来换取,小程序还提供了一个getUserInf ...

小程序中计算距离某个节日还剩多少天

小程序中计算距离某个节日还剩多少天相关推荐

最新文章

热门文章