姓名：闫伟 学号：15020150038
转载自：https://zhuanlan.zhihu.com/p/48117403
【嵌牛导读】：又到万圣节，想没想过让你的网站也能应应景“吓唬”一下访客？只用一个简单的 JavaScript 函数和一点 CSS“黑魔法”，就能实现这个小把戏！
【嵌牛鼻子】：JavaScript CSS
【嵌牛提问】：如何用JavaScript脚本来实现"吓唬"的功能?
【嵌牛正文】：
第一步：选择你的网页
首先，需要选好你想在哪个网页吓唬访客。等选好以后，只需将下方代码脚本放在 HTML 文件里。
<div class="ghost-container">
<img class=ghost src="ghost_pic.png" alt="A picture of a scary ghost!">
</div>
这里提供一张供你吓人用的幽灵效果图（为了防止吓到小朋友所以其实并不吓人）：
在线获取地址：
https://www.thinkful.com/learn/static/guides/halloween-programming-tutorial/ghost_pic.png
当然，你也能自己选择其它觉得更可怕的图！
第二步：创建或修改你的 CSS Stylesheet
现在，我们去把幽灵的初始显示修改为隐藏方式，这样当访客来到网页时，幽灵就能出其不意地跳出来，吓唬他们。
.ghost-container { width: 100%; position: absolute; text-align: center; visibility: hidden; } .ghost { z-index: 10; display: block; width: 550px; position: relative; margin: auto; }
第三步：设置你的 JavaScript 文件
接着，我们添加一个 JavaScript 文件，让网页上的幽灵效果更真实些——让它有声音和光临效果！下方代码使用 setTimeout 将计时器设置为 5 秒钟，在访客打开网页 5 秒后， setTimeout 会触发幽灵，让幽灵发出刺耳的尖叫。这里提供一种声音效果，点击在线下载：
https://www.thinkful.com/learn/static/guides/halloween-programming-tutorial/file.wav
你也可以自定义其它声音。
var ghost = document.getElementsByClassName("ghost-container")[0]; var sound = new Audio("file.wav"); //5秒钟后展示幽灵，并播放声音 setTimeout(function () { sound.load(); sound.play(); ghost.style.visibility = "visible"; }, 5000); //幽灵显示1秒钟后将其隐藏 setTimeout(function () { ghost.style.visibility = "hidden"; }, 6000);
第四步：最后一步
确保将你的 CSS 和 JavaScript 文件链接到你的 HTML 文件中，这里我们将它们包含在‘head’部分。
就这样，当访客打开页面后，下面这个小家伙就会尖叫着出来吓唬访客一秒钟：
可以再惊悚点（当然了吓出事你要负责）
还可以再应用一些 CSS 样式，让网页上的文字散发出诡异的光芒。只需拷贝下方代码，将类‘text-glow’分配给你想修改的文本。
然后就可以开森地去吓人了！
