《中秋佳节倍思亲》——2022年这场中秋

中秋佳夜，圆的是月，满的是情，但一人终究扛下离愁

作为一个杭漂者，虽不及北漂般艰难困苦，但也举步维艰啊！

或许，这对我而言，正是一个别样的中秋，也正是一个值得我一生纪念的中秋；

2021年12月25日，22届计算机科班考研开始，考场上奋笔疾书的写下了前九个月所有的努力；

26日下午五点，出场那一瞬间，释怀的感叹，让我不禁相信这来自二战的一切煎熬都是值得的，或许也包括我曾放弃的；

在等待结果的过程里，按耐不住的我，来杭看了看未来我要定居的城市和要见的人。所以，便早早告别了家人，赶着元旦之前就来到了梦想的地方，也正是从这开始，我的杭漂来了！

这里写目录标题

一、这一方土地，留另一方人，举步维艰

可能，我这一段杭漂在许多人的人生境遇中不值一提，但至于他的存在，确实值得我去记忆；

1. 隔离

来杭的第一段经历，就是遭受疫情所带来的一系列反应——【隔离】；

隔离了14天之久，终究还是错失了最佳的寒假兼职时段；无奈之下，只能海投一些低端服务行业，最后好在找到了一份，可那极累而又底薪的工作之下，只能维持了这里的基本生活需求。

一个月后，假期结束，协议相伴到期，复试结果也随之越来越近，在这里，我还是始终相信我有希望读研的；可是生活里急需的开销仍在不断的加重着；

2. 骑手

第二份兼职工作，于生活所迫之下诞生；这时的我已处于开学之后，兼职工作甚少之际，本想回归本业，寻求一份和前端相关的技术工作，可招聘的应届生实习门槛让我望而却步，身为往届生，难道我真的没有机会了吗？我依旧尝试海投，在投遍了，投累了之后，基本生活压力也越来越大；

没办法，我只能选择相对自由高薪但艰苦的行业——骑手，可成为骑手的第一天，便经历了摔跤，受伤，差评等一系列不顺利的事情，可打不到的精神，总是会安慰自己说： 身为男人，这不就是体现担当的时候嘛？ 所以在这期间的一直跌倒和爬起的过程，我都始终相信等初试结果出来了，这一切就都值得了；

然而，到最后，我都只是在幻想罢了；

3. 初试成绩

2022年2月21日，初试成绩查询开始，这种开始或许也对应了我的结束，我与研无关了；我所不能接受的事实终究还是发生了，是的，然而我并不知道原因，虽然我依旧相信感觉是骗不了我的，可这一次，它确实是开了一个大玩笑；

我甚至开始懊悔于自己二战的冲动，也甚至悔恨之前所拒绝的offer

可是为时已晚，明天依旧还要送餐，但那一夜，我还是选择了网吧通宵，这或许是我最好的选择，身在异乡，用孤独品尝内心的绝望，用麻木麻醉自己的欲望；

失去了应届生实习的机会，战败在了考研的战场，让人无欲的工作经验，让我在外卖这个行业坚持了整整三个月，因为我不想就这样埋没于送餐之中，我不想对不起我的学历，我更不想对不起陪我走过且又支持我鼓励我的所有人；

4. 谷底

辞职，学习，更新简历，是我决定寻找前端开发工程师要做的第一步策略，在整个七月里，我没有工作，一直都在选择自我学习，更文，写代码，开发项目，投简历；我并不知道我这样做到底有没有意义，但是我尝试过，我才能领悟真谛；

我从海投逐渐转变为定向投放，尽量寻找一个符合自己需求且契合公司要求的工作，可招聘消息栏中的【很遗憾不能与您共事，期待未来有合作机会】一步一步消磨着我的信心，可我依旧想要当个小强🪳，所以怎么可能会被打到；

毕竟我都已经败了那么多次，绝望又能如何？再失败一次又能如何？

5. 进修

八月，我进修了一个月，这期间我没有再选择继续投放简历，因为我怕简历投放的保护期；
在这期间，我能做的就是不断的更新博客，不断的看课，不断地开发新项目；

并为自己设立下了一个成为前端全栈开发工程师的目标，期待着一种未知的未来；

因此，八月的高产，让我开发了不少项目，也学会了不少面试技巧，但这些终究都只是毛皮，因为实践的过程里，我仍然需要很多；

6. 希望

九月十月黄金期，此时的市场，正是需要人才的时候，而这个时候的中秋，也是我唯一一次一人在外的中秋，或许在这段日子里，我能有所期待，加油！！！

二、我的中秋

身为一个正在求职的人，哪有什么中秋礼盒呀，哦不，工作虽然未定，但中秋依旧要过；

毕竟人生就是这样，每一本剧本都不一样，但每一本都有存在的价值；

所以，这就是我的中秋礼盒啦（买不起，咱就用代码做啦！！！），当然我也已经将网页上传到服务器上面啦，小伙伴们就也去领取自己的月饼吧花好月圆，祝大家梦想成真，幸福美满

点击领取 http://chaiquan3.ueuo.com

1. 项目展示

2. 功能实现

主要实现前端功能有用户登录、弹窗、推拉门、播放音乐、音谱跳动显示、领取月饼及领取特效、查看版 权信息等；

具体JS功能代码样例：

// 开启按钮let btn1 = document.getElementById("button1");// 开启后按钮let btn1_1 = document.getElementById("button1_1");// 视频let vid = document.getElementById("video");// 左门let left = document.getElementById("left");// 右门let right = document.getElementById("right");// 登录弹窗let pop = document.getElementById("pop")// 挂饰let ribt = document.getElementById("ribt");// 导航栏用户名let username = document.getElementById("user_name");let text = username.innerHTML;// 输入框内容let userName = document.getElementById("username");let nametext =0;// 登录按钮let sumbit = document.getElementById("sumbit");// 输入框边框let top1 = document.getElementById("top1");// 音乐播放控制按钮let musicbtn = document.getElementById("musicbtn");// 音乐暂停let music2 = document.getElementById("music2");// 音乐播放let music1 = document.getElementById("music1");// 音乐控制let music = document.getElementById("music");// 月饼领取按钮let btn2 = document.getElementById("button2");// 食用月饼let tool = document.getElementById("tool");let eat = document.getElementById("eat");// 挂饰弹窗控制变量let count1 =false;// 开启按钮控制变量let count2 =false;// 音乐控件控制变量let count3 =false;// 按钮涟漪效果const active = document.querySelector('.active');
active.addEventListener('mousedown',function(e){const left = e.clientX - e.currentTarget.offsetLeft;const top = e.clientY - e.currentTarget.offsetTop;const rip = document.createElement('span');
    rip.style.left = left +'px';
    rip.style.top = top +'px';
    active.appendChild(rip);setTimeout(()=>{ rip.remove()},750);})// 挂饰单独控制弹窗进出
ribt.onclick=function(){if(count1 ===false){
        pop.style.animation ="pop1 .5s ease-in-out forwards";
        count1 =true;
        btn1.disabled="true"}else{
        pop.style.animation ="pop2 .5s ease-in-out forwards"
        count1 =false;
        btn1.disabled="flase"}}// 开启按钮事件
btn1.onclick=function(){// 隐藏视频
    vid.style.display ="none"// 判断导航栏用户内容
    text = text ||0;// 空值，弹出登录窗口if(text ===0|| text ==="USERNAME"){
        pop.style.animation ="pop1 .5s ease-in-out forwards";setTimeout(function(){
            pop.style.transition ="none";},500)
        count2 =true;}else{// 隐藏开启按钮
        btn1.classList.remove("act");// 开窗效果
        left.style.marginLeft ="-28vw";
        right.style.marginRight ="-28vw";
        right.style.transition ="all 3s";
        left.style.transition ="all 3s";// 挂饰右移
        ribt.style.left ="98%"
        ribt.style.transition ="all 3s"// 完成事件后，清除过渡效果setTimeout(function(){
            left.style.transition ="none";
            right.style.transition ="none";
            ribt.style.transition ="none";},3500)}}// 输入框内容监测【触发+非触发】functioninInput(that){
    userName.value ="";
    top1.style.boxShadow ="0 0 5px 0px #fcf1ba";
    userName.value = that.value;
    nametext = userName.value;}functionoutInput(that){
    userName.value = that.value;
    nametext = userName.value;
    nametext = nametext ||0;if(nametext !==0){// 检测字符长度if(String(nametext).length >=1&&String(nametext).length <=6){// 输入正确
            top1.style.boxShadow ="0 0 5px 2px #03ac61";}else{
            userName.value ="请输入小于六位的大名";// 输入错误
            top1.style.boxShadow ="0 0 5px 2px #ad200f";}}else{
        userName.value ="阁下请输入4~12位的大名";//   输入错误
        top1.style.boxShadow ="0 0 5px 2px #ad200f";}}//登录事件
sumbit.onclick=function(){// 检测输入判空
    nametext = nametext ||0;if(nametext !==0){// 检测字符长度if(String(nametext).length >=1&&String(nametext).length <=6){
            userName.value = nametext;// 传值给导航栏用户框
            text = nametext;
            username.innerHTML = text;
            pop.style.animation ="pop2 .5s ease-in-out forwards";setTimeout(function(){
                pop.style.transition ="none";},500)
            count1 =false;}else{
            userName.value ="请输入小于六位的大名";}}else{
        userName.value ="阁下请输入4~12位的大名";}}// 音谱变量let ul1 = document.getElementById("ul1");let oList1 = ul1.querySelectorAll("li");let ul2 = document.getElementById("ul2");let oList2 = ul2.querySelectorAll("li");let ul3 = document.getElementById("ul3");let oList3 = ul3.querySelectorAll("li");let ul4 = document.getElementById("ul4");let oList4 = ul4.querySelectorAll("li");let ul5 = document.getElementById("ul5");let oList5 = ul5.querySelectorAll("li");let ul6 = document.getElementById("ul6");let oList6 = ul6.querySelectorAll("li");let ul7 = document.getElementById("ul7");let oList7 = ul7.querySelectorAll("li");let ul8 = document.getElementById("ul8");let oList8 = ul8.querySelectorAll("li");let ul9 = document.getElementById("ul9");let oList9 = ul9.querySelectorAll("li");let ul10 = document.getElementById("ul10");let oList10 = ul10.querySelectorAll("li");let ul11 = document.getElementById("ul11");let oList11 = ul11.querySelectorAll("li");let ul12 = document.getElementById("ul12");let oList12 = ul12.querySelectorAll("li");let ul13 = document.getElementById("ul13");let oList13 = ul13.querySelectorAll("li");// 音谱背景变量let ratebg = document.getElementById("ratebg");// 音乐播放控制
musicbtn.onclick=function(){if(count3 ===false){
        music2.classList.remove("act");
        music1.classList.add("act")
        musicbtn.style.animation ="music 3s linear infinite";
        count3 =true;
        music.play();// 音谱进场for(let i =0; i < oList1.length; i++){for(let j =0; j < oList1.length; j++){if(j === i){setTimeout(()=>{
                        oList1[i].style.animation ="dancing1 .8s ease-in-out infinite"// oList1[i].style.top = "0";},110* j);setTimeout(()=>{
                        oList2[i].style.animation ="dancing2 .8s ease-in-out infinite"// oList1[i].style.top = "0";},140* j);setTimeout(()=>{
                        oList3[i].style.animation ="dancing3 .9s ease-in-out infinite"// oList1[i].style.top = "0";},160* j);setTimeout(()=>{
                        oList4[i].style.animation ="dancing4 .9s ease-in-out infinite"// oList1[i].style.top = "0";},180* j);setTimeout(()=>{
                        oList5[i].style.animation ="dancing5 1s ease-in-out infinite"// oList1[i].style.top = "0";},200* j);setTimeout(()=>{
                        oList6[i].style.animation ="dancing6 1s ease-in-out infinite"// oList1[i].style.top = "0";},220* j);setTimeout(()=>{
                        oList7[i].style.animation ="dancing7 1.2s ease-in-out infinite"// oList1[i].style.top = "0";},240* j);setTimeout(()=>{
                        oList8[i].style.animation ="dancing6 1s ease-in-out infinite"// oList1[i].style.top = "0";},220* j);setTimeout(()=>{
                        oList9[i].style.animation ="dancing5 1s ease-in-out infinite"// oList1[i].style.top = "0";},200* j);setTimeout(()=>{
                        oList10[i].style.animation ="dancing4 .9s ease-in-out infinite"// oList1[i].style.top = "0";},180* j);setTimeout(()=>{
                        oList11[i].style.animation ="dancing3 .9s ease-in-out infinite"// oList1[i].style.top = "0";},160* j);setTimeout(()=>{
                        oList12[i].style.animation ="dancing2 .8s ease-in-out infinite"// oList1[i].style.top = "0";},140* j);setTimeout(()=>{
                        oList13[i].style.animation ="dancing1 .8s ease-in-out infinite"// oList1[i].style.top = "0";},120* j);}else{
                    ratebg.style.bottom ="-8%"}}}}else{
        music2.classList.add("act");
        music1.classList.remove("act");
        musicbtn.style.animationPlayState ="paused";for(let i =0; i < oList1.length; i++){for(let j =0; j < oList1.length; j++){if(j === i){setTimeout(()=>{
                        oList1[i].style.animationPlayState ="paused"// oList1[i].style.top = "0";},110* j);setTimeout(()=>{
                        oList2[i].style.animation ="paused"// oList1[i].style.top = "0";},140* j);setTimeout(()=>{
                        oList3[i].style.animation ="paused"// oList1[i].style.top = "0";},160* j);setTimeout(()=>{
                        oList4[i].style.animation ="paused"// oList1[i].style.top = "0";},180* j);setTimeout(()=>{
                        oList5[i].style.animation ="paused"// oList1[i].style.top = "0";},200* j);setTimeout(()=>{
                        oList6[i].style.animation ="paused"// oList1[i].style.top = "0";},220* j);setTimeout(()=>{
                        oList7[i].style.animation ="paused"// oList1[i].style.top = "0";},240* j);setTimeout(()=>{
                        oList8[i].style.animation ="paused"// oList1[i].style.top = "0";},220* j);setTimeout(()=>{
                        oList9[i].style.animation ="paused"// oList1[i].style.top = "0";},200* j);setTimeout(()=>{
                        oList10[i].style.animation ="paused"// oList1[i].style.top = "0";},180* j);setTimeout(()=>{
                        oList11[i].style.animation ="paused"// oList1[i].style.top = "0";},160* j);setTimeout(()=>{
                        oList12[i].style.animation ="paused"// oList1[i].style.top = "0";},140* j);setTimeout(()=>{
                        oList13[i].style.animation ="paused"// oList1[i].style.top = "0";},120* j);}else{
                    ratebg.style.bottom ="-100%"}}}
        count3 =false;
        music.pause();}}// 月饼领取控制
btn2.onclick=function(){let colr1 = document.getElementById("btn2_bg");let colr2 = document.getElementById("btn4_bg");let img1 = document.getElementById("img1");let img2 = document.getElementById("img2");let img3 = document.getElementById("img3")let img4 = document.getElementById("img4")
    colr1.classList.add("button3");
    colr2.classList.add("button3");
    img1.classList.remove("act");
    img2.classList.add("act");
    img3.classList.add("act");
    img4.classList.add("act");
    tool.style.animation ="tool 4s .5s ease-in-out forwards"
    eat.style.animation ="eat 6s 4.5s ease-out forwards"setTimeout(function(){
        right.style.transition ="all 3s";
        left.style.marginLeft ="4vw";
        right.style.marginRight ="4vw";
        left.style.transition ="all 3s";
        ribt.style.left ="82%"
        ribt.style.transition ="all 3s";},11000)setTimeout(function(){
        left.style.transition ="none";
        right.style.transition ="none";
        ribt.style.transition ="none"},14500)setTimeout(function(){
        btn1_1.classList.add("act")},14000)}// 版权声明let logo = document.getElementById("logo");let copyright = document.getElementById("copyright")let count4 =false;
logo.onclick=function(){if(count4 ===false){
        copyright.style.top ="0.26vw";
        copyright.style.transition ="all 1s"
        count4 =true;}else{
        copyright.style.top ="-24vw";
        count4 =false;}}

具体效果实现：

1. 登录弹窗效果
2. 开启音乐显示音乐频谱效果：
3. 登录效果：
4. 打开礼盒效果：
5. 领取月饼效果：
6. 领取完毕效果：
7. 版权声明：

3. 技术栈

① 就布局而言：
● 项目采用了Bootstrap框架实现页面整体的响应式布局，以及利用了VW和Rem技术设置网页元素宽高位置，实现内容随视 口大小缩放；
● 对元素父级使用了Flex布局，防止子级元素脱标，使网页更具有灵活性；
② 就开发方式而言：
● HTML采用了部分HTML5的开发模式，实现代码的语义化，优化网页的编译速度；
● CSS的编写过程被LESS所替代，实现更高效的编写效率；
● JS的编写采用了LET变量声明的方式，从本质上杜绝了VER的四大常见缺陷！

4. 维护优化

① 为了提高网页的响应速度实现用户良好的交互效果，在未设置后端内容的前提下，通过优化素材格式和采用了多域名负载 网页内多个文件的方式实现项目优化过程；
② LESS文档中均引入变量名称，可在修改参数的过程中，通过修改变量来完成，因此该操作可减少无效的劳动

最后

就来一些关于中秋的祝福语吧：

一轮明月，一盒月饼，淡淡相思浓浓亲情；一桌家宴，一壶美酒，亲友团聚久别重逢；一句问候，一声祝福，欢歌笑语其乐融融

祝大家中秋快乐，未来的日子会更加美好，我也一样

对了，这是我项目的GitHub源码，有需要的可自行下载：
【GitHub文档链接：https://github.com/JunJie-maker/Mid-autumn-Festival.git】