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


Posted in Javascript onJuly 15, 2019

先看一下页面效果:

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

页面是这样的:

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

好了,正文如下

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

因为后台没空理我,所以本文讲解在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]
   })
  })
 },

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

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

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

10-24更新备注:取当前日期的时间戳计算天数存在bug,有1天的差异。所以将settime:function()  中获取当前日期的时间戳,改成了获取当前时间的时间戳,因为后续是用Math.floor()函数向下取整,能够解决时间点带来的时间戳差异的问题。
最后看一下效果(第一张图片上的字和第二张最底部的灰色字体,2018-10-24更新)

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

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Google Map Api和GOOGLE Search Api整合实现代码
Jul 18 Javascript
jquery 触发a链接点击事件解决方案
May 02 Javascript
谈谈target=_new和_blank的不同之处
Oct 25 Javascript
浅谈jquery中next与siblings的区别
Oct 27 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
Dec 08 Javascript
JavaScript错误处理和堆栈追踪详解
Apr 18 Javascript
Vue项目webpack打包部署到服务器的实例详解
Jul 17 Javascript
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
ExtJs整合Echarts的示例代码
Feb 27 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
Mar 16 Javascript
微信小程序实现上传图片裁剪图片过程解析
Aug 22 Javascript
原生JS实现天气预报
Jun 16 Javascript
微信小程序基础教程之worker线程的使用方法
Jul 15 #Javascript
使用vue-router在Vue页面之间传递数据的方法
Jul 15 #Javascript
微信小程序在其他页面监听globalData中值的变化
Jul 15 #Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
Jul 15 #Javascript
微信小程序全局变量改变监听的实现方法
Jul 15 #Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
Jul 15 #Javascript
微信小程序如何使用canvas二维码保存至手机相册
Jul 15 #Javascript
You might like
默默简单的写了一个模板引擎
2007/01/02 PHP
PHP HTML代码串 截取实现代码
2009/06/29 PHP
php中常用字符串处理代码片段整理
2011/11/07 PHP
解析php中curl_multi的应用
2013/07/17 PHP
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
asp.net和php的区别点总结
2019/10/10 PHP
jQuery 页面 Mask实现代码
2010/01/09 Javascript
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
jQuery编写widget的一些技巧分享
2010/10/28 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
2013/10/08 Javascript
一个简单的jquery进度条示例
2014/04/28 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
利用JavaScript阻止表单提交的两种方法
2016/08/11 Javascript
微信小程序 配置文件详细介绍
2016/12/14 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
微信小程序实现折叠面板
2018/01/31 Javascript
浅谈FastClick 填坑及源码解析
2018/03/02 Javascript
Vue-路由导航菜单栏的高亮设置方法
2018/03/17 Javascript
使用webpack搭建react开发环境的方法
2018/05/15 Javascript
jQuery插件jsonview展示json数据
2018/05/26 jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
如何使用webpack打包一个库library的方法步骤
2019/12/18 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
python快速查找算法应用实例
2014/09/26 Python
Python的Scrapy爬虫框架简单学习笔记
2016/01/20 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
用python做游戏的细节详解
2019/06/25 Python
Python 实现黑客帝国中的字符雨的示例代码
2020/02/20 Python
解决python3.x安装numpy成功但import出错的问题
2020/11/17 Python
美国Rue La La闪购网站:奢侈品、中高档品牌限时折扣
2016/10/19 全球购物
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
学生评语大全
2014/04/18 职场文书
2016年清明节网上祭英烈活动总结
2016/04/01 职场文书
MySQL中in和exists区别详解
2021/06/03 MySQL
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers