笔记本
关注
分享
扫一扫
记笔记
bubbleSweet
这个作者很懒，什么都没留下…
展开
-
修改滚动条默认样式
修改滚动条默认样式的css原创 2023-06-14 17:34:32 · 218 阅读 · 0 评论 -
一定要看的修改微信扫码登录鉴权样式的大坑
在修改样式遇到最大的坑就是编译成base64后没想到浏览器解析时会和原来的字符不一样，没有去对比两个字段耽误了很多时间，在这里记录一下以后做鉴权可以参考。经过对比会发现控制台返回的这段base64编译字段和我们从工具处复制的不一样，这是浏览器自己解析时将一些关键字直接解析了，以至于根本拿不到正确的文件。在这里需要去申请对应的域名和id，这个过程需要审核，需要提前申请，具体可以参考微信开放平台的使用文档【在接入第三方微信鉴权时踩了很多坑，由于之前没有做过，查询的信息也不够，所以在这里总结一下。原创 2023-02-09 11:10:07 · 524 阅读 · 0 评论 -
react怎么锁版本
由于antd组件库版本更新，提交上去的代码在构建时自动检测下载了最新版本，导致出现一些bug，针对这种情况，暂时不想使用最新版本的工具时，可以锁版本，这样构建出来的一定是需要的那个版本。3、删除package.sjon中依赖里面的小冒尖，这个冒尖的意思是该版本以上都可以，例如 ^4.9.12 即 4.9.12 以上都可以，那么就会自动给你下载最新的。重新下载依赖，生成package.lock.json文件。下载了package.lock.json，这样才算成功。,修改了自己想要的版本之后，再重新。原创 2022-10-12 17:06:09 · 670 阅读 · 0 评论 -
CSS-允许换行
css-允许文字换行原创 2022-09-27 11:45:18 · 2847 阅读 · 0 评论 -
归并排序实例
归并排序实列 function merge(left, right) { // 创建一个空数组 var re = []; // 一个如果两个数组都不为空 while (left.length > 0 && right.length > 0) { if (left[0] < right[0]) {原创 2021-11-03 17:09:50 · 280 阅读 · 0 评论 -
根据 parentId 对对象数组进行重构
根据 parentId 对对象数组进行重构题目：const nodeList = [{ id: '3', parentId: '1' }, { id: '1', parentId: '' }, { id: '2', parentId: '4' }]根据 parentId 和 id 相匹配，重构对象数组得到：const re = [{ id: '1', parentId: '', children: [{原创 2021-09-25 16:22:36 · 654 阅读 · 0 评论 -
leetCode -- 三数之和
var arr = [-1,0,1,2,-1,-4]; var result = []; var obj = {}; var num = []; arr.sort((a,b) => a - b); //[-4,-1,-1,0,1,2] arr.forEach((item,index) => { var value = 0 - item; var i = 0; var j = arr.length-1; ...原创 2021-09-15 15:49:50 · 119 阅读 · 0 评论 -
找出数组中三个元素之和为目标值的数
找出数组中三个元素之和为目标值的数 let arr = [-10,2,3,4,5,10,6,7,8] arr = arr.sort() //从小到大排序 -10,2,3,4,5,6,7,8,10 let num = [] // 创建一个空数组 target = 15; function fn(arr) { for(let i=0; i< arr.length; i++){ let value = target - arr[i]原创 2021-09-07 16:39:11 · 1080 阅读 · 0 评论 -
js 遍历实现深拷贝
js 遍历实现深拷贝之前写过利用 JSON.stringify 和 JSON.parse 来实现深拷贝这篇笔记利用遍历迭代的方式实现深拷贝遍历实现深拷贝 function deepCopy(obj) { var newobj = null; //创建一个新对象，置为null if(typeof obj == 'object' && obj != null){ //判断传入的被拷贝obj是否为一个对象，是否为null原创 2021-07-29 16:22:13 · 556 阅读 · 0 评论 -
js 中的深拷贝和浅拷贝
js 中的深拷贝和浅拷贝之前经常有被问到深拷贝和浅拷贝，但是一直有些模糊，所以在这里简单的写一下笔记，以便以后查阅浅拷贝 let arr = [1,3,4,{ username: 'hjc' }]; let arr1 = arr; //浅拷贝 arr1.push(7); //只对 arr1 做 push 操作 arr[3].username = 'wu'; //只修改 arr 中的 username con原创 2021-07-21 18:32:25 · 176 阅读 · 0 评论 -
事件冒泡解决办法
事件冒泡解决办法假设有外层元素和内层元素，两个元素都绑定了点击事件，当只点击内层元素会同时出发内层元素和外层元素的事件，就是事件冒泡举个例子：这里有内层的按钮，中层的 div 块和外层的 div 块 <div @click = "outside" id = "outside"> outside <div @click = "middle" id = "middle"> middle原创 2021-07-12 15:06:02 · 1459 阅读 · 0 评论 -
js 中有关 this 的指向应用(1)
js 中有关 this 的指向应用(1)当使用 forEach 或 setTimeout 方法时，里面的 function 是回调函数，这个时候回调函数的 this 总是指向 window 的，那么想要使用声明定义函数的那个变量域中的参数时，就没有办法使用，例如下面这种情况 var obj1 = { myName: 'hjc', fruits: ['apple','banana','icecream'], fn(){ this.f原创 2021-07-07 16:06:21 · 118 阅读 · 0 评论 -
js中变量提升
js中变量提升 var name = 'tom' function change() { alert(name) // undefined var name = 'lily' alert(name) //lily } change()相当于 var name = 'tom' function change() { var name // 变量提升 alert(na原创 2021-06-25 19:57:39 · 161 阅读 · 0 评论 -
vue-router 传值的三种方式
上次被问到路由之间如何传值，我一整个蒙住，但其实在项目中也有用到过，所以今天把这些方法整理出来，以后便于翻阅1. query 传值在主页面中写一个按钮，绑定方法<button @click="sentMesg()">兄弟页面</button>通过 path 来连接和组件页面 brother 之间的关系sentMesg(){ this.$router.push({ path:'/brother', query: { .原创 2021-06-15 21:49:42 · 10294 阅读 · 1 评论 -
兄弟组件间的传值 - $bus
兄弟组件间的传值 - $bus兄弟组件之间的传值方式有很多，例如很方便的 vuex，或者通过传父组件再传兄弟组件，这里介绍 vue 中的 $bus 的使用方法首先在 main.js 中创建一个新 vue 实列import Vue from 'vue'import App from './App'import router from './router'import Vant from 'vant';import 'vant/lib/index.css';Vue.prototype.$原创 2021-06-14 22:17:55 · 4167 阅读 · 4 评论 -
怎么画一条高 0.5px 的线
怎么画一条高 0.5px 的线利用 CSS 中的转换属性 transform 中的 scale() 方法举个栗子就很好懂：<body> <div></div></body>定义它的 CSS 样式<style> div { background-color: blueviolet; //背景色 height: 1px; //高度为 1px width: 200px; //宽度为 200px原创 2021-06-13 13:54:49 · 426 阅读 · 0 评论 -
position 的属性取值有哪些
display 的属性取值有哪些absolute生成绝对定位元素，相对于没有使用 static 的第一个祖先元素进行定位relative相对于原来的文档流位置进行定位fixed生成绝对定位元素， 相对于浏览器窗口进行定位static默认值，没有定位，正常文档流位置呈现inherit继承父元素的定位属性...原创 2021-05-13 17:35:18 · 221 阅读 · 0 评论 -
导入CSS样式中 link 和 @import 的区别
导入CSS样式中 link 和 @import 的区别1、link 没有兼容性问题，import 在 CSS2.1 之后定义，低版本浏览器不支持2、link 除了加载 CSS，还可以有一些事务操作，@import 只能加载 CSS3、link 是属于 HTML 标签，而 @import 属于 CSS 范围4、link 可以通过 JS 对 DOM 元素进行操作改变样式， @import 不行5、link 可以一边载入页面一边加载 CSS， @import 只能在页面完全载入之后加载...原创 2021-05-11 18:32:34 · 199 阅读 · 0 评论 -
怎么用 CSS 画一个三角形
怎么用 CSS 画一个三角形此文章参考自这篇博客（点这里）https://www.cnblogs.com/wangjiachen666/p/9462837.html第一步： <div class="triangle"></div> .triangle { width: 100px; height: 100px; border: 100px solid #000; borde原创 2021-05-11 17:18:15 · 233 阅读 · 0 评论 -
用 position 实现上下左右居中
用 position 实现上下左右居中 <div class="father"> <div class = "child1"></div> </div> .father { border: 10px solid black; overflow: hidden; height: 500px; }原创 2021-05-11 12:05:19 · 2249 阅读 · 0 评论 -
获得宽高的各种方式
获得元素宽高的方式1、dom.style.width/height<div class = "child1" id="child1" style="width: 100px;"> 获取宽度：var ele = document.getElementById('child1');console.log(ele.style.width); //100px这种方法只适用于内联样式，如果在 css 中设置 width 是获取不到的2、window.getComputedStyle(原创 2021-05-09 21:44:03 · 510 阅读 · 0 评论 -
css 中的 box-sizing
此处总结一下 box-sizing 分别等于 content-box 和 border-box 值时的区别1、border-box如下在父容器中写了两个孩子 div <div class = "father"> <div class = "child1"></div> <div class = "child2"></div> </div>样式如下 .原创 2021-05-09 20:24:44 · 654 阅读 · 0 评论 -
怪异盒子模型和标准盒子模型的宽度计算
一、标准盒子模型由上图可以看到，width 只为盒子中内容 content 的大小，所以整个盒子的宽度可以计算为 width + padding（左右） + border（左右） + margin（左右）二、怪异盒子模型由上图可以看到怪异盒子模型中，width 为 content + padding（左右） + border（左右），因此整个盒子的宽度为 width + margin（左右）...原创 2021-05-09 19:52:34 · 3650 阅读 · 2 评论 -
严格模式和混杂模式
严格模式和混杂模式文章目录严格模式和混杂模式一、DOCTYPE的作用二、严格模式三、混杂模式四、如何区分严格模式和混杂模式五、意义一、DOCTYPE的作用定义在 < html > 标签前面，用于告诉浏览器以什么模式渲染文档二、严格模式以浏览器所支持的最高标准来渲染，标准模式，按照W3C标准解析代码三、混杂模式称为怪异模式或者兼容模式，指浏览器根据自己的标准来解析代码四、如何区分严格模式和混杂模式1、文档包含严格的DOCTYPE，一般以严格模式解析2、DCTYPE不存在或者原创 2021-05-09 19:31:03 · 676 阅读 · 0 评论 -
如何禁用 href 跳转页面
禁用 href 跳转页面点击下面这个 a 标签可以跳转到对应的百度搜索页面<a href="https:/baidu.com"> a标签 </a>但像如下这种写法，将跳转的位置置为了空，就不会跳转了<a href="javascript:void(0)"> a标签 </a>...原创 2021-05-09 17:03:54 · 953 阅读 · 0 评论 -
行内元素和块级元素分别有哪些？
行内元素和块级元素分别有哪些？行内元素：< a > 、 < em > 、 < strong > 、 < span > 、 < i > 、< label >、 < br >块级元素：< div > 、 < p > 、 < h1…6 > 、 < ol > 、 < ul > 、 < table > 、< form >内联块级元素原创 2021-05-09 16:40:47 · 2551 阅读 · 0 评论 -
label标签的作用—— for
label标签的作用—— for简单举个栗子男<input type="radio" name="sex" id="male"/>女<input type="radio" name="sex" id="female"/>运行如下，当我们点击任意一个小圆点，就会有选中效果但我们可以看到，想要通过点击文字选中是不行的于是像下面这样，我们在文字上添加 label 标签，并用 for 来绑定相应的 input 标签中的 id例如下面的 for=“male” 中的 male原创 2021-05-09 12:43:43 · 657 阅读 · 0 评论 -
从一个数组中找出两个元素相加等于目标数字，时间复杂度为O(n)
从一个数组中找出两个元素相加等于目标数字，时间复杂度为O(n)文章目录从一个数组中找出两个元素相加等于目标数字，时间复杂度为O(n)一、题目描述二、解题思路三、代码实现一、题目描述从给定的数组中，找出两个元素相加等于目标元素，每个元素不能重复使用，并且时间复杂度等于O(n)数组num[2, 3, 6, 1, 4, 7, 5, 1]目标数为：7输出：[1, 6][2, 5][3, 4]二、解题思路对数组进行升序排列设 i 从前开始往后加 1，设 k 从后往前减 1当下标为原创 2021-03-31 22:29:36 · 712 阅读 · 0 评论 -
交换长数字中数字的顺序使得长数字为最大值
交换长数字中数字的顺序使得长数字为最大值文章目录交换长数字中数字的顺序使得长数字为最大值一、题目描述二、实现思路二、代码示例总结一、题目描述给定一个数字，仅交换一次使得数字最大——————————输入：3297输出：9237——————————输入：9090输出：9900——————————输入：3000输出：3000二、实现思路将输入的长数字转变为数字数组将数组按照降序排列从头到尾开始遍历原数组和排序后的数组当发现遍历到不同的数字a（小的那个）和b（大的那个）从原创 2021-03-31 20:38:31 · 382 阅读 · 0 评论 -
相对定位
相对定位如下图所见，有三个盒子竖着放，分别是红、蓝、绿最外层为父元素，class=f，里面包裹着三个盒子<div class="f"> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> </div>分别给它们制定样式.f { heig原创 2021-03-30 19:32:41 · 170 阅读 · 0 评论 -
选择器的优先级
选择器的优先级内联样式style > id选择器 > 类class选择器 > 元素选择器 > 通配选择器原创 2021-03-26 17:41:18 · 154 阅读 · 0 评论 -
数组去重
数组去重思路：创建一个新的数组来不重复储存a中的元素，设置一个信号量，每次查找之前为0，如果找到了置为1，在循环结束后判断信号量，为0的话没找到，可以加入，为1的话不对b做操作，并将信号量置为0重新开始下一轮查找 function sort() { var a = [0, 4, 1, 1, 7, 7, 2]; //创建一个数组a，有1，7重复 console.log(a); //打印a var b = []; //创建一个新的原创 2021-03-26 17:30:11 · 127 阅读 · 0 评论 -
高度塌陷与BFC
高度塌陷与BFC高度塌陷问题解释：如下，我们写一个父元素div，在里面写一个子元素div <div class="father"> <div class="child"></div> </div>给父元素div设置border .father { border: solid 10px; }这个时候我们呈现的效果是这样的，里面没有内容，因此还未被撑开我们再给子原创 2021-03-26 16:18:24 · 164 阅读 · 0 评论 -
冒泡排序算法
冒泡排序算法function sort() { var a = [0, 4, 1, 7, 2]; for (var i = 0; i < a.length - 1; i++) { for (var k = 0; k < a.length - 1 - i; k++) { if (a[k] > a[k + 1]) { //都和后面一个元素比较原创 2021-03-25 22:10:52 · 104 阅读 · 0 评论 -
写一个上下左右都居中的正方形的两种方法
如何写一个上下左右都居中的正方形<head> <meta charset="UTF-8"> <title> </title> <style> .father { width: 100%; height: 100%; display: flex; background-color: antiquewhite原创 2021-03-23 22:17:59 · 366 阅读 · 0 评论 -
封装函数——实现字符串转换为对应的驼峰命名
封装函数——实现字符串转换为对应的驼峰命名输入以-连接的字符串，例如hello-the-world-！，调用函数转换成对应的驼峰命名：1、从第二个单词开始，每个单词的首字母大写2、每个单词之间连接没有其他字符以上字符串转换为驼峰命名就是：helloTheWorld！以下就用上面这个字符串的栗子，完成函数的封装function f1(foo) { var arr = foo.split("-"); //以-来分割字符串，输出arr为["hello","the","wor原创 2021-03-19 21:08:26 · 1943 阅读 · 0 评论 -
引用类型的传递-----写出输出并解释
引用类型的传递-----写出输出并解释举个栗子function Person(name, age) { this.name = "sally"; this.age = 9; } function f1(person) { //相当于var person ，只是没有显示出来，在这里person指向p的地址 person.name = "amy"; //将p地址中的名字改成amy原创 2021-03-19 20:10:20 · 126 阅读 · 0 评论 -
作用域和值类型的传递-----写出输出并解释
作用域和值类型的传递-----写出输出并解释<head> <meta charset="UTF-8"> <title> </title></head><body> <script type="text/javascript"> var num1 = 55; var num2 = 66; function f1(num) {原创 2021-03-19 13:36:29 · 84 阅读 · 0 评论