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


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 相关文章推荐
jQuery层次选择器选择元素使用介绍
Apr 18 Javascript
jquery mobile实现拨打电话功能的几种方法
Aug 05 Javascript
Jquery的hover方法让鼠标经过li时背景变色
Sep 06 Javascript
jquery 中的each()跳出循环的语句
May 23 Javascript
使用js实现数据格式化
Dec 03 Javascript
d3.js实现简单的网络拓扑图实例代码
Nov 06 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
详解Vue路由钩子及应用场景(小结)
Nov 07 Javascript
vue单页缓存存在的问题及解决方案(小结)
Sep 25 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
May 30 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
Dec 26 Javascript
如何利用vue实现波谱拟合详解
Nov 05 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调用三种数据库的方法(2)
2006/10/09 PHP
一波PHP中cURL库的常见用法代码示例
2016/05/06 PHP
php文件上传类的分享
2017/07/06 PHP
JavaScript 语言的递归编程
2010/05/18 Javascript
js控制CSS样式属性语法对照表
2012/12/11 Javascript
在ASP.NET中使用JavaScript脚本的方法
2013/11/12 Javascript
字段太多jquey快速清空表单内容方法
2014/08/21 Javascript
整理JavaScript创建对象的八种方法
2015/11/03 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
jQuery获取及设置表单input各种类型值的方法小结
2016/05/24 Javascript
学习Node.js模块机制
2016/10/17 Javascript
利用JS hash制作单页Web应用的方法详解
2017/10/10 Javascript
基于nodejs res.end和res.send的区别
2018/05/14 NodeJs
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
js实现拖动缓动效果
2020/01/13 Javascript
浅谈javascript事件环微任务和宏任务队列原理
2020/09/12 Javascript
[50:05]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
详解Python实现按任意键继续/退出的功能
2016/08/19 Python
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
Python使用matplotlib绘制三维参数曲线操作示例
2019/09/10 Python
Python 音频生成器的实现示例
2019/12/24 Python
Python中常用的高阶函数实例详解
2020/02/21 Python
sklearn+python:线性回归案例
2020/02/24 Python
keras导入weights方式
2020/06/12 Python
django filter过滤器实现显示某个类型指定字段不同值方式
2020/07/16 Python
python实现计算器简易版
2020/12/17 Python
H5页面适配iPhoneX(就是那么简单)
2019/12/02 HTML / CSS
英国户外服装、鞋类和设备的领先零售商:Millets
2020/10/12 全球购物
李维斯牛仔裤荷兰官方网站:Levi’s NL
2020/08/23 全球购物
服务之星获奖感言
2014/01/21 职场文书
毕业生学校推荐信范文
2014/05/21 职场文书
争先创优心得体会
2014/09/12 职场文书
师德师风整改措施
2014/10/24 职场文书
追讨欠款律师函
2015/06/24 职场文书
小学英语课教学反思
2016/02/15 职场文书
Vue-Element-Admin集成自己的接口实现登录跳转
2021/06/23 Vue.js