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


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 相关文章推荐
javascript 命名规则 变量命名规则
Feb 25 Javascript
javascript instanceof,typeof的区别
Mar 24 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
Mar 18 Javascript
javascript继承的六大模式小结
Apr 13 Javascript
jQuery实现的仿百度分页足迹效果代码
Oct 30 Javascript
EasyUI布局 高度自适应
Jun 04 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
Aug 25 Javascript
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
Jan 14 Javascript
vue父子组件间引用之$parent、$children
May 20 Javascript
JavaScript 中for/of,for/in 的详细介绍
Nov 17 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
在PHP中使用灵巧的体系结构
2006/10/09 PHP
php cookie 登录验证示例代码
2009/03/16 PHP
ThinkPHP3.1新特性之对Ajax的支持更加完善
2014/06/19 PHP
PHP速成大法
2015/01/30 PHP
WordPres对前端页面调试时的两个PHP函数使用小技巧
2015/12/22 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
jquery ajax方式直接提交整个表单核心代码
2013/08/15 Javascript
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
2014/03/03 Javascript
Javscript调用iframe框架页面中函数的方法
2014/11/01 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
2014/11/23 Javascript
js实现字符串转日期格式的方法
2015/05/20 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
2017/04/20 Javascript
全面介绍vue 全家桶和项目实例
2017/12/27 Javascript
vue配置请求本地json数据的方法
2018/04/11 Javascript
Angular5中状态管理的实现
2018/09/03 Javascript
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
原生js+ajax分页组件
2020/01/30 Javascript
vue中activated的用法
2021/01/03 Vue.js
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
Python获取CPU、内存使用率以及网络使用状态代码
2018/02/08 Python
Python 3.8新特征之asyncio REPL
2019/05/28 Python
wxPython多个窗口的基本结构
2019/11/19 Python
Python while循环使用else语句代码实例
2020/02/07 Python
Python定义一个函数的方法
2020/06/15 Python
Pycharm添加虚拟解释器报错问题解决方案
2020/10/13 Python
创造美妙香氛体验:Aera扩散器和香水
2018/11/25 全球购物
党校自我鉴定范文
2013/10/02 职场文书
单位单身证明范本
2014/01/11 职场文书
初中考试作弊检讨书
2014/02/01 职场文书
诚信承诺书模板
2014/05/26 职场文书
2014年居委会工作总结
2014/12/09 职场文书
《家》读后感:万惜拯救,冷暖自知
2019/09/25 职场文书