qfile指定从多少行开始_技术者丨你对JavaScript知多少（第四期）

网上很流行的黑客帝国代码雨，看起来很酷炫是不是，那么要如何实现呢？

咱们先看CSS这里，这一小段作用有点大，margin为0，就填充了整个窗口，放大缩小都不会影响。还有overflow超出隐藏，这里直接隐藏了滚动条。

下面这段代码使用了const，而const声明一个只读的常量，声明之后就不能修改了，所以在声明的同时也要进行赋值。但是在这里，我们不能修改一二三五行，而第四行我们可以进行重新赋值。这是为什么呢？

其实我们只是修改了里面的元素，而无法进行赋予其一个行的数组。

上面的代码定义了一个方法，也是“下雨”的关键操作。其实是每个单独字的闪烁来实现的，事先规划好样式，然后通过arr来调用map方法，实现字符的随机填充以及按照指定的顺序依次闪烁，超过屏幕高度或者达到随机定义的高度便会顶端再次重新闪烁。

数组arr通过调用forEach方法，将数组中每个元素在第一行进行打印，然而，forEach方法是没办法改变原数组的，所以才需要第三行代码：

arr[index] = value >= height || value > 8888 * Math.random() ? 0 : value + 10;

来手动改变数组元素，如果没有这一行，大家分析分析会发生啥，没错，第一行一直刷新。

setInterval(rain, 30);

这是最重要的一行代码，简直就是整个代码块的核心方法，因为只有他出现了，大家看到的才会有这漫天飞舞的字母。

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

道家真言也是差不多的做法，只是增加了一些代码。

上面的50均是因为字体是50px大小。

以上是本期技术分享的所有内容，如果觉得有兴趣可以自行学习相关内容。需要源码的小伙伴可以留言邮箱。

往期精选

更新于2020年09月19日

● 技术者丨你对JavaScript知多少(第三期)

●技术者丨你对JavaScript知多少(第二期)

●技术者丨你对Javascript知多少

●技术者 | 快来学习CTF，来遇见属于你的“现”男(女)友吧

●技术者 | 专业收大学习30年，满满的干货教程~

●技术者 | 满满的“干货”教程，教你搭建人与网络的“桥梁”

●技术者 | 初探HTML5：学习制作学校网页

●技术者 | 学习制作学校网页第二期，制作焦点图

●技术者 | 网页制作第三期，制作新闻导航

●技术者 | 网页制作第四期，底部的制作

●技术者 | Ps之快速换脸，杨洋瞬间变张艺兴

●技术者丨教你做简单的ps文字穿插图案效果海报

●技术者丨假装自己是个绘画大师！！！

●技术者丨Premiere视频制作第一期，制作复仇者联盟片头

●技术者丨你不了解的编程语言“Python”

持续更新中

请关注公众号噢

...

汽车与信息工程学院团委宣传部

责编 | 胡昌伟

审核 | 严斌斌章静豪