一个超级好玩的网站源码

去年秋天，我在GitHub上瞎逛，玩的网站偶然撞进一个叫“ClickBait Generator”的源码仓库。作者是个超位荷兰老哥，头像是玩的网站只戴墨镜的仓鼠。整个项目就一个index.html加一个style.css，源码不到200行，个超但打开页面那一刻我直接笑出声——它随机生成那种典型的玩的网站标题党新闻标题，配上一张扭曲的源码猫咪表情包，底下还有个“再编一条”的个超按钮。我戳了二十多下，玩的网站根本停不下来。源码

源码本身没什么高深技术。个超核心就一个JavaScript数组，玩的网站塞了三十几个词条：主语、源码动词、宾语、地点、情绪词。每次点击按钮，Math.random()各抽一个拼起来。比如“震惊！你家冰箱其实在偷偷写小说”或者“科学家发现：拖延症患者的时间流速比常人慢三倍”。关键在于它把setInterval和CSS动画揉在一起——标题会像老式打字机那样一个字一个字蹦出来，末尾还带个闪烁的光标。这种细节比纯粹的文字替换有意思多了。

const subjects = ["震惊", "重磅", "惊呆", "笑死", "可怕"]; const verbs = ["发现", "揭露", "证实", "曝光", "偷拍"]; const objects = ["你家猫", "隔壁老王", "冰箱里的剩饭", "手机充电器", "楼下快递员"]; const endings = ["竟然在干这事", "背后真相让人沉默", "99%的人不知道", "看完我哭了"]; function generate() {  const s = subjects[Math.floor(Math.random() * subjects.length)]; const v = verbs[Math.floor(Math.random() * verbs.length)]; const o = objects[Math.floor(Math.random() * objects.length)]; const e = endings[Math.floor(Math.random() * endings.length)]; return `${ s}！${ o}${ v}${ e}`; }

你可能会想，这玩意儿有什么好玩的？我一开始也这么觉得。但真正让我拍桌子的是它的“分享”按钮。点击后不会弹什么社交平台图标，而是直接把当前生成的标题塞进你剪贴板，然后按钮文字变成“已复制，快发给那个谁”。我试过把“重磅！隔壁老王揭露手机充电器竟然在干这事”发到家庭群，我妈回了三个问号，我舅转手就分享到了他的钓鱼群。你看，一个不到200行的页面，制造了一场小型社交事故。

还有个更绝的。作者在源码注释里写了一段话：“如果你把这个数组改成你老板的名字、你同事的糗事、你前任的怪癖，这网站就变成私人定制笑话机。”我照做了。把objects里的词换成公司同事的绰号，endings改成“正在会议室偷吃螺蛳粉”。午休时给隔壁工位的小李看，他愣了两秒，然后笑得把咖啡洒在键盘上。后来整个小组都来玩，有人专门负责往数组里加新词。那周我们的工作效率大概下降了15%，但快乐指数翻了三倍。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>标题党生成器</title> <style> body {  font-family: sans-serif; text-align: center; padding: 3rem; background: #fff8e7; } h1 {  font-size: 2rem; min-height: 3rem; color: #d32f2f; } button {  padding: 0.8rem 2rem; font-size: 1.2rem; background: #e6b422; border: none; border-radius: 40px; cursor: pointer; } button:hover {  background: #d4a017; } </style> </head> <body> <h1 id="title">点击按钮生成标题</h1> <button onclick="generate()">再编一条</button> <script> const subjects = ["震惊", "重磅", "惊呆", "笑死", "可怕"]; const verbs = ["发现", "揭露", "证实", "曝光", "偷拍"]; const objects = ["你家猫", "隔壁老王", "冰箱里的剩饭", "手机充电器", "楼下快递员"]; const endings = ["竟然在干这事", "背后真相让人沉默", "99%的人不知道", "看完我哭了"]; function generate() {  const s = subjects[Math.floor(Math.random() * subjects.length)]; const v = verbs[Math.floor(Math.random() * verbs.length)]; const o = objects[Math.floor(Math.random() * objects.length)]; const e = endings[Math.floor(Math.random() * endings.length)]; document.getElementById('title').innerText = `${ s}！${ o}${ v}${ e}`; } </script> </body> </html>

我后来把这个页面存成书签，放在浏览器工具栏最右边。工作卡壳的时候点一下，看它蹦出“可怕！楼下快递员偷拍冰箱里的剩饭竟然在干这事”，脑子里的死结就松了。有次开线上会，我共享屏幕时不小心点到了书签栏，整个会议室突然出现一行大红字：“惊呆！隔壁老王证实手机充电器看完我哭了”。老板沉默了三秒，说：“这个……会后发我一份。”

这源码教会我一件事：好玩的东西不需要复杂。一个数组、一个随机函数、一点自嘲精神，就能让一群人对着屏幕傻笑。那些动辄几万行的框架和库，有时候真不如这200行来得直接。你要是也想试试，把上面那段存下来，改改词库，发给你的朋友。记得别在正式场合打开——除非你想看到你老板的表情包出现在大屏幕上。