我正在参加「码上挑战赛」概况请看：码上挑战赛来了！

前语

中秋这天刚好碰上和女朋友在一起的 五周年 了，想来五年风风雨雨依然好好的，挺是慨叹，也挺满意的。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 初步，不断的去操练提升，根底进阶两手抓。