-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
145 lines (96 loc) · 3.46 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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我们一起的时光</title>
<style type="text/css">
@font-face {
font-family: digit;
src: url('digital-7_mono.ttf') format("truetype");
}
</style>
<link href="css/default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/garden.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
</head>
<body>
<audio autoplay="autoplay" height="100" width="100">
<source src="bgm/yuncundexiatian.mp3" type="audio/mp3" />
</audio>
<div id="mainDiv">
<div id="content">
<div id="code">
我很喜欢用文字的方式<br />
记录一些重要的时刻<br />
换句话说,就是仪式感吧<br />
仪式感让某一刻,不同于其他时刻<br />
知乎里有人说<br />
生活里重视仪式感的人,在潜意识里最懂得暗示自己享受每一天、做好每件事<br />
在漫长无序的黑夜里,总能把一切变得有序有趣<br />
总能化解掉漫长人生里的纷繁和苦涩<br />
<br />
<br />
2016年4月,第一次见面在西安‘不老吧’......<br />
2016年中秋,大半夜的吃火锅......<br />
2016年国庆,不约而同,一趟火车去江苏上海......<br />
2016年11月11日,第一年双十一......<br />
2016年12月24日, 拿到奖学金和项目奖的我们去芙蓉园、大雁塔、小寨......<br />
2017年1月2日,上自习,西安的冬天有点冷的讲真<br />
2017年3月,开学季的西安还下雪......<br />
时间过得很快......<br />
2018年1月9日,............<br />
2018年5月,毕业旅行我们去了成都......<br />
时间过得很快......<br />
2019......<br />
2020......<br />
..........<br />
<br>
借用电影《Flipped》的台词:<br />
But every once in a while you find someone who"s iridescent, and when you do, nothing will ever compare.<br />
</div>
<div id="loveHeart">
<canvas id="garden"></canvas>
<div id="words">
<div id="messages">
亲爱的,这是我们相爱在一起的时光。
<div id="elapseClock"></div>
</div>
<div id="loveu">
斯人若彩虹,遇上方知有。<br/>
</div>
</div>
</div>
</div>
<div id="copyright">
<a> XUPT - 2016-11-11 - Friday </a><br />
<a href="#"></a><br />
</div>
</div>
<script type="text/javascript">
var offsetX = $("#loveHeart").width() / 2;
var offsetY = $("#loveHeart").height() / 2 - 55;
var together =new Date(Date.parse("2016-11-11 00:00:00".replace(/-/g,"/")));
if (!document.createElement('canvas').getContext) {
var msg = document.createElement("div");
msg.id = "errorMsg";
msg.innerHTML = "Your browser doesn't support HTML5!<br/>Recommend use Chrome 14+/IE 9+/Firefox 7+/Safari 4+";
document.body.appendChild(msg);
$("#code").css("display", "none")
$("#copyright").css("position", "absolute");
$("#copyright").css("bottom", "10px");
document.execCommand("stop");
} else {
setTimeout(function () {
startHeartAnimation();
}, 5000);
timeElapse(together);
setInterval(function () {
timeElapse(together);
}, 500);
adjustCodePosition();
$("#code").typewriter();
}
</script>
</body>
</html>