好多眼睛

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

<!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秒就会在随机的位置出现一只眼睛了,效果就是开头的那张图了。

虽然很不要脸,但是还请您多多打赏 ^_^