微信小程序定制报价_微信小程序中怎么核算间隔某个节日还有多少天

  • 栏目:行业动态 时间:2021-01-07 12:33 分享新闻到:
<返回列表

微信小程序中如何计算距离某个节日还有多少天       这篇文章主要给大家介绍了关于微信小程序中如何计算距离某个节日还有多少天的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧

先看一下页面效果:

页面是这样的:

好了,正文如下

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

因为后台没空理我,所以本文讲解在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()函数向下取整,能够解决时间点带来的时间戳差异的问题。
最后看一下效果(第一张图片上的字和第二张最底部的灰色字体,更新)

总结

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


分享新闻到:

更多阅读

微信小程序定制报价_微信小程序中怎么核

行业动态 2021-01-07
手机微信微信小程序中怎样测算间距某一传统节日也有是多少天 本文关键给大伙儿详细...
查看全文

小程序如何实现盈利_layui完成checkbox的目

行业动态 2021-01-07
layui完成checkbox的文件目录树tree的事例 今日网编就为大伙儿共享一篇layui完成checkbox的文...
查看全文

互连网怎样创建网站-自贡企业网站建设不

行业动态 2021-01-07
处理互联网要求 传送网站使用价值咨询顾问一对一具体指导 + 排行上 + 帮您找顾客 + 拓客已不...
查看全文
返回全部新闻


区域站点: 南丰县网页开发   南宫市网页ui   囊谦县网页设计与制作   南和县学生个人网页优秀模板   南华县网页开发   南江县网页ui   南京市网页设计与制作   南靖县学生个人网页优秀模板   南康市网页开发   南乐县网页ui   南陵县网页设计与制作   南宁市学生个人网页优秀模板   南平市网页开发   南皮县网页ui   南市区网页设计与制作   南通市学生个人网页优秀模板   南投县网页开发   南雄市网页ui   南溪县网页设计与制作   南阳市学生个人网页优秀模板   南漳县网页开发   南召县网页ui   南郑县网页设计与制作   那坡县学生个人网页优秀模板   那曲县网页开发   纳雍县网页ui   讷河市网页设计与制作   内黄县学生个人网页优秀模板   内江市网页开发   内丘县网页ui   内乡县网页设计与制作   嫩江市学生个人网页优秀模板   聂荣县网页开发   尼玛县网页ui   尼木县网页设计与制作   宁安市学生个人网页优秀模板   宁波市网页开发   宁城县网页ui   宁德市网页设计与制作   宁都县学生个人网页优秀模板   宁国市网页开发   宁海县网页ui   宁化县网页设计与制作   宁晋县学生个人网页优秀模板   宁陵县网页开发   宁明县网页ui   宁南县网页设计与制作   宁强县学生个人网页优秀模板   宁陕县网页开发   宁武县网页ui   宁乡市网页设计与制作   宁阳县学生个人网页优秀模板   宁远县网页开发   农安县网页ui   磐安县网页设计与制作   盘锦市学生个人网页优秀模板   盘山县网页开发   磐石市网页ui   盘州市网页设计与制作   蓬安县学生个人网页优秀模板   澎湖县网页开发   蓬莱市网页ui   彭山县网页设计与制作   蓬溪县学生个人网页优秀模板   彭阳县网页开发   彭泽县网页ui   彭州市网页设计与制作   偏关县学生个人网页优秀模板   平安县网页开发   平昌县网页ui   平定县网页设计与制作   屏东县学生个人网页优秀模板   平度市网页开发   平果县网页ui   平和县网页设计与制作   平湖市学生个人网页优秀模板   平江县网页开发   平乐县网页ui   平凉市网页设计与制作   平利县学生个人网页优秀模板   平罗县网页开发   平陆县网页ui   屏南县网页设计与制作   平泉市学生个人网页优秀模板   屏山县网页开发   平顺县网页ui   平塘县网页设计与制作   平潭县学生个人网页优秀模板   平武县网页开发   萍乡市网页ui   平乡县网页设计与制作   平阳县学生个人网页优秀模板   平遥县网页开发   平阴县网页ui   平邑县网页设计与制作   平远县学生个人网页优秀模板   平舆县网页开发   皮山县网页ui   普安县网页设计与制作   浦北县学生个人网页优秀模板   浦城县网页开发   普洱市网页ui   普格县网页设计与制作   浦江县学生个人网页优秀模板   普兰县网页开发   普宁市网页ui   莆田市网页设计与制作   迁安市学生个人网页优秀模板   乾安县网页开发   潜江市网页ui   潜山市网页设计与制作  

友情链接: 永久免费手机建站 网页建站 网站建设制作 手机网站建设

Copyright © 2002-2020 网页设计与制作_学生个人网页优秀模板_网页开发_网页ui_网页设计大作业 版权所有 (网站地图) 备案号:粤ICP备10235580号