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

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

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

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

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

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

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

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


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

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

1. 隔离

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

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

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

2. 骑手

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

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

然而,到最后,我都只是在幻想罢了;

3. 初试成绩

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

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

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

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

4. 谷底

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

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

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

5. 进修

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

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

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

6. 希望

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


二、我的中秋

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

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

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

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

1. 项目展示

2. 功能实现

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

具体JS功能代码样例:

javascript">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.***/JunJie-maker/Mid-autumn-Festival.git】

转载请说明出处内容投诉
CSS教程_站长资源网 » 《中秋佳节倍思亲》——2022年这场中秋

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买