- 博客(27)
- 收藏
- 关注
RSS订阅原创 背景平铺background-repeat的取值探究
背景平铺的取值决定了背景图片在可视区域背景中的重复方式background-repeat的取值background-repeat可取的值为：repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1, 2}/* repeat-x 和 repeat-y 只能用于单值语法，其余值可以用于单值和双值语法*/以下为对各取值作用的简要描述取值作用repeat-x仅在水平方向上重复背景图片，水平方向上重复的最后一张
2022-02-12 21:53:32
809
原创 CSS3动画——steps函数
CSS3动画中应用的定时函数（timing function）常用的有内置关键字linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end，另外还有两个内置的缓动函数cubic-bezier(), steps()其中steps()这个函数是将整个动画过程分为指定的步数（在动画过程中插值，显示指定位置的快照），并在一个动画循环的时间内按照一定规则走完划分的步数。常用的场景是将多个动画帧组合成连续的动态效果，如下北极熊动画实现北极熊奔
2022-02-12 21:46:52
4320
3
原创 ES Module 和 CommonJS 学习笔记（二） —— NodeJS 中使用 ESM 和 CJS
在 NodeJS 中使用 ES6 模块当前较新版本的 NodeJS 支持 ESM 和 CJS ，但默认使用的是 CJS 规范去解析 JS 代码，直接使用 CJS 是没有任何问题的，而使用 ESM 需要做一些处理.mjs文件在 NodeJS 中用.mjs后缀的文件名表示这个文件为 ES6 模快文件，可以在.mjs文件中直接使用 ESM 语法（使用import/export指令）。在执行含 ES6 模块的脚本时，由于不同 NodeJS 版本的支持程度不一样，需要按照不同方式执行v16.4.0 完全支持
2022-01-29 18:43:39
3748
原创 ES Module 和 CommonJS 学习笔记（一）
注：下文 esm 指 ECMAScript Module ，即 ES6 的模块语法（import/export），cjs 指 CommonJS （module.exports/require）浏览器端的ESM模块加载浏览器中使用 esm 模块语法 import/export 或加载 ES6 模块是通过 script 标签实现时，必须加上type="module"，从而浏览器会知道这是一个ES6模块。浏览器对于带有type="module"的<script>都是异步加载，不会造成堵塞浏览器，
2022-01-28 18:00:13
1533
原创 JavaScript中的正则表达式
正则表达式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(),
2021-08-21 23:27:23
574
原创 放大镜效果
放大镜效果这里的放大镜效果是指当鼠标（手指）和页面（屏幕）中一个方框内的图片交互时，图片呈现放大效果，图片在框内显示的放大区域随鼠标（页面）位置的改变而改变演示链接：https://codesandbox.io/s/fangdajingxiaoguo-jxdfo源码：https://gitee.com/thisismyaddress/webpage-effects/tree/master/magnifier-effect以下我尝试了几种不同的实现方式移动图片框内的图片这里是通过改变图片框内的一
2021-08-05 23:28:52
1171
原创 在JS引入时如何避免阻塞DOM解析
在JS引入时避免阻塞HTML文档加载的几种方式浏览器对HTML文档代码的加载和解析是按代码的编写顺序进行的，如果在浏览器对HTML文档进行加载和解析时，遇到了内嵌在HTML文档中的JavaScript脚本或者对JS脚本进行外部引入的标签，如果不经过任何的处理，浏览器会直接对遇到的JS代码相关内容进行加载和解析，这是会阻塞后续的HTML元素的加载，如果JS代码中的部分代码涉及完整HTML文档中的元素节点操作而此时目标节点并没有加载出来，这会导致代码执行错误。这就需要对JS的加载顺序进行相关处理来避免代码执行
2021-07-19 01:06:05
920
原创 VSCode中snippets（代码模板）的使用
VSCode中snippets的使用（代码模板）有时在使用VSCode进行前端编码时总会有一些代码段是需要重复编写的，这时使用一些代码模板（snippets），通过规定的字符序列触发snippets，快速地输入一段固定模板的代码内置SnippetsVSCode中本身也自带一些snippets，典型的就是JavaScript中的for如果要查看内置的代码模板有哪些，可以通过Command Palette查看：点击左下角的齿轮图案，然后找到Command Palette选项（或者使用快捷键Ctrl
2021-07-08 00:41:50
25016
1
原创 生成填充文字和图片
生成填充文字和图片前端设计中有一个常见的单词叫placeholder，这个词往往表示其对应内容是当前页面中的临时填充内容。在前端页面的设计中，有时为了更好地看出布局效果，需要往页面一些地方填充文字或图片，这时能自动生成地填充文字（placeholder text）和自定义大小的填充图片（placeholder image）就派上用场了生成填充文字这里我是利用VSCode内置Emmet来生成填充文字（一些主流的前端常用的编辑器都一般内嵌有填充文字的功能或者支持一些填充文字的插件）需要输入的emmet指
2021-07-07 14:00:08
913
原创 利用box-shadow实现一个立体的按钮
一个立体的按钮改变按钮button的默认样式，创建一个立体的按钮这个效果是通过box-shadow实现这里要注意box-shadow是允许对同一个元素设置多个阴影的，需要用逗号分隔；多个阴影的层叠顺序是：写在前面的阴影将覆盖在后写的阴影上面演示链接CodePen演示链接：https://codepen.io/Zhao-Bocheng/pen/zYwrPEL源码<!DOCTYPE html><html lang="en"><head> <
2021-07-06 04:58:44
1260
原创 模态框
模态框模态对话框（Modal Dialogue Box，又叫做模式对话框），是指在用户想要对对话框以外的应用程序进行操作时，必须首先对该对话框进行响应摘自百度百科先放上效果图：基本功能为点击窗口中间的发光按钮，使模态框出现，此时除了模态框部分，页面其他部分无法再点击，必须先点击确定对该模态框进行响应后才能进行其他操作。鼠标按住并拖动模态框标题处，可以实现模态框的拖拽跟随效果实现模态框效果的实现分为屏幕中间按钮和模态框确定按钮的点击事件的实现，以及模态框拖拽效果的实现。由于两个按钮的点击事
2021-06-30 02:31:38
8356
2
原创 简单的HelloWorld变色
简单的HelloWorld变色这个网页特效的基本功能就是点击左侧按钮会变色，点击右侧按钮恢复颜色在这个简单功能的基础上添加一些特效，用以练习CSS。添加的特效有：鼠标悬浮在按钮上时按钮边框会出现移动的效果按钮特效的实现需要借助按钮的两个伪元素::before和::after，以及伪类:hover还有过渡样式transition鼠标悬浮在按钮上时，边框上下的两个“空隙”会移动，实际上是两个和背景颜色一样颜色的伪元素斜方块在动，这就产生了好像边框发生变化的效果当颜色从原有颜色变为目标颜色时，
2021-06-29 20:25:37
391
原创 网页倒计时
网页倒计时制作一个简单的网页倒计时器。这个倒计时可以根据输入的截止时间进行倒计时，输入的截止日期数据会被缓存在本地存储（“deadlineDate”）（源码见文末）这里使用原生JS进行相关网页逻辑的编写，主要应用到的API有document.getElementById: 用于获取DOM元素节点，方便向节点填入数据并显示Window.setInterval(): 用于每隔一秒刷新一次显示的倒计时数据elem.addEventListener(): 用于绑定事件，这里只是用于绑定重置按钮的点击事
2021-06-25 15:25:54
7129
3
原创 创建 DOM 元素的几种方式
通过write()、createElement()和innerHTML创建元素document.write()document.write()是向文档写入内容，参数是一个包含要写入文档的文本的字符串document.write(markup);类似的还有一个document.wirteln()，只是最后紧跟一个换行符如果字符串中有标签元素，会被识别为标签元素，并在文档中创建一个对应元素节点但如果在文档加载完毕后才调用document.write()，则会重写整个文档，将之前所有的内容覆盖
2021-06-23 02:09:53
8572
原创 背景平铺background-repeat的取值探究
背景平铺的取值探究（所谓背景平铺其实就是背景图片在背景中的重复方式）background-repeat的取值background-repeat可取的值为：repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1, 2}/* repeat-x 和 repeat-y 只能用于单值语法，其余值可以用于单值和双值语法*/以下为对各取值作用的简要描述取值作用repeat-x仅在水平方向上重复背景图片，水平方向
2021-06-18 23:53:09
378
原创 相邻垂直外边距的塌陷
垂直外边距的塌陷首先需要明确塌陷只会发生在块级元素的相邻垂直外边距间在使用CSS的垂直外边距样式时，相邻元素和父子元素都有可能发生相邻垂直外边距的塌陷（相邻元素是上方元素的下外边距和下方元素的上外边距之间，父子元素是父元素的上外边距和子元素的上外边距之间），为了在编写静态页面时避免由于垂直外边距的塌陷导致的布局混乱，需要了解塌陷时垂直外边距的表现和产生的原因——知道原因才能更好的解决问题塌陷时外边距的计算方式在《CSS权威指南》一书中对这种塌陷发生的描述非常的生动，书中将包围元素的外边距比作透明的塑
2021-06-14 15:09:21
287
原创 64匹马8条道找到最快4匹最少需要几次
64匹马赛跑问题这题是我之前一段时间在网上看到的一道面试的思维题，题目的描述大致如下：现有64匹马，8条赛道，如何用最少的比较次数找出最快的4匹刚看到这道题时，我在想如果有计时器的话，64匹马分8组跑，找出时间最短的4匹就可以了吧，这样的话就只需要进行1次对于时间长短的比较。而严格来说的话分8组跑可以算是8次比较，那么最少就算8次吧。可是题目的解答并没有那么简单，因为按照其他人的说法，这次赛跑并没有“计时器”，也就无法直接得知8组间最快4匹是哪4匹那么这就需要思维拐下弯了首先先让64匹马分8组进行
2021-06-09 22:31:20
1060
原创 初识HTTP
初识HTTP以下为我当前阶段所学的HTTP知识的小结，以下对HTTP相关内容的叙述可能并不全面和准确参考谢希仁的《计算机网络》第七版的6.4.3HTTP的基本特征HTTP是一个无状态的、本身无连接的、面向文本的协议“无状态的”是指一个用户访问HTTP服务器时，服务器的响应和用户第一次访问时得到的响应是一样的。这样的无状态特性简化了服务器的设计，使得服务器可以支持大量并发的HTTP请求“本身无连接”是指HTTP在正式交换HTTP报文前是不需要先建立连接的。HTTP协议使用的运输层协议是面向连接
2021-06-09 00:15:05
476
原创 TCP的运输连接管理
TCP的运输连接管理参考谢希德的《计算机网络》第七版的5.9节TCP的连接建立——“三次握手”参考谢希德的《计算机网络》第七版5.9.1这一节关于“三次握手”的论述，TCP建立连接时进行的是“three way handshake”，也就是“三报文握手”，即一次握手交换了三次报文，这等同于一次握手，手上下摇晃了三下，而不是三次握手即便上述的解释如此，但为了方便后续描述，我依然使用“三次握手”的说法这里我不对“三次握手”过程中具体的序号以及信号位变化作过多的阐述，而是着重于说明为什么需要“第
2021-06-08 21:29:59
208
原创 圣杯布局和双飞翼布局
圣杯布局和双飞翼布局这两个布局在实现上有差异（详见下文），但最终要实现的效果是一致的——即保持两侧盒子不变，中间盒子随屏幕宽度变化而伸缩先放上最终要实现的效果圣杯布局在圣杯布局中，是将左中右三个盒子都放到一个盒子中（.wrapper）进行浮动，再通过负外边距和相对定位将左右盒子放置到中间盒子的两侧空白位置（这个实现也可以用其他方式可以探索出来）这里要注意在编写代码时中间盒子的代码要放在最前面，这是为了后续能通过负外边距和相对定位将左右盒子放置到中间盒子的两侧空白位置<div class=
2021-06-08 14:38:44
184
原创 实现简单的缓动函数
实现简单的缓动函数如果使用过CSS的animation属性或transition属性，就应该对ease、ease-in等缓动函数很熟悉，这些函数能够实现变化速度在变化的过程中发生改变的效果这里我作为练习实现一个移动速度逐渐变慢的缓动函数（可能在变化上不太严谨）实现通过缓动函数实现一个绝对定位的方块左右移动时速度慢慢降下来的缓动效果这里使用到的JS内置API有以下几个：// 获取方块距离带有定位父元素（body）左侧的距离，不带单位elem.offsetLeft;// 实现速度变化的关键。实现
2021-06-07 17:55:14
588
原创 CSS3动画属性练习-小熊跑跑
小熊跑跑通过CSS的动画属性"animation"和at-rule关键帧@keyframe实现一个小熊在雪山奔跑的效果图片素材见文末代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor
2021-06-06 19:25:38
725
原创 箭头函数的this指向
箭头函数的this指向箭头函数箭头函数为以下形式的函数const func = (paramList) => { // 函数体}按照习惯，将箭头函数作为单独一个函数来使用的情况并不多，往往是当要传入的参数是函数时才使用箭头函数// 比如elem.addEventListener("click", () => { // 函数体})this在函数中的指向我们常用函数关键字function来声明一个函数，在一个function()中，this总是指向调用这个函数
2021-06-04 00:02:21
7450
2
原创 循环排他思想
循环排他思想在构造一个网页时，往往会涉及到如标签栏等的构造，我们往往需要往这些内容添加一些交互效果，最常见的就是点击效果、以下以标签栏为例，讲述一下循环排他思想对于一个标签栏，假设当我点击其中一个标签项时，它的背景色会发生变化，而其他的标签项保持原有背景色，而当我再点击另一个标签项时，我希望的是当前被点击的标签项变色，其他保持原有颜色，这就需要使用到循环排他思想了所谓的循环排他思想就是通过循环将原先不同的内容清除，再为特定目标赋予特定内容。最典型的应用场景就是先将多个相同项的样式恢复原样，再为特定项设
2021-06-02 20:42:59
229
原创 由mouseover和mouseenter引发的思考
mouseover和mouseenter这是两个都是鼠标移入事件，首先要明确的是**mouseover可以冒泡，而mouoseenter无法冒泡**，这是它们的最根本区别示例说明这两者间的区别可以明显体现在父子元素间示例代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" cont
2021-05-31 17:53:57
432
原创 C语言中计算连续存储空间的长度
C语言中计算连续存储空间的长度计算数组大小（长度）C语言不像Java等语言那样，有数组的长度属性arr.length，可以直接获取数组长度。使用C语言进行算法题的编写，总要手动计算数组的长度// 若arr为一维数组sizeof(arr) / sizeof(arr[0]);// arr为二维数组int arr[3][4];sizeof(arr) / sizeof(arr[0]); // 行数sizeof(arr) / sizeof(arr[0][0]); // 总的单元个数（可存储整数个数）
2021-05-26 15:36:17
1254
原创 快速选择算法
快速选择算法内容是根据leetcode第215题编写的，并且以下编程语言采用C语言快速选择算法往往是为了在不将数字序列完整排序的前提下找到指定相对大小的数值（相对大小是指在相对于整个数字序列的大小，如“第3大的数字”，“第4小的数字”，“最大的数字”，“倒数第2个数字”等）如果学习过快速排序算法，就可以很容易编写出来快速选择算法的内容（在下就是这样~）快速排序算法快速排序算法的一个核心是在当前限定的范围内（限定范围为下标left到right），选取一个轴值pivotVal，并根据排序是升序还是降序
2021-05-22 15:25:07
390
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人