好多眼睛 | 胖胖哒

一个艺术生美女给我发了一个网址，说里面很有意思，说不管这个网页的话就会出现很多眼睛。为了看看究竟是怎么回事，于是就踏上了揭秘真相之路。

她给我的网址是一个设计师的网站，我打开后发现除了比较难看的设计图（我的主观审美鸭，没救了😂）以外，没什么特别的。等了一会儿，仍然没发生什么。在我去做别的事好长一段时间后，再把网页切回来，果然发现了一些端倪，网页上竟出现了几双眼睛。我想吐槽设计师，你这定时器设计的时间间隔也太长了吧😂。

我想那位美女艺术生可能对这些凌乱出现的眼睛感兴趣，为了让她不再焦急地等待，我就自己写了一个静态网页，一样能出现好多眼睛😂。

当然比较简单啦，就是一个定时器而已：


<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>好多眼睛</title>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        @font-face {
            font-family: StMarie;
            src: url(StMarie-Thin.otf);
        }

        * {
            margin: 0;
            padding: 0;
        }

        body {
            height: 100%;
            width: 100%;
        }

        .cdiv {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            opacity: 0.95;
            font-family: 'StMarie';
        }
    </style>

<body bgcolor="#FF9B97">
    <div class="cdiv">
        <div align="center">
            <h1>I GAZING ATYOU</h1>
            <img src='loader.gif'>
            <br> <br>
        </div>
        some text        
        <br>
    </div>
</body>
</html>

<script type="text/javascript">
    $(document).ready(function () {
        setInterval("addEye()", 2000);
    });

    function addEye() {
        var x = randomFromTo(0, $(window).width());
        x = (x + 100) > $(window).width() ? (x - 100) : x;
        var y = randomFromTo(0, $(window).height());
        y = (y + 100) > $(window).height() ? (y - 100) : y;
        var img0 = "<img src='loader.gif' height='50' width='50' style='position:absolute; left:" + x + "px; top:" + y + "px;' >"
        $("body").append(img0);
    }

    function randomFromTo(from, to) {
        return Math.floor(Math.random() * (to - from + 1) + from);
    }

</script>

这样，每隔2秒就会在随机的位置出现一只眼睛了，效果就是开头的那张图了。