【我的知乎五周年】数据分析整理，在技术上具体是如何实现的？

特效的实现，数据的整理，数据的分析！
最好有简单的实现demo，可以用以参考！
链接：我的知乎五周年

牧清欢 · 2018-10-3 21:44:32

GitHub - PeggyZWY/happy2016

把知乎的代码拿下来做了这个，只能改改js来改变显示，后台的无法涉及。

鲁小夫 · 2018-10-3 21:44:30

“具体实现过程，数据分析整理，以及到最后的实现效果”，还要demo，你怎么不去把知乎的代码扒下来？

吐槽完了，分析一下。

那个一闪一闪的光标，段落出字的打字机效果，动画过程，都是很传统的 DOM + CSS3 动画了，中间有一个粒子效果是用 canvas 画的，大概就这样。实现倒是不难。

柳无之 · 2018-10-3 21:44:29

怎么说呢，很多条路都可以实现，其实市场上应该有一些模板，只要对应的数据表接上去就行了，说不定有后台可视化的模板，可以直接访问数据库翻译好。
不过大多是图表，不是知乎这种代码形式。

然后因为数据库是静态的，就要一些简单的公式，比如取得最早的一个值，和对应的时间，或者累加次数等等，就不细说了。

还是看看页面本身好了

我的知乎五周年zhihu-5yearsenter

复制代码

上面应该是主页的框架

然后找到提到的两个文件：

这里可以看到pv等等数据，至于调用哪里的值就不细找了，同样有很多方法可以实现

某个动作脚本
//模拟停顿，if触发，后面的wait(500)显示时间

这里import很多文件都没找到，要作者自己说了

app.js一开头调用了很多其他文件，有些看不到

又比如这个password，应该就是**********（这个我不敢明确，因为是前台审查的，不知道后台具体怎么写）

还有关于这个闪烁的图标

就是右边这个闪着的
其实就是一个png文件，然后做了个效果。

比如我们在animations.js找到这一段

发现这个magnet.png

然后你可以自己输入看看

http://2015.zhihu.com/static/img/magnet.png

复制代码

就会看到那个图标了

数据方面，前面说过，有些可以直接调用数据库，有些需要做一些简单的计算，再调用结果。也就是请求一次，计算一次。

demo就算了吧，没有数据库，demo最多给你做个静态页，谁要免费给你专门写一个，我也没话说。

【我的知乎五周年】数据分析整理，在技术上具体是如何实现的？

3 个回复