Date实战案例倒计时和日历控件,分享案例的核心思想,应用Date的方法,主要应用的date方法如下:
Date.now()
Date.parse()
getFullYear()
getMonth()
getDate()
getDay()
setDate()
案例一:倒计时
倒计时功能最典型的应用就是我们在电商App上看见的各种抢购倒计时,以及什么跨年倒计时呀,活动倒计时等等。倒计时的核心思想:就是计算目标时间和当前时间的一个时间差,我们先看本案例效果图:
以计算距离2019年倒计时为例,下面是代码分享:`
<--倒计时时间显示的标签-->复制代码
` 案例说明:通过代码,我们可以看出来,在计算时间差的方式,主要是以目标时间差的毫秒减去当前时间的毫秒方式来计算。然后把求出来的时间差计算有多少个月,多少天,多少小时,多少分,多少秒,在这个计算过程中就是简单粗暴的加减乘除了。
案例二:日历控件
日历控件是我们开发中经常使用的,典型应用就是选择一个时间,比如在做管理类系统开发时,经常需要选择一个开始时间和结束时间,用来做一个查询的区间范围,请看效果图:
日历控件的核心思想就是 获取时间,因此我们在开发的过程中就围绕该思想进行扩展。废话不多说,先看代码分享:`
复制代码
- 上月
2018年4月
下月- 星期日 星期一 星期二 星期三 星期四 星期五 星期六
`在本案例中,因为日期案例相对复杂一些,所以我给代码做了充足的注释,在看案例的同学建议你拷贝代码拿到自己的编辑器里运行,然后debugg查看步骤,这样更易于理解。
结语
在本次分享的案例有着非常高的实战意义与价值,喜欢的同学可以点波关注和赞,以示鼓励,十分感谢。