<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[angry_rooster的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/angry_rooster</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; angry_rooster]]></copyright><item><title><![CDATA[背景平铺background-repeat的取值探究]]></title><link>https://blog.youkuaiyun.com/angry_rooster/article/details/122902686</link><guid>https://blog.youkuaiyun.com/angry_rooster/article/details/122902686</guid><author>angry_rooster</author><pubDate>Sat, 12 Feb 2022 21:53:32 +0800</pubDate><description><![CDATA[背景平铺的取值决定了背景图片在可视区域背景中的重复方式
background-repeat的取值
background-repeat可取的值为：
repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1, 2}
/* 
repeat-x 和 repeat-y 只能用于单值语法，其余值可以用于单值和双值语法
*/

以下为对各取值作用的简要描述




取值
作用




repeat-x
仅在水平方向上重复背景图片，水平方向上重复的最后一张]]></description><category></category></item><item><title><![CDATA[CSS3动画——steps函数]]></title><link>https://blog.youkuaiyun.com/angry_rooster/article/details/122902546</link><guid>https://blog.youkuaiyun.com/angry_rooster/article/details/122902546</guid><author>angry_rooster</author><pubDate>Sat, 12 Feb 2022 21:46:52 +0800</pubDate><description><![CDATA[CSS3动画中应用的定时函数（timing function）常用的有内置关键字linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end，另外还有两个内置的缓动函数cubic-bezier(), steps()
其中steps()这个函数是将整个动画过程分为指定的步数（在动画过程中插值，显示指定位置的快照），并在一个动画循环的时间内按照一定规则走完划分的步数。常用的场景是将多个动画帧组合成连续的动态效果，如下北极熊动画
实现北极熊奔]]></description><category></category></item><item><title><![CDATA[ES Module 和 CommonJS 学习笔记（二） —— NodeJS 中使用 ESM 和 CJS]]></title><link>https://blog.youkuaiyun.com/angry_rooster/article/details/122746468</link><guid>https://blog.youkuaiyun.com/angry_rooster/article/details/122746468</guid><author>angry_rooster</author><pubDate>Sat, 29 Jan 2022 18:43:39 +0800</pubDate><description><![CDATA[在 NodeJS 中使用 ES6 模块
当前较新版本的 NodeJS 支持 ESM 和 CJS ，但默认使用的是 CJS 规范去解析 JS 代码，直接使用 CJS 是没有任何问题的，而使用 ESM 需要做一些处理
.mjs文件
在 NodeJS 中用.mjs后缀的文件名表示这个文件为 ES6 模快文件，可以在.mjs文件中直接使用 ESM 语法（使用import/export指令）。在执行含 ES6 模块的脚本时，由于不同 NodeJS 版本的支持程度不一样，需要按照不同方式执行
v16.4.0 完全支持
]]></description><category></category></item><item><title><![CDATA[ES Module 和 CommonJS 学习笔记（一）]]></title><link>https://blog.youkuaiyun.com/angry_rooster/article/details/122734501</link><guid>https://blog.youkuaiyun.com/angry_rooster/article/details/122734501</guid><author>angry_rooster</author><pubDate>Fri, 28 Jan 2022 18:00:13 +0800</pubDate><description><![CDATA[注：下文 esm 指 ECMAScript Module ，即 ES6 的模块语法（import/export），cjs 指 CommonJS （module.exports/require）
浏览器端的ESM模块加载
浏览器中使用 esm 模块语法 import/export 或加载 ES6 模块是通过 script 标签实现时，必须加上type="module"，从而浏览器会知道这是一个ES6模块。
浏览器对于带有type="module"的&lt;script&gt;都是异步加载，不会造成堵塞浏览器，]]></description><category></category></item><item><title><![CDATA[JavaScript中的正则表达式]]></title><link>https://blog.youkuaiyun.com/angry_rooster/article/details/119846724</link><guid>https://blog.youkuaiyun.com/angry_rooster/article/details/119846724</guid><author>angry_rooster</author><pubDate>Sat, 21 Aug 2021 23:27:23 +0800</pubDate><description><![CDATA[正则表达式

Regular expressions are patterns used to match character combinations in strings.
In JavaScript, regular expressions are also objects. These patterns are used with the exec() and test() methods of RegExp, and with the match(), matchAll(), replace(),]]></description><category></category></item><item><title><![CDATA[放大镜效果]]></title><link>https://blog.youkuaiyun.com/angry_rooster/article/details/119429523</link><guid>https://blog.youkuaiyun.com/angry_rooster/article/details/119429523</guid><author>angry_rooster</author><pubDate>Thu, 05 Aug 2021 23:28:52 +0800</pubDate><description><![CDATA[放大镜效果
这里的放大镜效果是指当鼠标（手指）和页面（屏幕）中一个方框内的图片交互时，图片呈现放大效果，图片在框内显示的放大区域随鼠标（页面）位置的改变而改变

演示链接：https://codesandbox.io/s/fangdajingxiaoguo-jxdfo
源码：https://gitee.com/thisismyaddress/webpage-effects/tree/master/magnifier-effect
以下我尝试了几种不同的实现方式
移动图片框内的图片
这里是通过改变图片框内的一]]></description><category></category></item><item><title><![CDATA[在JS引入时如何避免阻塞DOM解析]]></title><link>https://blog.youkuaiyun.com/angry_rooster/article/details/118887184</link><guid>https://blog.youkuaiyun.com/angry_rooster/article/details/118887184</guid><author>angry_rooster</author><pubDate>Mon, 19 Jul 2021 01:06:05 +0800</pubDate><description><![CDATA[在JS引入时避免阻塞HTML文档加载的几种方式
浏览器对HTML文档代码的加载和解析是按代码的编写顺序进行的，如果在浏览器对HTML文档进行加载和解析时，遇到了内嵌在HTML文档中的JavaScript脚本或者对JS脚本进行外部引入的标签，如果不经过任何的处理，浏览器会直接对遇到的JS代码相关内容进行加载和解析，这是会阻塞后续的HTML元素的加载，如果JS代码中的部分代码涉及完整HTML文档中的元素节点操作而此时目标节点并没有加载出来，这会导致代码执行错误。这就需要对JS的加载顺序进行相关处理来避免代码执行]]></description><category></category></item><item><title><![CDATA[VSCode中snippets（代码模板）的使用]]></title><link>https://blog.youkuaiyun.com/angry_rooster/article/details/118560317</link><guid>https://blog.youkuaiyun.com/angry_rooster/article/details/118560317</guid><author>angry_rooster</author><pubDate>Thu, 08 Jul 2021 00:41:50 +0800</pubDate><description><![CDATA[VSCode中snippets的使用（代码模板）
有时在使用VSCode进行前端编码时总会有一些代码段是需要重复编写的，这时使用一些代码模板（snippets），通过规定的字符序列触发snippets，快速地输入一段固定模板的代码
内置Snippets
VSCode中本身也自带一些snippets，典型的就是JavaScript中的for

如果要查看内置的代码模板有哪些，可以通过Command Palette查看：
点击左下角的齿轮图案，然后找到Command Palette选项（或者使用快捷键Ctrl ]]></description><category></category></item><item><title><![CDATA[生成填充文字和图片]]></title><link>https://blog.youkuaiyun.com/angry_rooster/article/details/118545140</link><guid>https://blog.youkuaiyun.com/angry_rooster/article/details/118545140</guid><author>angry_rooster</author><pubDate>Wed, 07 Jul 2021 14:00:08 +0800</pubDate><description><![CDATA[生成填充文字和图片
前端设计中有一个常见的单词叫placeholder，这个词往往表示其对应内容是当前页面中的临时填充内容。在前端页面的设计中，有时为了更好地看出布局效果，需要往页面一些地方填充文字或图片，这时能自动生成地填充文字（placeholder text）和自定义大小的填充图片（placeholder image）就派上用场了
生成填充文字
这里我是利用VSCode内置Emmet来生成填充文字（一些主流的前端常用的编辑器都一般内嵌有填充文字的功能或者支持一些填充文字的插件）
需要输入的emmet指]]></description><category></category></item><item><title><![CDATA[利用box-shadow实现一个立体的按钮]]></title><link>https://blog.youkuaiyun.com/angry_rooster/article/details/118507463</link><guid>https://blog.youkuaiyun.com/angry_rooster/article/details/118507463</guid><author>angry_rooster</author><pubDate>Tue, 06 Jul 2021 04:58:44 +0800</pubDate><description><![CDATA[一个立体的按钮
改变按钮button的默认样式，创建一个立体的按钮

这个效果是通过box-shadow实现
这里要注意box-shadow是允许对同一个元素设置多个阴影的，需要用逗号分隔；
多个阴影的层叠顺序是：写在前面的阴影将覆盖在后写的阴影上面
演示链接
CodePen演示链接：https://codepen.io/Zhao-Bocheng/pen/zYwrPEL
源码
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;]]></description><category></category></item><item><title><![CDATA[模态框]]></title><link>https://blog.youkuaiyun.com/angry_rooster/article/details/118349619</link><guid>https://blog.youkuaiyun.com/angry_rooster/article/details/118349619</guid><author>angry_rooster</author><pubDate>Wed, 30 Jun 2021 02:31:38 +0800</pubDate><description><![CDATA[模态框

模态对话框（Modal Dialogue Box，又叫做模式对话框），是指在用户想要对对话框以外的应用程序进行操作时，必须首先对该对话框进行响应
摘自百度百科

先放上效果图：

基本功能为点击窗口中间的发光按钮，使模态框出现，此时除了模态框部分，页面其他部分无法再点击，必须先点击确定对该模态框进行响应后才能进行其他操作。鼠标按住并拖动模态框标题处，可以实现模态框的拖拽跟随效果
实现
模态框效果的实现分为屏幕中间按钮和模态框确定按钮的点击事件的实现，以及模态框拖拽效果的实现。
由于两个按钮的点击事]]></description><category></category></item><item><title><![CDATA[简单的HelloWorld变色]]></title><link>https://blog.youkuaiyun.com/angry_rooster/article/details/118343181</link><guid>https://blog.youkuaiyun.com/angry_rooster/article/details/118343181</guid><author>angry_rooster</author><pubDate>Tue, 29 Jun 2021 20:25:37 +0800</pubDate><description><![CDATA[简单的HelloWorld变色
这个网页特效的基本功能就是点击左侧按钮会变色，点击右侧按钮恢复颜色
在这个简单功能的基础上添加一些特效，用以练习CSS。添加的特效有：


鼠标悬浮在按钮上时按钮边框会出现移动的效果
按钮特效的实现需要借助按钮的两个伪元素::before和::after，以及伪类:hover还有过渡样式transition
鼠标悬浮在按钮上时，边框上下的两个“空隙”会移动，实际上是两个和背景颜色一样颜色的伪元素斜方块在动，这就产生了好像边框发生变化的效果


当颜色从原有颜色变为目标颜色时，]]></description><category></category></item><item><title><![CDATA[网页倒计时]]></title><link>https://blog.youkuaiyun.com/angry_rooster/article/details/118221233</link><guid>https://blog.youkuaiyun.com/angry_rooster/article/details/118221233</guid><author>angry_rooster</author><pubDate>Fri, 25 Jun 2021 15:25:54 +0800</pubDate><description><![CDATA[网页倒计时
制作一个简单的网页倒计时器。这个倒计时可以根据输入的截止时间进行倒计时，输入的截止日期数据会被缓存在本地存储（“deadlineDate”）（源码见文末）

这里使用原生JS进行相关网页逻辑的编写，主要应用到的API有

document.getElementById: 用于获取DOM元素节点，方便向节点填入数据并显示
Window.setInterval(): 用于每隔一秒刷新一次显示的倒计时数据
elem.addEventListener(): 用于绑定事件，这里只是用于绑定重置按钮的点击事]]></description><category></category></item><item><title><![CDATA[创建 DOM 元素的几种方式]]></title><link>https://blog.youkuaiyun.com/angry_rooster/article/details/118127484</link><guid>https://blog.youkuaiyun.com/angry_rooster/article/details/118127484</guid><author>angry_rooster</author><pubDate>Wed, 23 Jun 2021 02:09:53 +0800</pubDate><description><![CDATA[通过write()、createElement()和innerHTML创建元素
document.write()
document.write()是向文档写入内容，参数是一个包含要写入文档的文本的字符串
document.write(markup);

类似的还有一个document.wirteln()，只是最后紧跟一个换行符
如果字符串中有标签元素，会被识别为标签元素，并在文档中创建一个对应元素节点


但如果在文档加载完毕后才调用document.write()，则会重写整个文档，将之前所有的内容覆盖
]]></description><category></category></item><item><title><![CDATA[背景平铺background-repeat的取值探究]]></title><link>https://blog.youkuaiyun.com/angry_rooster/article/details/118035668</link><guid>https://blog.youkuaiyun.com/angry_rooster/article/details/118035668</guid><author>angry_rooster</author><pubDate>Fri, 18 Jun 2021 23:53:09 +0800</pubDate><description><![CDATA[背景平铺的取值探究
（所谓背景平铺其实就是背景图片在背景中的重复方式）
background-repeat的取值
background-repeat可取的值为：
repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1, 2}
/* 
repeat-x 和 repeat-y 只能用于单值语法，其余值可以用于单值和双值语法
*/

以下为对各取值作用的简要描述




取值
作用




repeat-x
仅在水平方向上重复背景图片，水平方向]]></description><category></category></item><item><title><![CDATA[相邻垂直外边距的塌陷]]></title><link>https://blog.youkuaiyun.com/angry_rooster/article/details/117904553</link><guid>https://blog.youkuaiyun.com/angry_rooster/article/details/117904553</guid><author>angry_rooster</author><pubDate>Mon, 14 Jun 2021 15:09:21 +0800</pubDate><description><![CDATA[垂直外边距的塌陷
首先需要明确塌陷只会发生在块级元素的相邻垂直外边距间
在使用CSS的垂直外边距样式时，相邻元素和父子元素都有可能发生相邻垂直外边距的塌陷（相邻元素是上方元素的下外边距和下方元素的上外边距之间，父子元素是父元素的上外边距和子元素的上外边距之间），为了在编写静态页面时避免由于垂直外边距的塌陷导致的布局混乱，需要了解塌陷时垂直外边距的表现和产生的原因——知道原因才能更好的解决问题
塌陷时外边距的计算方式
在《CSS权威指南》一书中对这种塌陷发生的描述非常的生动，书中将包围元素的外边距比作透明的塑]]></description><category></category></item><item><title><![CDATA[64匹马8条道找到最快4匹最少需要几次]]></title><link>https://blog.youkuaiyun.com/angry_rooster/article/details/117755751</link><guid>https://blog.youkuaiyun.com/angry_rooster/article/details/117755751</guid><author>angry_rooster</author><pubDate>Wed, 09 Jun 2021 22:31:20 +0800</pubDate><description><![CDATA[64匹马赛跑问题
这题是我之前一段时间在网上看到的一道面试的思维题，题目的描述大致如下：
现有64匹马，8条赛道，如何用最少的比较次数找出最快的4匹
刚看到这道题时，我在想如果有计时器的话，64匹马分8组跑，找出时间最短的4匹就可以了吧，这样的话就只需要进行1次对于时间长短的比较。而严格来说的话分8组跑可以算是8次比较，那么最少就算8次吧。可是题目的解答并没有那么简单，因为按照其他人的说法，这次赛跑并没有“计时器”，也就无法直接得知8组间最快4匹是哪4匹
那么这就需要思维拐下弯了
首先先让64匹马分8组进行]]></description><category></category></item><item><title><![CDATA[初识HTTP]]></title><link>https://blog.youkuaiyun.com/angry_rooster/article/details/117718821</link><guid>https://blog.youkuaiyun.com/angry_rooster/article/details/117718821</guid><author>angry_rooster</author><pubDate>Wed, 09 Jun 2021 00:15:05 +0800</pubDate><description><![CDATA[初识HTTP
以下为我当前阶段所学的HTTP知识的小结，以下对HTTP相关内容的叙述可能并不全面和准确

参考谢希仁的《计算机网络》第七版的6.4.3

HTTP的基本特征
HTTP是一个无状态的、本身无连接的、面向文本的协议
“无状态的”是指一个用户访问HTTP服务器时，服务器的响应和用户第一次访问时得到的响应是一样的。这样的无状态特性简化了服务器的设计，使得服务器可以支持大量并发的HTTP请求
“本身无连接”是指HTTP在正式交换HTTP报文前是不需要先建立连接的。HTTP协议使用的运输层协议是面向连接]]></description><category></category></item><item><title><![CDATA[TCP的运输连接管理]]></title><link>https://blog.youkuaiyun.com/angry_rooster/article/details/117716625</link><guid>https://blog.youkuaiyun.com/angry_rooster/article/details/117716625</guid><author>angry_rooster</author><pubDate>Tue, 08 Jun 2021 21:29:59 +0800</pubDate><description><![CDATA[TCP的运输连接管理

参考谢希德的《计算机网络》第七版的5.9节

TCP的连接建立——“三次握手”

参考谢希德的《计算机网络》第七版5.9.1这一节关于“三次握手”的论述，TCP建立连接时进行的是“three way handshake”，也就是“三报文握手”，即一次握手交换了三次报文，这等同于一次握手，手上下摇晃了三下，而不是三次握手

即便上述的解释如此，但为了方便后续描述，我依然使用“三次握手”的说法
这里我不对“三次握手”过程中具体的序号以及信号位变化作过多的阐述，而是着重于说明为什么需要“第]]></description><category></category></item><item><title><![CDATA[圣杯布局和双飞翼布局]]></title><link>https://blog.youkuaiyun.com/angry_rooster/article/details/117701436</link><guid>https://blog.youkuaiyun.com/angry_rooster/article/details/117701436</guid><author>angry_rooster</author><pubDate>Tue, 08 Jun 2021 14:38:44 +0800</pubDate><description><![CDATA[圣杯布局和双飞翼布局
这两个布局在实现上有差异（详见下文），但最终要实现的效果是一致的——即保持两侧盒子不变，中间盒子随屏幕宽度变化而伸缩
先放上最终要实现的效果

圣杯布局
在圣杯布局中，是将左中右三个盒子都放到一个盒子中（.wrapper）进行浮动，再通过负外边距和相对定位将左右盒子放置到中间盒子的两侧空白位置（这个实现也可以用其他方式可以探索出来）
这里要注意在编写代码时中间盒子的代码要放在最前面，这是为了后续能通过负外边距和相对定位将左右盒子放置到中间盒子的两侧空白位置
&lt;div class=]]></description><category></category></item></channel></rss>