29 |
30 |
139 |
140 |
141 |
142 |
--------------------------------------------------------------------------------
/public/js/index.js:
--------------------------------------------------------------------------------
1 | var extend = function extend(base) {
2 | for (var _len = arguments.length, extensions = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
3 | extensions[_key - 1] = arguments[_key];
4 | }
5 |
6 | return Object.assign.apply(Object, [{}, base].concat(extensions));
7 | };
8 |
9 | var parseColor = function parseColor(_ref) {
10 | var h = _ref.h,
11 | s = _ref.s,
12 | l = _ref.l,
13 | a = _ref.a;
14 | return 'hsla(' + h + ',' + s + '%,' + l + '%,' + a + ')';
15 | };
16 |
17 | var Color = extend.bind(null, { h: 0, s: 100, l: 100, a: 1 });
18 |
19 | var Vector = extend.bind(null, { x: 0, y: 0 });
20 |
21 | var Particle = extend.bind(null, {
22 | pos: Vector(),
23 | vel: Vector(),
24 | angle: 0,
25 | speed: 0,
26 | radius: 0,
27 | rotation: 0,
28 | color: Color()
29 | });
30 |
31 | var colors = [Color({ h: 20, s: 100, l: 50 }), Color({ h: 200, l: 50 }), Color({ h: 300, l: 50 }), Color({ h: 100, l: 40 })];
32 |
33 | var animationLoop = function animationLoop(scope) {
34 | if (scope.animation) {
35 | scope.animation(animationLoop.bind(null, scope));
36 | }
37 |
38 | var ctx = scope.ctx;
39 | var canvas = ctx.canvas;
40 |
41 | var rc = rough.canvas(canvas);
42 | ctx.clearRect(0, 0, canvas.width, canvas.height);
43 |
44 | scope.particles.map(function (p, i) {
45 | p.pos.y -= p.speed;
46 | if (i % 2) {
47 | p.pos.x = p.pos.x + Math.sin(p.angle) * .2;
48 | } else {
49 | p.pos.x = p.pos.x - Math.cos(p.angle) * .2;
50 | }
51 | p.angle += .01;
52 | rc.circle(p.pos.x, p.pos.y, p.radius, {
53 | fill: parseColor(p.color),
54 | roughness: Math.random() * 1.5,
55 | hachureGap: p.hachureGap,
56 | hachureAngle: p.hachureAngle
57 | });
58 | rc.line(p.pos.x, p.pos.y + p.radius * 1.2, p.pos.x, p.pos.y + p.radius / 2, {
59 | bowing: Math.random() * 3
60 | });
61 | if (p.pos.y + p.radius * 3 < 0) {
62 | p.pos.y = canvas.height + p.radius * 3;
63 | p.pos.x = Math.random() * (canvas.width - p.radius);
64 | }
65 | });
66 | };
67 |
68 | var scope = {
69 | animation: requestAnimationFrame.bind(null),
70 | ctx: document.createElement('canvas').getContext('2d'),
71 | title: 'Brian Douglas',
72 | rotation: 0,
73 | particles: []
74 | };
75 |
76 | ~function (scope) {
77 | var canvas = scope.ctx.canvas;
78 |
79 |
80 | canvas.width = window.innerWidth;
81 | canvas.height = window.innerHeight;
82 | document.body.appendChild(canvas);
83 |
84 | var particleCount = 50;
85 | while (particleCount--) {
86 | scope.particles.push(Particle({
87 | pos: {
88 | x: Math.random() * canvas.width,
89 | y: Math.random() * canvas.height
90 | },
91 | speed: Math.random() + .2,
92 | radius: Math.random() * 60 + 20,
93 | color: colors[Math.floor(Math.random() * colors.length)],
94 | hachureAngle: Math.random() * 90,
95 | hachureGap: Math.random() * 8 + 1
96 | }));
97 | }
98 |
99 | animationLoop(scope);
100 | }(scope);
101 |
102 | if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
103 | window.addEventListener('resize', function () {
104 | scope.ctx.canvas.width = window.innerWidth;
105 | scope.ctx.canvas.height = window.innerHeight;
106 | });
107 | }
--------------------------------------------------------------------------------
/public/js/wmgwdw.js:
--------------------------------------------------------------------------------
1 | var rough=function(){"use strict";function a(){return{LEFT:0,RIGHT:1,INTERSECTS:2,AHEAD:3,BEHIND:4,SEPARATE:5,UNDEFINED:6}}var b=Math.tan,c=Math.pow,d=Math.cos,e=Math.sin,f=Math.PI,g=Math.sqrt,h=Math.max,j=Math.min,i=Math.abs,k=Number.MAX_VALUE;class l{constructor(b,c,d,e){this.RoughSegmentRelationConst=a(),this.px1=b,this.py1=c,this.px2=d,this.py2=e,this.xi=k,this.yi=k,this.a=e-c,this.b=b-d,this.c=d*c-b*e,this._undefined=0==this.a&&0==this.b&&0==this.c}isUndefined(){return this._undefined}compare(d){if(this.isUndefined()||d.isUndefined())return this.RoughSegmentRelationConst.UNDEFINED;var e=k,f=k,g=0,l=0,m=this.a,n=this.b,b=this.c;return(1e-5
20 |
30 | );
31 | }
32 | }
33 |
34 | export default App;
35 |
--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(
21 |
22 | 
{
23 | this.setState({ class: 'bounceOutRight', show: true })
24 | }} />
25 |
26 |
28 | {main()}
29 | 你收到一封信，点击查收！
27 | 34 | if (current == '<') { 35 | index = str.indexOf('>', index) + 1; 36 | } 37 | else { 38 | index++; 39 | } 40 | //位运算符: 根据setInterval运行奇偶次来判断是否加入下划线字符“_”，使输入效果更逼真 41 | if (index < str.length - 1) { //打印字符倒数第2个字符开始，不加下划线字符，以防止结束符可能会多输出一下划线字符 42 | _this.html(str.substring(0, index) + (index & 1 ? '_' : '')); 43 | } else { 44 | _this.html(str.substring(0, index)); 45 | clearTimeout(timer); 46 | }; 47 | setTimeout(fn, 200) 48 | }; 49 | // 延迟1s开始 50 | setTimeout(timer, 1000); 51 | }; 52 | $("#autotype").autotype(); 53 | } 54 | time = (year, month, day) => { 55 | var dateNow = new Date(); 56 | var dateJNR = new Date(year, month - 1, day); 57 | // var anniversary = parseInt((dateNow - dateJNR) / (365*24*3600*1000)) 58 | var d = parseInt((dateNow - dateJNR) / (24 * 3600 * 1000)); 59 | var hour = parseInt(((dateNow - dateJNR) / (3600 * 1000)) % 24); 60 | var minute = parseInt((dateNow - dateJNR) / (1000 * 60) % 60); 61 | var second = parseInt((dateNow - dateJNR) / 1000 % 60); 62 | this.setState({ date: { d: d, hour: hour, minute: minute, second: second } }); 63 | }; 64 | render() { 65 | const date = () => { 66 | if (this.state.date.d !== undefined) { 67 | const { d, hour, minute, second } = this.state.date 68 | return (
我们已经一起走过了: {d} 天 {hour} 小时 {minute} 分 {second} 秒
69 | ) 70 | } 71 | } 72 | return ( 73 |
74 |
104 |
105 | )
106 | }
107 | }
108 | export default Main
--------------------------------------------------------------------------------
/src/animateplus.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Animate Plus v2.0.1
3 | * Copyright (c) 2017-2018 Benjamin De Cock
4 | * http://animateplus.com/license
5 | */
6 |
7 |
8 | // logic
9 | // =====
10 |
11 | const first = ([item]) => item;
12 |
13 | const isFunction = operand => typeof operand == "function";
14 |
15 |
16 | // dom
17 | // ===
18 |
19 | const getElements = elements => {
20 | if (Array.isArray(elements))
21 | return elements;
22 | if (!elements || elements.nodeType)
23 | return [elements];
24 | return Array.from(typeof elements == "string" ? document.querySelectorAll(elements) : elements);
25 | };
26 |
27 | const accelerate = (element, keyframes) =>
28 | element.style.willChange = keyframes
29 | ? keyframes.map(({property}) => property).join()
30 | : "auto";
31 |
32 |
33 | // color conversion
34 | // ================
35 |
36 | const hexPairs = color => {
37 | const split = color.split("");
38 | const pairs = color.length < 5
39 | ? split.map(string => string + string)
40 | : split.reduce((array, string, index) => {
41 | if (index % 2)
42 | array.push(split[index - 1] + string);
43 | return array;
44 | }, []);
45 | if (pairs.length < 4)
46 | pairs.push("ff");
47 | return pairs;
48 | };
49 |
50 | const convert = color =>
51 | hexPairs(color).map(string => parseInt(string, 16));
52 |
53 | const rgba = hex => {
54 | const color = hex.slice(1);
55 | const [r, g, b, a] = convert(color);
56 | return `rgba(${r}, ${g}, ${b}, ${a / 255})`;
57 | };
58 |
59 |
60 | // easing equations
61 | // ================
62 |
63 | const pi2 = Math.PI * 2;
64 |
65 | const getOffset = (strength, period) =>
66 | period / pi2 * Math.asin(1 / strength);
67 |
68 | const easings = {
69 | "linear": progress => progress,
70 |
71 | "in-cubic": progress => progress ** 3,
72 | "in-quartic": progress => progress ** 4,
73 | "in-quintic": progress => progress ** 5,
74 | "in-exponential": progress => 1024 ** (progress - 1),
75 | "in-circular": progress => 1 - Math.sqrt(1 - progress ** 2),
76 | "in-elastic": (progress, amplitude, period) => {
77 | const strength = Math.max(amplitude, 1);
78 | const offset = getOffset(strength, period);
79 | return -(strength * 2 ** (10 * (progress -= 1)) * Math.sin((progress - offset) * pi2 / period));
80 | },
81 |
82 | "out-cubic": progress => --progress ** 3 + 1,
83 | "out-quartic": progress => 1 - --progress ** 4,
84 | "out-quintic": progress => --progress ** 5 + 1,
85 | "out-exponential": progress => 1 - 2 ** (-10 * progress),
86 | "out-circular": progress => Math.sqrt(1 - --progress ** 2),
87 | "out-elastic": (progress, amplitude, period) => {
88 | const strength = Math.max(amplitude, 1);
89 | const offset = getOffset(strength, period);
90 | return strength * 2 ** (-10 * progress) * Math.sin((progress - offset) * pi2 / period) + 1;
91 | },
92 |
93 | "in-out-cubic": progress =>
94 | (progress *= 2) < 1
95 | ? .5 * progress ** 3
96 | : .5 * ((progress -= 2) * progress ** 2 + 2),
97 | "in-out-quartic": progress =>
98 | (progress *= 2) < 1
99 | ? .5 * progress ** 4
100 | : -.5 * ((progress -= 2) * progress ** 3 - 2),
101 | "in-out-quintic": progress =>
102 | (progress *= 2) < 1
103 | ? .5 * progress ** 5
104 | : .5 * ((progress -= 2) * progress ** 4 + 2),
105 | "in-out-exponential": progress =>
106 | (progress *= 2) < 1
107 | ? .5 * 1024 ** (progress - 1)
108 | : .5 * (-(2 ** (-10 * (progress - 1))) + 2),
109 | "in-out-circular": progress =>
110 | (progress *= 2) < 1
111 | ? -.5 * (Math.sqrt(1 - progress ** 2) - 1)
112 | : .5 * (Math.sqrt(1 - (progress -= 2) * progress) + 1),
113 | "in-out-elastic": (progress, amplitude, period) => {
114 | const strength = Math.max(amplitude, 1);
115 | const offset = getOffset(strength, period);
116 | return (progress *= 2) < 1
117 | ? -.5 * (strength * 2 ** (10 * (progress -= 1)) * Math.sin((progress - offset) * pi2 / period))
118 | : strength * 2 ** (-10 * (progress -= 1)) * Math.sin((progress - offset) * pi2 / period) * .5 + 1;
119 | }
120 | };
121 |
122 | const decomposeEasing = string => {
123 | const [easing, amplitude = 1, period = .4] = string.trim().split(" ");
124 | return {easing, amplitude, period};
125 | };
126 |
127 | const ease = ({easing, amplitude, period}, progress) =>
128 | easings[easing](progress, amplitude, period);
129 |
130 |
131 | // keyframes composition
132 | // =====================
133 |
134 | const extractRegExp = /-?\d*\.?\d+/g;
135 |
136 | const extractStrings = value =>
137 | value.split(extractRegExp);
138 |
139 | const extractNumbers = value =>
140 | value.match(extractRegExp).map(Number);
141 |
142 | const sanitize = values =>
143 | values.map(value => {
144 | const string = String(value);
145 | return string.startsWith("#") ? rgba(string) : string;
146 | });
147 |
148 | const addPropertyKeyframes = (property, values) => {
149 | const animatable = sanitize(values);
150 | const strings = extractStrings(first(animatable));
151 | const numbers = animatable.map(extractNumbers);
152 | const round = first(strings).startsWith("rgb");
153 | return {property, strings, numbers, round};
154 | };
155 |
156 | const createAnimationKeyframes = (keyframes, index) =>
157 | Object.entries(keyframes).map(([property, values]) =>
158 | addPropertyKeyframes(property, isFunction(values) ? values(index) : values));
159 |
160 | const getCurrentValue = (from, to, easing) =>
161 | from + (to - from) * easing;
162 |
163 | const recomposeValue = ([from, to], strings, round, easing) =>
164 | strings.reduce((style, string, index) => {
165 | const previous = index - 1;
166 | const value = getCurrentValue(from[previous], to[previous], easing);
167 | return style + (round && index < 4 ? Math.round(value) : value) + string;
168 | });
169 |
170 | const createStyles = (keyframes, easing) =>
171 | keyframes.reduce((styles, {property, numbers, strings, round}) => {
172 | styles[property] = recomposeValue(numbers, strings, round, easing);
173 | return styles;
174 | }, {});
175 |
176 | const reverseKeyframes = keyframes =>
177 | keyframes.forEach(({numbers}) => numbers.reverse());
178 |
179 |
180 | // animation tracking
181 | // ==================
182 |
183 | const rAF = {
184 | all: new Set,
185 | add(object) {
186 | if (this.all.add(object).size < 2) requestAnimationFrame(tick);
187 | }
188 | };
189 |
190 | const paused = {};
191 |
192 | const trackTime = (timing, now) => {
193 | if (!timing.startTime) timing.startTime = now;
194 | timing.elapsed = now - timing.startTime;
195 | };
196 |
197 | const resetTime = object =>
198 | object.startTime = 0;
199 |
200 | const getProgress = ({elapsed, duration}) =>
201 | duration > 0 ? Math.min(elapsed / duration, 1) : 1;
202 |
203 | const setSpeed = (speed, value, index) =>
204 | speed > 0 ? (isFunction(value) ? value(index) : value) / speed : 0;
205 |
206 | const addAnimations = (options, resolve) => {
207 | const {
208 | elements = null,
209 | easing = "out-elastic",
210 | duration = 1000,
211 | delay: timeout = 0,
212 | speed = 1,
213 | loop = false,
214 | optimize = false,
215 | direction = "normal",
216 | change = null,
217 | ...rest
218 | } = options;
219 |
220 | const last = {
221 | totalDuration: -1
222 | };
223 |
224 | getElements(elements).forEach(async (element, index) => {
225 | const keyframes = createAnimationKeyframes(rest, index);
226 | const animation = {
227 | element,
228 | keyframes,
229 | loop,
230 | optimize,
231 | direction,
232 | change,
233 | easing: decomposeEasing(easing),
234 | duration: setSpeed(speed, duration, index)
235 | };
236 |
237 | const animationTimeout = setSpeed(speed, timeout, index);
238 | const totalDuration = animationTimeout + animation.duration;
239 |
240 | if (direction != "normal")
241 | reverseKeyframes(keyframes);
242 |
243 | if (optimize)
244 | accelerate(element, keyframes);
245 |
246 | if (totalDuration > last.totalDuration) {
247 | last.animation = animation;
248 | last.totalDuration = totalDuration;
249 | }
250 |
251 | if (animationTimeout) await delay(animationTimeout);
252 | rAF.add(animation);
253 | });
254 |
255 | const {animation} = last;
256 | if (!animation) return;
257 | animation.end = resolve;
258 | animation.options = options;
259 | };
260 |
261 | const tick = now => {
262 | const {all} = rAF;
263 | all.forEach(object => {
264 | trackTime(object, now);
265 | const {element, keyframes, loop, optimize, direction, change, easing, end} = object;
266 | const progress = getProgress(object);
267 |
268 | // object is an animation
269 | if (direction) {
270 | let curve = progress;
271 | switch (progress) {
272 | case 0:
273 | if (direction == "alternate") reverseKeyframes(keyframes);
274 | break;
275 | case 1:
276 | if (loop)
277 | resetTime(object);
278 | else {
279 | all.delete(object);
280 | if (optimize) accelerate(element);
281 | }
282 | if (end) end(object.options);
283 | break;
284 | default:
285 | curve = ease(easing, progress);
286 | }
287 |
288 | if (change && end) change(curve);
289 | if (element) Object.assign(element.style, createStyles(keyframes, curve));
290 | return;
291 | }
292 |
293 | // object is a delay
294 | if (progress < 1) return;
295 | all.delete(object);
296 | end(object.duration);
297 | });
298 |
299 | if (all.size) requestAnimationFrame(tick);
300 | };
301 |
302 | document.addEventListener("visibilitychange", () => {
303 | const now = performance.now();
304 |
305 | if (document.hidden) {
306 | const {all} = rAF;
307 | paused.time = now;
308 | paused.all = new Set(all);
309 | all.clear();
310 | return;
311 | }
312 |
313 | const {all, time} = paused;
314 | if (!all) return;
315 | const elapsed = now - time;
316 | requestAnimationFrame(() =>
317 | all.forEach(object => {
318 | object.startTime += elapsed;
319 | rAF.add(object);
320 | }));
321 | });
322 |
323 |
324 | // exports
325 | // =======
326 |
327 | export default options =>
328 | new Promise(resolve => addAnimations(options, resolve));
329 |
330 | export const delay = duration =>
331 | new Promise(resolve => rAF.add({
332 | duration,
333 | end: resolve
334 | }));
335 |
336 | export const stop = elements => {
337 | const {all} = rAF;
338 | const nodes = getElements(elements);
339 | all.forEach(object => {
340 | if (nodes.includes(object.element)) all.delete(object);
341 | });
342 | return nodes;
343 | };
344 |
--------------------------------------------------------------------------------
/src/audio/gbqq.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rychou/two_years/032c294a79dc6ab342e4cd5cbf5370dff6334a0f/src/audio/gbqq.mp3
--------------------------------------------------------------------------------
/src/audio/wnsdl.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rychou/two_years/032c294a79dc6ab342e4cd5cbf5370dff6334a0f/src/audio/wnsdl.mp3
--------------------------------------------------------------------------------
/src/icon/爱心.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rychou/two_years/032c294a79dc6ab342e4cd5cbf5370dff6334a0f/src/icon/爱心.png
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 0;
4 | font-family: sans-serif;
5 | }
6 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 | import 'antd/dist/antd.css'
6 | import 'animate.css'
7 | import registerServiceWorker from './registerServiceWorker';
8 |
9 | ReactDOM.render({date()}
75 |
76 |
102 |
103 | 哈喽！wuli趴布猪！
77 |在煽情开始之前，先放首歌当背景音乐吧！Music!
78 |今天是我们两周年的纪念日，从2016年4月23日到现在，我们一起经历了许许多多的事情， 79 | 有欢笑也有争吵，也曾因为一些事情闹过分手，但是我们都走过来了。
80 |高三那会，每天都期待着见到你，上课的时候视线会不自觉的到你身上；吃早餐帮你打好早餐，帮你洗早餐盒； 81 | 下课的时候假装凑到你身边看看你在干啥，有没有不会的题目，然后就可以教你做题，表面上是想展现 82 | 自己的学霸风采。实际上啊，是因为喜欢和你呆在一起。喜欢看你的甜美的笑容，喜欢轻轻地闻你的发香， 83 | 慢慢地开始喜欢你身上的一切。当从别人口中得知你喜欢我这句话时候，我那一整天都笑的合不拢嘴，晚上也睡不着，脑海里一直重复着那句话。 84 |
85 |在4月23日那天晚上，在书店，我还记得清清楚楚，你穿着T恤和短裤，头发还散发着清香，我的心好像有什么感应一样，一靠近你就开始加速跳动。 86 | 在回去的路上，我正要说出“我喜欢你”这四个字的时候，你突然打断我说：“我也是！”。那一刻感觉时间都静止了， 87 | 整个人都处于一种飘飘然的状态。再到后来高考后的那个暑假，也是我一生当中最难忘的暑假，初吻、约会、每天都歪腻在一起，真心的感谢你陪我度过的那些时光。 88 |
89 |然后我们就开始了漫长的异地恋，还记得我们异地后的第一次见面嘛，分别那天傍晚，一个人开着电动车哭到哽咽，口头上说着没事，但没想到分别竟然是如此刺痛，那时候我就决定， 90 | “我魏锐，非汪雅秋不娶”。在异地的期间里，我们一起去过很多地方，留下过很多难忘的回忆。有人说：“异地恋其实并不难坚持，因为它真实地考验了 91 | 两个人的心”。是啊！我们异地经历的那些事，让我们能够看清对方的真心，也让我们的感情更加深厚。最近很喜欢《谁愿放手》中的一句话，“年年月月逝去越是觉得深爱你”。 92 |
93 |我不善于文字表达，写这一个网页和说那么多话也就想表达“我爱你”这简单的三个字而已，说煽情一点就是：“我的心室是单人间，只住得下你一人！” 94 | 好期待以后结束异地后的同居生活啊，希望那一天早点到来。 95 |
96 |最后祝wuli趴布猪两周年纪念日快乐哦！
97 |
98 |
101 | 爱你的♥魏锐
99 |2018年4月23日
100 |