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

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

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

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
    }
    else {
        pop.style.animation = "pop2 .5s ease-in-out forwards"
        count1 = false
    }
}
btn1.onclick = function () {
    vid.style.display = "none"
    // text = text || 0
    if (/*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)
    }
}
function inInput(that) {
    userName.value = ""
    top1.style.boxShadow = "0 0 5px 0px #fcf1ba"
    userName.value = that.value
    nametext = userName.value
}
function outInput(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 = "阁下请输入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 || 0
    if (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 = function btn2click() {
    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】