情侣空间动态时间效果，你学废了吗？
前言
中秋这天刚好碰上和女朋友在一起的 五周年 了，想来五年风风雨雨仍然好好的，挺是感慨，也挺满足的。qq情侣空间也毫不意外的准点报时了，闲来无事点进去看了看，瞥到一个动效，觉得很有意思，于是打算自己动手实现一下，也算是尝试了。
动效长这样：
码上掘金
思路解析
日期函数的使用频率可以说是很高了，不管是原生手写也好，还是用的 day.js 这种第三方库，在业务开发中我们经常需要处理日期进行展示。由于这边的时间处理不复杂，因此我们直接手写一个就好了。
获取年月日我们分别使用 getFullYear() 和 getMonth() 还有 getDate() ，需要注意的是，很多新手小伙伴经常会把 getDay() 误以为是获取日的功能，实际上是用的 getDate() 实现的，还有一个需要注意的地方是，获取月份的函数 getMonth() ，获取的时间范围是 (0,11) ，没错，它是从 0 开始的，最后为了展示我们还需要让它 +1 。
时分秒我们分别使用 getHours() 和 getMinutes() 还有 getSeconds() 三个方法，其中，分和秒的函数返回的是 (0, 59)，也就是说不超过两位数的话，输出形式是个位数，我们需要手动补 0，可以通过字符串拼接过 padStart() 实现。
最后，我们观察一下这个效果，实际上它只有最后一个数字是向上淡出的，也就是说我们只要处理这个数字就好了，那么问题就简单了。
我们先将秒的个位和十位分开，将它们分为两个部分单独展示，这样我们就可以单独处理这个数字的特效了。
向上淡出，你第一思路是什么？
对了，是定位+透明，我们就用这个思路试一试。
一开始给它设置为相对定位 position: relative。接下来实现动效，为了让它不断的有这么个淡出效果，我们自然而然想到要使用动画，从当前位置开始，结束的时候增大透明度并且向上移动，逻辑很快就写好了。
涉及知识点
1. Date 日期类
Date.prototype.getDate()：根据本地时间，返回一个指定的Date对象为一个月中的哪一日（1-31）。Date.prototype.getFullYear()：根据本地时间，返回一个指定的Date对象的完整年份（四位数年份）。Date.prototype.getHours()：根据本地时间，返回一个指定的Date对象的小时（0–23）。Date.prototype.getMinutes()：根据本地时间，返回一个指定的Date对象的分钟数（0–59）。Date.prototype.getMonth()：根据本地时间，返回一个指定的Date对象的月份（0–11），0 表示一年中的第一月。Date.prototype.getSeconds()：根据本地时间，返回一个指定的Date对象的秒数（0–59）。
2. 时间补零
getMinutes() 和 getSeconds() 获取的时间是没有前缀零的，我们可以判断一下，如果时间小于 10 ，则用 0 拼接。
也可以使用 padStart() 进行补零操作。
关于 padStart() 的更多用法，详见：String.prototype.padStart() - JavaScript | MDN (mozilla.org)
结束语
相信不少小伙伴像我一样，因为行业原因，工作中动效开发频率很低，这块的实战经验也很薄弱，为了以后能更好的搬砖，我们应该从小 demo 开始，不断的去练习提升，基础进阶两手抓。
来源：juejin.cn/post/7142412506815250445
