forked from henauyang/henauyang.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
235 lines (213 loc) · 9.35 KB
/
index.html
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表白情书</title>
<link type="text/css" rel="stylesheet" href="renxi/default.css">
<script type="text/javascript" src="renxi/jquery.min.js"></script>
<script type="text/javascript" src="renxi/jscex.min.js"></script>
<script type="text/javascript" src="renxi/jscex-parser.js"></script>
<script type="text/javascript" src="renxi/jscex-jit.js"></script>
<script type="text/javascript" src="renxi/jscex-builderbase.min.js"></script>
<script type="text/javascript" src="renxi/jscex-async.min.js"></script>
<script type="text/javascript" src="renxi/jscex-async-powerpack.min.js"></script>
<script type="text/javascript" src="renxi/functions.js" charset="utf-8"></script>
<script type="text/javascript" src="renxi/love.js" charset="utf-8"></script>
<style type="text/css">
<!--
.STYLE1 {
color: #666666
}
-->
</style>
</head>
<body>
<!--<audio autoplay="autoplay">-->
<!--<!– <source src="renxi.mp3" type="audio/mp3" />–>-->
<!-- <source src="renxi.mp3" type="audio/mpeg" />-->
<!--</audio>-->
<audio controls autoplay="autoplay" loop="loop">
<!-- <source src="horse.ogg" type="audio/ogg">-->
<source src="renxi.mp3" type="audio/mpeg" />
<!--您的浏览器不支持 audio 元素。-->
</audio>
<div id="main">
<div id="error">本页面采用HTML5编辑，目前您的浏览器无法显示，请换成谷歌(Chrome)或者火狐(Firefox)浏览器，或者其他游览器的最新版本。</div>
<div id="wrap">
<div id="text">
<div id="code"> <font color="#FF0000"> <span class="say">致最可爱的<p1 style="color: black;">赵潇颖</p1>同学:</span><br>
<span class="say">亲爱的<p1 style="color: black;">赵潇颖</p1>，今天是你28岁生日。</span><br>
<span class="say">首先祝你生日快乐！</span><br>
<span class="say">这一刻我等了很久，不知道你是否也是一样？此刻你又在想什么呢？</span><br>
<span class="say">我一直自认为是个理性大于感性的人，我会做很多规划，但是你的出现打破了这些。</span><br>
<span class="say">我会忍不住提前向你告白，会不由自主的牵你的手，会说太多莫名其妙的“傻话”。</span><br>
<span class="say">和你的交谈总是那么的放松，与你在一起出去玩一天却好像一分钟那么快。</span><br>
<span class="say">我喜欢你的修养品德，喜欢你的“喋喋不休”，喜欢你的“钝感”。</span><br>
<span class="say">你会以我工作为重，会鼓励我年轻多奋斗拒绝躺平，会安慰我刚毕业国企都这样慢慢就好...</span><br>
<span class="say">我想这就是爱情吧！</span><br>
<span class="say">心中虽有千言万语，奈何文笔有限。</span><br>
<span class="say">在这车马喧嚣的快时代小火慢炖的爱情变得尤为可贵。</span><br>
<span class="say">惟愿我们后半生是一起打怪升级的队友，是相互理解包容的伴侣。</span><br>
<span class="say">是你让我相信一切都是最好的安排，而遇见你则是我最大的幸运！<span class="space"><br>
<span class="say">Last But Not the Least</span><br>
<span class="say">赵潇颖我喜欢你，做我女朋友吧！<span class="space"><br>
<span class="say" style="color: blue; ">你愿意给我这个机会么？<span class="space"><br>
<span class="say" style="color: black; ">------杨坤-------<span class="space"><br>
<span class="say" style="color: black; ">------2024.01.18-------<span class="space"><br>
</font>
</p>
</div>
</div>
<<div id="clock-box"> <span class="STYLE1"></span><font color="#33CC00">
TO BE CONTINUED </font> <span class="STYLE1">...</span>
<div id="clock"></div>
</div>
<canvas id="canvas" width="1100" height="680"></canvas>
</div>
</div>
<script>
(function(){
var canvas = $('#canvas');
if (!canvas[0].getContext) {
$("#error").show();
return false; }
var width = canvas.width();
var height = canvas.height();
canvas.attr("width", width);
canvas.attr("height", height);
var opts = {
seed: {
x: width / 2 - 20,
color: "rgb(190, 26, 37)",
scale: 2
},
branch: [
[535, 680, 570, 250, 500, 200, 30, 100, [
[540, 500, 455, 417, 340, 400, 13, 100, [
[450, 435, 434, 430, 394, 395, 2, 40]
]],
[550, 445, 600, 356, 680, 345, 12, 100, [
[578, 400, 648, 409, 661, 426, 3, 80]
]],
[539, 281, 537, 248, 534, 217, 3, 40],
[546, 397, 413, 247, 328, 244, 9, 80, [
[427, 286, 383, 253, 371, 205, 2, 40],
[498, 345, 435, 315, 395, 330, 4, 60]
]],
[546, 357, 608, 252, 678, 221, 6, 100, [
[590, 293, 646, 277, 648, 271, 2, 80]
]]
]]
],
bloom: {
num: 700,
width: 1080,
height: 650,
},
footer: {
width: 1200,
height: 5,
speed: 10,
}
}
var tree = new Tree(canvas[0], width, height, opts);
var seed = tree.seed;
var foot = tree.footer;
var hold = 1;
canvas.click(function(e) {
var offset = canvas.offset(), x, y;
x = e.pageX - offset.left;
y = e.pageY - offset.top;
if (seed.hover(x, y)) {
hold = 0;
canvas.unbind("click");
canvas.unbind("mousemove");
canvas.removeClass('hand');
}
}).mousemove(function(e){
var offset = canvas.offset(), x, y;
x = e.pageX - offset.left;
y = e.pageY - offset.top;
canvas.toggleClass('hand', seed.hover(x, y));
});
var seedAnimate = eval(Jscex.compile("async", function () {
seed.draw();
while (hold) {
$await(Jscex.Async.sleep(10));
}
while (seed.canScale()) {
seed.scale(0.95);
$await(Jscex.Async.sleep(10));
}
while (seed.canMove()) {
seed.move(0, 2);
foot.draw();
$await(Jscex.Async.sleep(10));
}
}));
var growAnimate = eval(Jscex.compile("async", function () {
do {
tree.grow();
$await(Jscex.Async.sleep(10));
} while (tree.canGrow());
}));
var flowAnimate = eval(Jscex.compile("async", function () {
do {
tree.flower(2);
$await(Jscex.Async.sleep(10));
} while (tree.canFlower());
}));
var moveAnimate = eval(Jscex.compile("async", function () {
tree.snapshot("p1", 240, 0, 610, 680);
while (tree.move("p1", 500, 0)) {
foot.draw();
$await(Jscex.Async.sleep(10));
}
foot.draw();
tree.snapshot("p2", 500, 0, 610, 680);
// 会有闪烁不得意这样做, (＞﹏＜)
canvas.parent().css("background", "url(" + tree.toDataURL('image/png') + ")");
canvas.css("background", "#ffe");
$await(Jscex.Async.sleep(300));
canvas.css("background", "none");
}));
var jumpAnimate = eval(Jscex.compile("async", function () {
var ctx = tree.ctx;
while (true) {
tree.ctx.clearRect(0, 0, width, height);
tree.jump();
foot.draw();
$await(Jscex.Async.sleep(25));
}
}));
var textAnimate = eval(Jscex.compile("async", function () {
var together = new Date();
together.setFullYear(2023,10,27); //时间年月日
together.setHours(0); //小时
together.setMinutes(0); //分钟
together.setSeconds(0); //秒前一位
together.setMilliseconds(0); //秒第二位
$("#code").show().typewriter();
$("#clock-box").fadeIn(500);
while (true) {
timeElapse(together);
$await(Jscex.Async.sleep(1000));
}
}));
var runAsync = eval(Jscex.compile("async", function () {
$await(seedAnimate());
$await(growAnimate());
$await(flowAnimate());
$await(moveAnimate());
textAnimate().start();
$await(jumpAnimate());
}));
runAsync().start();
})();
</script>
<div style="text-align:center;">
<p><a href="index.html" title="逗比的猪窝">再看一遍</a></p>
<p><a href="check.html" title="逗比的猪窝">大事件</a></p>
</div>
</body>
</html>