《中秋佳节倍思亲》——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 =0let 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 =falselet count2 =falselet count3 =falseconst 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}else{
        pop.style.animation ="pop2 .5s ease-in-out forwards"
        count1 =false}}
btn1.onclick=function(){
    vid.style.display ="none"// text = text || 0if(/*text === 0 || text === "USERNAME"*/username.innerHTML ===''|| username.innerHTML ==='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 ||0if(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 ="阁下请输入1~6位的大名"
        top1.style.boxShadow ="0 0 5px 2px #ad200f"}}
username.innerHTML =JSON.parse(localStorage.getItem('obj'))let bln =JSON.parse(localStorage.getItem('boolean'))let obj ={userName: userName.value,booLean: bln
}// obj.booLean = JSON.parse(localStorage.getItem('boolean'))
sumbit.onclick=function(){
    nametext = nametext ||0if(nametext !==0){if(String(nametext).length >=1&&String(nametext).length <=6){
            userName.value = nametext
            text = nametext
            obj.userName = text
            localStorage.setItem('obj',JSON.stringify(obj.userName))
            username.innerHTML =JSON.parse(localStorage.getItem('obj'))
            pop.style.animation ="pop2 .5s ease-in-out forwards"setTimeout(function(){
                pop.style.transition ="none"},500)
            count1 =false;// alert(obj.userName)}else{
            userName.value ="请输入小于六位的大名"}}else{
        userName.value ="阁下请输入1~6位的大名"}}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"},110* j);setTimeout(()=>{
                        oList2[i].style.animation ="dancing2 .8s ease-in-out infinite"},140* j);setTimeout(()=>{
                        oList3[i].style.animation ="dancing3 .9s ease-in-out infinite"},160* j);setTimeout(()=>{
                        oList4[i].style.animation ="dancing4 .9s ease-in-out infinite"},180* j);setTimeout(()=>{
                        oList5[i].style.animation ="dancing5 1s ease-in-out infinite"},200* j);setTimeout(()=>{
                        oList6[i].style.animation ="dancing6 1s ease-in-out infinite"},220* j);setTimeout(()=>{
                        oList7[i].style.animation ="dancing7 1.2s ease-in-out infinite"},240* j);setTimeout(()=>{
                        oList8[i].style.animation ="dancing6 1s ease-in-out infinite"},220* j);setTimeout(()=>{
                        oList9[i].style.animation ="dancing5 1s ease-in-out infinite"},200* j);setTimeout(()=>{
                        oList10[i].style.animation ="dancing4 .9s ease-in-out infinite"},180* j);setTimeout(()=>{
                        oList11[i].style.animation ="dancing3 .9s ease-in-out infinite"},160* j);setTimeout(()=>{
                        oList12[i].style.animation ="dancing2 .8s ease-in-out infinite"},140* j);setTimeout(()=>{
                        oList13[i].style.animation ="dancing1 .8s ease-in-out infinite"},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"},110* j)setTimeout(()=>{
                        oList2[i].style.animation ="paused"},140* j)setTimeout(()=>{
                        oList3[i].style.animation ="paused"},160* j)setTimeout(()=>{
                        oList4[i].style.animation ="paused"},180* j)setTimeout(()=>{
                        oList5[i].style.animation ="paused"},200* j)setTimeout(()=>{
                        oList6[i].style.animation ="paused"},220* j)setTimeout(()=>{
                        oList7[i].style.animation ="paused"},240* j)setTimeout(()=>{
                        oList8[i].style.animation ="paused"},220* j)setTimeout(()=>{
                        oList9[i].style.animation ="paused"},200* j)setTimeout(()=>{
                        oList10[i].style.animation ="paused"},180* j)setTimeout(()=>{
                        oList11[i].style.animation ="paused"},160* j)setTimeout(()=>{
                        oList12[i].style.animation ="paused"},140* j)setTimeout(()=>{
                        oList13[i].style.animation ="paused"},120* j)}else{
                    ratebg.style.bottom ="-100%"}}}
        count3 =false
        music.pause()}}
btn2.onclick=functionbtn2click(){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"
    obj.booLean ='true'
    localStorage.setItem('boolean',JSON.stringify(obj.booLean))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)}// 判空条件if(username.innerHTML ===''){
    username.innerHTML ='USERNAME'
    btn1.classList.add("act")
    btn1_1.classList.remove("act")}else{alert(obj.booLean)if(obj.booLean ==='true'){alert(obj.booLean)
        btn1.classList.remove("act")
        btn1_1.classList.add("act")}else{
        btn1.classList.add("act")
        btn1_1.classList.remove("act")}}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】