用简单的JavaScript脚本吓唬你的网站访客

姓名：闫伟  学号：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’分配给你想修改的文本。

然后就可以开森地去吓人了！