点击领取 -> 程序员专属圣诞限定礼物🎁

265 阅读2分钟

sskl3-xchna.gif

前言🎄

你是否也在一个陌生的城市,过着普通平凡的生活,有时感到孤独、无助,有时也会迷茫、堕落,但为了自己的梦想却怎么也不肯服输,一天一天的坚持,一步一步的走向希望...

hello 大家好,2021就快结束了,不知道大家是否完成了年初定下的目标呢,又或者是否对这一年的工作做了总结?奥,都没有?当然不要责怪自己,只要我们还在正确的道路上前进,那大可不必为这些事斤斤计较,当然是原谅自己啦,放下包袱继续前进吧。

关于节日

虽不提倡过洋节,但今天实实在在的周末,当朋友在与女神约会时,我在写那shit一样代码,虽然我挺享受的哈哈哈,苦中作乐,顺便呢给大家准备了一份节日礼物🎁

正文

礼物其实就在最上方的动图,一行代码让你的github'绿墙'变成LED节日氛围灯!

食用方法:github个人主页打开控制台(F12)切换到consoletab下,输入下面的代码回车即可!

首先上代码

setInterval(()=>{[].forEach.call(document.getElementsByClassName("ContributionCalendar-day"),(element)=>{let shining=Math.floor(Math.random()*5)+"";let level=element.getAttribute("data-level");element.style.fill=(level==shining?"red":"");element.setAttribute("data-level",level=="4"?"1":(Number(level)+1)+"");});},1000);

接下来我为大家详解这行代码

[].forEach.call:通过call的方式调用到Array对象的forEach方法,用来遍历所有的格子(通过审查元素我们可以得知格子的类名为ContributionCalendar-day)

Math.floor(Math.random()*5)+"":生成[0-4]的随机数,因为github绿墙的等级只有5个(白,绿,绿1,绿2,绿3,数字越大颜色越深)

element.getAttribute("data-level"):获取到当前格子的颜色等级

element.style.fill=(level==shining?"red":""): 如果当前颜色等级和我们随机数生成的等级一样那么久让他变成红色,否则展示原本颜色

element.setAttribute("data-level",level=="4"?"1":(Number(level)+1)+"");:让此格子等级+1(颜色变深),背景色渐变就是靠这行代码哦

setInterval:启动一个定时器每隔1000毫秒执行一次我们的随机亮灯函数

至此我们的氛围灯就制作完毕了,最后按照自己喜好的音乐鼓点的间隔设置上面的定时器间隔,嗨皮起来 🎉