前言很早就想做一个情感博主了，来说一说自己的生活，或者是自己的经历，终于，在今天的摸鱼中实现了这个梦想。 电脑：你就是今天没去云顶之奕 我：才不是 入坑前端之前在刚上大学的九月份，到了该报社团的日子了，各大社团，团委，学生会，神秘组织等都开始在学校贴上海报，搭起棚子，开始准备骗人，呸不对，是招新！ 这时候我就想，我应该加入哪个社团呢？我可是要成为光的男人啊，那注定不凡的我当然要选择一个看起来不凡的组织！ 最后，选择了这个当时人数为十几个人的学生开发团队–琴理工作室 琴理工作室：我们是一群平凡的人，在做着不平凡的事！ 为什么选择他呢？ 因为我很喜欢学跟计算机有关的知识，大学报的也是信息院的专业（物联网工程），所以我觉得会开发的应该很帅~ 那为什么选择前端呢？ 我当时的心里状态：前端后端好像都是开发的，前端那个学长看起来好亲切啊~，就它了！什么？前端组长还是学姐？我先冲了xdm！ 我的第一次前端考核 培训都是由每届大二学长进行 当时是进行了为期四周的培训，每周一天，完后月底进行了一次考核。 考核内容：做一个登录，把能登录的数据放在json数组里，做好表单校验，完后登 ...

欢迎小伙伴们持续关注我的面试专栏，地址：Ned的面试加油站 前言宏任务（macroTask）和微任务（microTask），都是JavaScript中异步中的一些概念，如果你对其还一头雾水，那就跟着我在捋一遍，加深一下印象。 老规矩，先上图： 梳理这块主要还是为了让自己对代码执行的逻辑能够更加的清晰，当然，某些原因的还是应对一些面试题。 什么是宏任务，什么是微任务？我们来以题入手，这应该是一道比较常见的题了： 123456789console.log(100)setTimeout(()=>{ console.log(200)})Promise.resolve().then(()=>{ console.log(300)})console.log(400)// 答案为： 100 400 300 200 问的就是，这段代码执行后，打印出来的顺序是什么？如果你心中的结果跟答案不一样的话，不要慌，首先对于同步异步有些了解的可以看出，先打印出100 400肯定是没有毛病的了，问题应该就出在200跟300上，它俩之间300为什么要 ...

前言最近真是越来越对CSS感兴趣了，于是再来整一手，夜晚的星星，再配合上皎洁的月光，这唯美的星空，它来了！ 今天带领大家，用CSS实现一下，这美丽的星空。 开始实现星空我是找了张图片，这毕竟功力有限，目前还不能人造星~，下面说一下如何将它放置在夜空中，并实现眨眼睛的效果： 运用了一个span标签，将此图片作为其背景图，来生成星星： 12345678910111213var screenW = document.documentElement.clientWidth;var screenH = document.documentElement.clientHeight;for(var i=0; i<150; i++){ var span = document.createElement('span'); document.body.appendChild(span); var x = parseInt(Math.random() * screenW); var y = parseInt(Math.random() * scree ...

前言动态的搜索框已经不是什么稀有的东西了，因为它的动，它可以出现在任何符合它位置的地方。 今天咱也来整一个，看看效果？ 大致就是最开始显示的是一个图标，鼠标移动上去的话，它就变成了正常搜索框的样子可以进行输入并搜索。 来看一下如何实现的！ 开始整活整体HTML就是一个div套着一个input跟一个a，a标签中放icon，我是复制的svg。 123456<div class="search-box"> <input class="search-txt" type="text" placeholder="动态搜索框"> <a class="search-btn"> <!--这里是icon，我放的svg--> </a></div> 在这个动上面，我这里利用的是hover效果，看上面动图也能看出来，鼠标移动上去它就变长，移开他就还原了，同时将按钮的颜色更改一下是为了让用户的体验提升一点。 总体上来说 ...

前言昨天刷某站下饭的时候，看见了一个好看的登陆页面，于是昨天晚上用代码实现了一下，今天就拿出来分享给大家。 让我们先来看看效果吧： 它触动我的点就是整体的表单和按钮仿佛都是有凸起的一样，点击效果则是凹下去，配合上透明的那种毛玻璃效果就有种很棒的感觉。 啊？你说背景？我因为懒就没有去找个图片😅 来吧让我们实现一下 开始整活整体的HTML代码: 123456<form action=""> <h1 class="title">Ned</h1> <input type="text" placeholder="用户名"> <input type="password" placeholder="密码"> <input type="submit" class="btn login" value="登 录" ></ ...

最近在准备春招了，复习一些基础的知识点，整合成一个专栏发出来，希望可以帮助到更多的小伙伴们~🥰 盒模型📦先用一张图来说明一下我会怎么来介绍盒模型： 什么是盒模型🍇其实我们大家都能经常看见它，尤其是我们前端的小伙伴们，在浏览器中打开f12就能看见这样一个动态变化的图。 它其实就是我们这篇文章的主角-盒模型。由这张图可以看出，盒模型包含了margin、border、padding、content这四个部分。 所有HTML元素都可以看作盒子，而我们平时就是盒子的搬运工。 介绍标准模型和IE模型，以及他们的区别🍈它俩的区别就一个，计算宽度（高度）的方式不一样。 标准盒模型 width = content 总宽度 = width + margin + border padding margin包含mrgin-left与margin-right 其他同理 IE盒模型 width = content + border + padding 总宽度 = width + margin CSS如何设置盒模型，以及计算对应的宽和高🍉css中有一个属性：box-sizing，我们 ...

前言代码不光是我们用来工作的，也应该是我们用来娱乐的，今天就带着小伙伴们整个活！ 看完这篇文章，你会学会如何整活~ 小时候我记得有个软件叫做金山打字通，里面有个打字的飞机大战不知道有没有小伙伴玩过，当然我整不来他那么优秀，我只能做一个较为简单的（低配版），低的好像还真挺低。 先来看看效果吧： 开始整活页面构成比较简单，一个是我们要打的字母，一个是下面的那行小字，用来做提示用。 12<div id="char">A</div><div id="result">请在按键上按下屏幕上显示的字母</div> 接下来是做一些简单的布局，就是将内容居中，颜色等做一下调整，我们先贴代码，完后在进行一个细说。 12345678910111213141516171819202122232425262728293031body{ margin: 0; /*开启弹性布局，并让弹性布局中的子元素 水平居中对齐，垂直居中对齐*/ display: flex; /* 用于设置或检索弹性 ...

前言我记得尤大曾经说过，你看Vue源码干嘛？你使用Vue又不需要它的源码，你只需要会用就行了！ 但是我们得卷啊，不卷怎么脱颖而出😥，我还记得在今年的蓝桥杯群里，有一同届的还不知道哪个大学的哥们，已经在读Vue/React/Node的源码了…..作为小菜鸡的我看着大佬侃侃而谈，在群角落里瑟瑟发抖。 最近有在牛客上复习Vue的知识，整理出这篇文章，一是方便自己未来复习，二是希望能够帮助一些跟我一样的朋友们复习一边知识点，学习在什么时候都不晚。 这篇文章会讲到： Vue的生命周期到底是什么 Vue生命周期的执行顺序 生命周期的每个阶段适合做什么 我们的请求放在哪个生命周期会更合适 当然我只会讲我理解的emm，可能会很浅，还请多包涵。 Vue的生命周期到底是什么？与其说是Vue的生命周期，我觉得不如说是其内组件的生命周期。简单来说，它的生命周期就是用来描述一个组件从引入到退出的全过程。那复杂来说呢？就是一个组件从创建开始经历了数据初始化，挂载，更新等步骤后，最后被销毁。 Vue生命周期的执行顺序他整体是分为三个大阶段的，在三个大阶段中，有细分为若干的小阶段。我们可以在不同的阶段去做 ...

前言一直想做个关于介绍的个人页面，挂在域名的根路径下面，当home页用，还不想手动的去自己从0到1的去做一个，觉得那很浪费时间，直到我前几天逛github，发现了这个项目，瞬间觉得，它就是我想要的样子~ 个人简介页面模板女生自用99新？？？？引起了我极大的好奇心，连忙点进去。 这个项目是Vue做的，READEME里面给与了充足的介绍，跟效果图，demo网址等，给了小白充足的了解去把这个项目更改成为自己的一个介绍网页，里面的功能也是十分的齐全。 如果有需要可以直接点击传送门：Jiaocz/Personal-page 我也是十分的欣喜，终于找到了我喜欢的样子，于是直接git clone，将项目拉下来，进去照着注释，文档，各种改了改，于是他最后成了这个样子： 传送门查看效果：Ned 这里我又要说一件事情了，这个项目原来，下方的icon不是我截屏中的这样，而是这个效果： 而我心中的页面，下方想要放一些自己的站点，点击可以直接跳转的那种，并且我觉得他原来做的动效也很好看，可以保留，于是就想着，我能不能自己给他改动一下，使得🐟和🐻可以兼得呢？ 是不是做出来还可以提个PR，满足 ...

前言最近还是在做那个练习的小项目，做完接收数据并渲染到页面上的时候，发现后端小伙伴又在给我找活干了，渲染这当然是小kiss啦，可这个字段是什么东西？ 12"createTime" : "2021-01-17T13:32:06.381Z","lastLoginTime" : "2021-01-17T13:32:06.381Z" 直接CV到百度，查出来这一串是一种时间格式，下面放上它的解释： T表示分隔符，Z表示的是UTC.UTC：世界标准时间，在标准时间上加上8小时，即东八区时间，也就是北京时间。 另：还有别的时间格式和时间戳，想了解的小伙伴可以百度了解一下哦，免得跟我一样，看到了才想着去百度了解，事先了解一下，没坏处的。 了解完了，现在我应该做的，就是将这个时间变成我们大家看得懂的那种格式，并将它渲染到页面上。 开始上手JavaScript中，处理日期和时间，当然要用到我们的Date对象，所以我们先来写出这个函数的雏形： 123const formateDate = (value)=>{ ...