告诉你一个秘密

我正在参加「创意开发投稿大赛」详情请看：[掘金创意开发大赛来了！](https://juejin.cn/post/7120441631530549284 "https://juejin.cn/post/7120441631530549284") > 体验地址：[https://xeblog.cn/demo/love/3/?for=%E9%99%8C%E7%94%9F%E4%BA%BA](https://xeblog.cn/demo/love/3/?for=%E9%99%8C%E7%94%9F%E4%BA%BA) ## 前言三年前的七夕前夕，有个朋友找到我说：你是程序员，那你肯定会写表白程序吧，能不能帮我写一个？ ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/abca267d962c4257beb838d2e28555b0~tplv-k3u1fbpfcp-watermark.image?) 我只是个后端啊，写啥写啊，无语子... ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b0d0a9445ba346ec9f396fa0d4e01832~tplv-k3u1fbpfcp-watermark.image?) 之后，我想出了一个表白创意，这个创意可不得了，没有250的智商真就想不到，嘻嘻~ 这个创意就是，打开网页，并不会立即表达出自己的表白意向，只有当时间到达“5:20”分时，这个意向才会出现！说实话，这个表白页有亿点土，哈哈哈，而且最后的粒子效果还是我从网上复制过来的，嘻嘻~ ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e98f0bc1861e4a938c5c371bdd5954de~tplv-k3u1fbpfcp-watermark.image?) ## 代码实现 **首页代码** 代码非常的简单，就是显示一行文字。不过，需要埋点东西： * 渲染粒子效果的画布 * 背景音乐 ```html 告诉你一个秘密

当时间走到 5 : 2 0 分时，我会告诉你一个秘密哦！

``` **JavaScript 核心代码** 当时是用的 `JQuery` 写的，哈哈哈。就是有个定时器一直在定时调用 `show()` 方法，这个方法会获取当前的系统时间，然后判断当前时间是否是 `5:20` 分，当条件满足时，会播放背景音乐，并将 `5:20` 替换为 `I Love You`，首页的其它文字全部消失，最后会调用 `showName()` 方法用粒子效果显示对方的名字，嘿嘿~ ```js function show() { if (flag) { return; } var nowDate = new Date(); var h = nowDate.getHours(); var m = nowDate.getMinutes(); if (h == 5 && m == 20) { flag = true; document.getElementById('bgm').play(); $('.out').fadeOut(5000, function () { $('#scene').fadeIn(2000, function () { $('#i').text('I'); $('#love').text('Love'); $('#you').text('You'); count++; showName(); }); }); } setTimeout(show, 1500); } ``` 从 `url` 上获取名字，参数是 `for=名字` ```js $(function () { var val = getParam('for'); name = val == null || val.trim().length < 1 ? name : val; show(); }); function getParam(key) { var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) { return decodeURI(r[2]); } return null; } ``` 完整代码：[https://github.com/anlingyi/love/tree/master/3](https://github.com/anlingyi/love/tree/master/3) 体验地址：[https://xeblog.cn/demo/love/3/?for=%E9%99%8C%E7%94%9F%E4%BA%BA](https://xeblog.cn/demo/love/3/?for=%E9%99%8C%E7%94%9F%E4%BA%BA) ## 最后朋友表白失败，原因：女方起的没这么早，没有看到后面的表白效果！哎呀~ 这可不怪我哦！ ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d80362a890ce4dc4b78fd07936b1b28a~tplv-k3u1fbpfcp-watermark.image?)