牛客910518021号 - 个人主页动态

2023-04-09 21:45

链接 不像Flexbox或Grid布局可以控制元素显示的次序，圣杯布局是通过浮动元素和外边距属性实现三列布局，但最重要的一点是，在文档中需要将优先渲染的内容写在最前方，但显示时看起来却好像是按照显示次序书写的一样。 首先给类名为"container"的盒子添加"overflow: hidden"和"padding: 0px 100px"属性，以为了防止容器盒子高度塌陷和给之后的左、右浮动元素预留位置。现在继续给类名为"left"的盒子添加以下属性：   "float: left"，浮动，保证之后的"margin-left"属性可以将自身拉到上一行   "width: 100px"，固定宽度  ...

0 点赞评论收藏

2023-04-09 21:43

河南理工大学前端工程师

CSS 三列布局 - 双飞翼布局

链接 双飞翼布局是在圣杯布局上做了优化，解决了圣杯布局中布局发生错乱的问题。核心思路是在圣杯布局的基础上，再在内容区添加一层新的盒子，该盒子通过外边距将内容与两边的浮动元素分隔开，实际上中心盒子是没有"padding"属性的。 首先给类名为"container"的盒子添加"overflow: hidden"属性，解决子浮动元素导致的高度塌陷问题。然后继续给类名为"left"的盒子添加"float: left"、"margin-left: -100%"和"width: 100px"。再给类名为"center"的盒子添加"float: left"和"width: 100%"属性，该盒子并没有像圣杯...

0 点赞评论收藏

2023-04-09 21:40

河南理工大学前端工程师

JS 创建数组

链接 请补全JavaScript代码，要求返回一个长度为参数值并且每一项值都为参数值的数组。 注意：  请勿直接使用for/while  <!DOCTYPE html> <html> <head> <meta charset=utf-8> </head> <body> <script type="text/javascript"> const _createArray = (number) => { // 补全代码 return new Array(number).fill(number) } </...

0 点赞评论收藏

2023-04-09 21:37

河南理工大学前端工程师

JS 无重复数组

Link 请补全JavaScript代码，实现一个函数，要求如下：   根据输入的数字范围[start,end]和随机数个数"n"生成随机数   生成的随机数存储到数组中，返回该数组   返回的数组不能有相同元素   注意：  不需要考虑"n"大于数字范围的情况  示例1 输入  getUniqueNums(2,10,4)  输出  [4,6,2,8]  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <scr...

0 点赞评论收藏

2023-04-09 21:34

河南理工大学前端工程师

JS 子字符串频次

链接 请补全JavaScript代码，该函数接受两个参数分别为字符串、子字符串，要求返回子字符串在字符串中出现的频次。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <script> const _searchStrIndexOf = (str, target) => { // 补全代码 return str.split(target).length-1 } </script> &lt...

0 点赞评论收藏

2023-04-09 21:31

河南理工大学前端工程师

JS 验证是否为身份证

链接 请补全JavaScript代码，要求以Boolean的形式返回字符串参数是否符合身份证标准。 注意：  无需考虑地区信息、出生日期、顺序码与校验码的验证  示例1 输入  _isCard('21062319980907888X')  输出  true  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <script> const _isCard = number => { // 补全代码 le...

0 点赞评论收藏

2023-04-09 21:28

河南理工大学前端工程师

JS Symbol

链接 参考 <!DOCTYPE html> <html> <head> <meta charset=utf-8> </head> <body> <script type="text/javascript"> const _symbolKey = array => { // 补全代码 let res = {}; array.forEach(i => { res[Symbol(i)] = i; }) return res; } console.log(_symbolKey([1,2,3,4])) &lt...

0 点赞评论收藏

2023-04-09 21:25

河南理工大学前端工程师

JS Map保存节点

Link <!DOCTYPE html> <html> <head> <meta charset=utf-8> </head> <body> <p>1</p> <script type="text/javascript"> const _elementKey = () => { // 补全代码 let name = document.querySelector('p'); let val = document.querySelector('p').innerText; let ma...

0 点赞评论收藏

2023-04-09 21:22

河南理工大学前端工程师

JS 相同的Set

Link <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <script> const _isSameSet = (s1, s2) => { // 补全代码 if(s1.size !== s2.size) return false; return [...s1].every(i => s2.has(i)); } </script> </body> </html&g...

0 点赞评论收藏

2023-04-08 14:29

河南理工大学前端工程师

改变函数上下文

改变函数上下文 方法一:直接将fn挂载到obj对象上 function speak(fn, obj) { obj.fn = fn return obj.fn() }  方法二:使用apply function speak(fn, obj) { return fn.apply(obj) }  方法三:使用call function speak(fn, obj) { return fn.call(obj) }  方法四:使用bind function speak(fn, obj) { return fn.bind(obj)() }

0 点赞评论收藏

2023-04-08 12:51

河南理工大学前端工程师

JS41 dom 节点查找

查找两个节点的最近的一个共同父节点 链接 题目描述 查找两个节点的最近的一个共同父节点，可以包括节点自身 输入描述: oNode1 和 oNode2 在同一文档中，且不会为相同的节点 解题思路：判断一个节点以及它的父节点是否包含另一个节点。 function commonParentNode(oNode1, oNode2) { while(true){ oNode1 = oNode1.parentNode; if(oNode1.contains(oNode2)){ return oNode1; } } }  两边找 function commonParentNode(oNode1, oNode...

0 点赞评论收藏

2023-08-20 21:48

已编辑

河南理工大学前端工程师

博客说明

总结一些知识点和解决方案，其中也包含网络上的内容，如有侵权，请评论或联系我，或在评论区附上您的原文哦，多谢

0 点赞评论收藏

2023-04-08 09:27

已编辑

河南理工大学前端工程师

JS32 Proxy拦截器

链接 const _proxy = (object,...prototypes) => { // 补全代码 let pripro = prototypes; return new Proxy(object, { get: function(object, prototype) { if(pripro.includes(prototype)) return "noright" return object[prototype]; } }) } let p = _proxy({ "a": 1, "b": 2, "c": 3 }, "a", "b") console.log(p) // { a:...

0 点赞评论收藏

2023-04-08 09:15

已编辑

河南理工大学前端工程师

JS31 Proxy计数器

Proxy 链接 根据题目要求，用Proxy代理一个对象 它可以代理我们对原目标的操作。相比Object.defineProperty方法，Proxy监听的事件更加方便。 在Proxy中共有13个捕获器，它们用于我们对对象、函数的方法调用监听。下面是Proxy捕获器以及它们的触发条件。 JS进阶 | Proxy代理对象 每当通过代理访问该对象拥有的属性时，“count”加1，当访问该对象没有的属性时，“count”减1，核心步骤有： 创建一个Proxy实例，该构造函数接收两个参数，第一个参数是被代理的对象，第二个参数是处理方法 在处理方法中设置“get”计算方法，该方法接收两个参数，第一个参数...

0 点赞评论收藏

2023-04-07 22:32

河南理工大学前端工程师

JS30 回文字符串

链接 // 描述 // 请补全JavaScript代码，要求以boolean的形式返回参数字符串是否为回文字符串。 const _isPalindrome = string => { // 补全代码 // 反转字符串 // return string === Array.from(string).reverse().join(''); // 左右指针 let lp = 0, rp = string.length-1; while(lp++ < rp--) { if(string[lp] != string[rp]) return false; } return true; }

0 点赞评论收藏

创作者周榜

关注他的用户也关注了：