- 博客(47)
- 收藏
- 关注
RSS订阅原创 CSS、HTML、JS踩坑
1、写好的html元素li、img等之间出现间隙？<!DOCTYPE html><html><head></head><body> <img src="./boyuanchong.jpg"> <img src="./boyuanchong.jpg"> <img src="./boyuanchong.jpg"></body></html>比如直接
2021-06-28 19:57:41
322
2
原创 vue 使用问题汇总
1、怎么理解样式文件里的/deep//deep/深度选择器：经常在开发中使用到组件库element-ui/ant-design等等，，若是想要对某个组件的样式进行调整但又不影响全局，，/deep/是个很好的选择，可以穿透scoped实现组件样式的修改，一般是在less、sass中使用>>>一般则在css中使用，因为有些像 Sass 之类的预处理器无法正确解析 >>>，它是/deep/的别名 /deep/.ant-upload-list-item-uplo
2021-06-23 17:53:05
951
1
原创 使用 文本选区Selection实现颜色标注、字体修改、图片插入
1、实现目标鼠标拖拽选取文字，可对选取的文字设置背景色、修改字体大小可取消对背景色、字体大小的设置，重新选取设置背景色不能交叉重叠2、文本选区Selection文本选区表示选择的文本范围或者插入符号的当前位置。简单来讲，每当拖拽鼠标或者点击鼠标就会形成文本选区。2.1、获取文本选区var selection=window.getSelection()2.2 文本选区常用属性介绍2.2.1 typetype表示文本选区的类型：目前有3种取值 None、Range和Caret
2021-06-22 20:28:20
1294
2
原创 ajax 302 重定向不成功问题
遇到的一个问题ajax请求接口，接口返回status code 302 重定向，但是浏览器并未重定向成功，发生页面跳转 URL改变之类的。。。于是，网上查找了一番，，，，，ajax 请求的status code是302后的过程是这样的：发起ajax请求请求响应 status code是302未进入ajax的回调函数中，而是先重定向。浏览器直接读取该请求的响应的response header中的location的值，发起请求。若该请求成功，则进入第一步中的ajax请求的success回调若该
2021-06-08 20:51:27
2357
原创 一个特殊的字符串拼接
前段时间遇到一个需求，最后一个步骤是进行字符串的拼接。1、需求首先选择字符串片段：通过鼠标或者触摸屏选中字符串的任意范围。第一步，选取需要精确处理的，选取次数不限制。第二步，选取需要普通处理的，选取次数不限制。每一次的字符选取都能得到开始位置和结束位置。拼接规则：对于需要精确处理，在拼接字符串时要在开始位置插入*，同时在结束位置插入*。对于需要普通处理的，在拼接字符串时要在开始位置插入#，同时在结束位置插入#。若是需要精确处理和需要普通处理的开始位置相同，则在开始位置插入#*，若是需
2021-02-18 15:50:14
342
原创 一些题∩-∩
1、生成1到1000之间的质数/素数质数：除了1和它本身之外不能被其他的数整除。最小的质数是2 let result=[]; for(let i=2;i<=1000;i++){ const middle=Math.floor(i/2); let count=0; for(let j=1;j<=middle;j++){ if(i%j===0){ count++ } }
2021-01-20 13:09:08
1588
原创 滚动鼠标/滑动触摸板 切换图片
1、实现过程滑动鼠标时给img标签切换样式，从而实现突出显示的效果。鼠标/触摸板 向下滑动， 突出显示前一张图片鼠标/触摸板 向上滑动，突出显示下一张图片加上事件节流/防抖，控制事件的触发频率。2、如何知道鼠标/触摸板是向下还是向上滑动万能的...
2020-10-27 20:23:30
1601
原创 当前页面中使用了多少种html标签
如题，1、想到的第一个方法，使用JavaScriptdocument.getElementByTagName("*")，根据元素标签名获取元素，当参数为* 时，表示所有元素。document.querySelectorAll("*")，返回与指定的选择器组匹配的文档中的元素列表，当参数是*时，表示所有标签。但是，别的解决方式呢？？2、正则写个正则表达式，匹配当前.html中的所有 HTML标签，，该去重去重，该干嘛干嘛。。。2.1 表达式var pt=/\<([a-zA-Z0-
2020-10-22 18:49:27
327
原创 相对完成版的数据双向绑定
<input id="input" type="text"><span id="span"><button id="btn">同步更新数据</button> var input = document.getElementById("input"); var span = document.getElementById("span"); var btn = document.getElementById(".
2020-10-22 15:17:46
105
原创 元素的移动
通过JavaScript控制元素的移动1、元素的移动1.1 目标元素每0.1s移动10px 。从位置A水平移动到位置B，移动到指定位置后停止移动1.2 思路将元素设为absolute，脱离文档流。每0.1s将元素的left值增加10px。直到移动到指定位置。1.3 基本代码如下 <div class="kuang"> <div class="ele"></div> </div> .kuan
2020-10-22 00:02:33
317
原创 vue2+typescript 项目、相关配置
1、新建项目并引入typescripe相关的loader、依赖包1.1新建项目vue init webpack 项目名称1.2 添加 typescript 以及 ts-loadercnpm install typescript ts-loader --save1.3 添加运行依赖包cnpm install vue-class-component vue-property-decorator --save2、配置webpack 、添加配置、文件引入的改动2.1 打开webp
2020-10-21 23:57:28
2832
1
原创 webpack 相关的一些问题
可视化分析工具 webpack-bundle-analyzer1、安装 cnpm install webpack-bundle-analyzer2、配置，去网上找教程3、查看分析结果 npm run build --report4、浏览器 打开 127.0.0.1:8888 可以看到分析结果，面积越大、占用的时间、内容越多1、loader 处理文件的优化loader处理文件是很消耗时间的，可以开启缓存，尽量让最少的文件进行loader处理babel-loader?cacheDirector
2020-10-13 22:35:25
276
原创 npm、cnpm、yarn、package.json
1、package.json 是什么？是做什么的？package.json是项目的描述文件。包括项目名称、版本、依赖的包、以及运行开发项目用到一些脚本执行命令等等信息。2.1 script是一个对象，存储了一些脚本执行命令，比如 start 、 build 之类的执行这些命令。当运行npm run start、 npm run build就会执行对应的脚本文件2.2 dependencies 和DevDependencies这两个部分用于存放项目依赖的包dependencies，生产环
2020-10-13 17:50:03
624
原创 position:sticky
一直以来都忽略了position:sticky这个属性现在回过头一看，我都错过了些什么。。。。。。position:sticky简介设置了position:sticky的元素并不会脱离文档流。当元素在区域内，元素不受定位的影响（top、left等设置无效）当发生滚动，元素就要移出区域时，定位又会变成fixed，根据设置的left、top的值进行定位，像是fixed效果 tagg{ position:sticky; top:0; }必须注意的点设置了po
2020-10-12 22:12:33
27473
3
原创 手动实现一个promise
问：你能手写一个Promise吗？ 。。。。。。。。。。。。时间静止了。。Promise用了不少，但是从来没尝试自己实现下，好吧，开始写了Promise的参数是一个函数，这个函数有2个参数，分别是resolve 和rejectPromise的状态一开始是pending，满足某些条件是，状态变为resolved， 不满足某些条件时，状态变为rejected通常通过将Promise作为一个构造函数，通过new 进行调用会在then()中接收，resolve 和reject的返回信息第一版
2020-10-12 20:09:43
134
原创 数字 转 中文
会遇到这样的情况，需要将数字123 转换成对应的中文写法 “一百二十三” 、 1234 转成对应的中文写法 “一千二百三十四”写一个方法，实现这个转换过程这个问题的解法 和 要求会逐步完善，先从简单的开始思路将数字拆成数组，写一个数组，里面存放单位 “个、十、百、千、万”,另一个数组，存放 零到十...
2020-10-12 00:57:56
1871
原创 HTML标签的margin设为负值会怎么样
首先一句话，元素的标签设置为负值之后，新建了个HTML页面试了下。情况比较多、和元素的display有关。。。。假设 给元素设置 margin:-40px基本情况1、元素设置了宽度和高度 且 display:block元素会向上偏移40px元素会向左移动40px2、元素没有设置宽度 且 display:block元素会向上偏移40px不设置宽度，此时元素的宽度等于父元素的宽度+40px*2并向左偏移40px3、元素设置了宽度和高度、且display:inline-block元素
2020-10-11 16:31:24
309
原创 CSS 实现 一些简单的loading
1、loading效果11.1 html <h1>loading效果</h1> <div class="loading1"> <span></span> <span></span> <span></span> <span></span> <span></span
2020-10-11 16:19:04
526
1
原创 vue--记住页面的滚动高度，再次返回该页面时自动滚动到当前高度
1、获取页面滚动高度document.documentElement.scrollTop2、什么时候获取页面滚动高度路由变化，离开当前页面时，可以在以下3个方法内获取页面滚动高度并记下来beforeDestroydestroyedbeforeRouteLeave3、保存页面滚动高度经过第一步和第二步已经可以在离开该页面时获取页面滚动高度了，但是由于在此返回该页面时需要再次滚动到当前高度。因此，需要把整个高度给记下来。。。。。。那么记录到哪里呢？我们知道可以在路由信息部分添
2020-10-07 22:53:29
2206
1
原创 js判断两个对象是否相等---2种方式
1、JSON.stringify(obj)这种方法，简单易实现。但有一个缺点：当对象里key值的顺序不一致时，比较就会出问题了。并且在JSON.stringify()时，一些特殊类型的值，比如undefined，Date，RegExp等会丢失或者变形。 var obj1={ name:111, age:222, dis:[1,2,3,4], info:{ like:"hx", ar
2020-09-30 17:44:17
2787
原创 使用node.js创建一个简易服务器，让本地的HTML页面可以通过localhost方式访问
最近一直在复习当中，所以会一写 HTML/js什么的。但是都是通过file:///Users/baiyinyu/Documents/privateProgram/test/918.html的方式去查看执行结果的。 。。。。看起来丑不说， 其他电脑上也不能访问这个。。。 也不能在手机上访问这个页面。。。。。。。。。就在想啊，本地的vue项目为什么可以通过localhost:port的方法访问了， 怎么做才能实现这个效果呢？这时候我们的node.js就派上用场了。。。。。注：这篇文章只实现了最简单最基础
2020-09-28 20:52:54
3827
1
原创 数组扁平化的一些方式
数组扁平化 ，是指将这样的数组[1,2,[3,4,[4,5,4],1,2,[4,5]],4]转换成[1, 2, 3, 4, 4, 5, 4, 1, 2, 4, 5, 4]的过程1、直接使用ES6 的方法 array.flat()flat()flat()是ES6中的新方法，可以用于拉平数组，且不会改变原数组。flat()的参数是个数字，默认是1，决定可以拉平几层。如果不管有多少层，都想要拉平的话，参数可以设置为Infinity const arr=[1,2,[3,4,[4,5,4],1,2,[4,
2020-09-28 16:20:28
100
原创 文件/图片的上传 怎么做
在实际的开发当初，经常会遇到需要上传/文件图片的场景比如，用户头像、审核资质证明等等。那有哪些方法可以实现文件/图片的上传1、form表单 enctype=“form-data”使用form表单和input type="file"<form method="post" enctype="multipart/form-data" > <input type="file" id="name" /></form>上传多个文件***使用表单上传文件需
2020-09-27 22:37:28
1363
原创 写一个Promise.all()
const p1=()=>{ return new Promise((resolve,reject)=>{ setTimeout(()=>{ resolve("p1"); },3000) })}const p2=()=>{ return new Promise((resolve,reject)=>{ setTimeout(()=>{ resolve("p2"); },
2020-09-11 22:53:21
234
原创 nodejs+express 搭建博客 二（一些重要的问题和点）
引入CSS文件时的路径问题在view/index.ejs中引用public/stylesheets 目录下的style.css 文件时，报错如下引入该css文件的实现是这样的why?原来，在app.js中已经通过app.use(express.static(__dirname+'/public'))配置了静态文件服务器。所以，在引用css文件时只需要直接写
2020-08-15 13:56:05
185
原创 nodejs+express 搭建博客 一
参考书籍----Node.js开发指南博客开发采用了 Express框架、MongoDB数据库 、ejs模板引擎（最开始使用的是默认的jade，在写了2个页面后实在没法忍受jade反人类的书写方式，就切换到了ejs）安装express 首先，创建文件夹byy,然后进入该文件夹cd /home/work/byy使用npm 安装express ，
2020-08-15 13:41:52
159
原创 遍历、查找、深度、插入节点、删除节点、是否有和为某个数的路径、输出和为某个数的路径
树：可指多叉树或者二叉树思路遍历树，在遍历的时候同时统计当前的深度deep:遍历到当前节点时树的深度resdeep:树的最终深度当没有子节点时，说明当前的分支遍历到了尽头， deep 和 resdeep进行比较，如果deep大于resdeep ，将deep的值赋给resdeep 。每次遍历到当前分支的尽头时，将deep重置为0，现有如下树结构，得出其深度var treeList = [ { path: 'a/a', component: 'pag
2020-08-15 13:38:16
294
原创 javascript 实现全屏滚动
全屏滚动的过程会逐步优化，从最基本的功能开始。全屏滚动每张图都占满整个浏览器窗口，当滑动鼠标或者触摸板时，图片切换。事件onmousewheel ，鼠标滚轮滚动事件，当鼠标滚动或者滑动触摸板时，该事件触发。可在该事件触发时进行图片切换。一个问题在页面上测试时发现，每次滑动触摸屏，onmousewheel 触发了很多次，如果每次触发都进行图片切换显然是不合适的。所以，这里可以用到事件节流，当onmousewheel事件触发结束后一段时间后再进行图片的切换。代码HTML部分 <d
2020-08-06 21:15:23
1131
原创 实现一个sleep效果
sleep效果。函数执行到某处之后，暂停一段时间后 接着执行思路使用await 等待一段时间，之后接着执行await 要写在async内部await 等待的是 后面的表达式的执行结果，等到结果之后会接着执行后面的语句让await后面的语句，在一段时间之后再返回结果 。可借助定时器setTimeoutasync function sleep_(){ for(let i=0;i<1000;i++){ if(i==500){ await someTime(
2020-08-02 18:00:31
530
原创 实现 元素 可拖拽
1、思路记录开始时元素的位置（divX，divY）记录刚开始拖拽时（刚按下鼠标时）鼠标的位置（startMouseX，startMouseY）记录下拖拽结束时（松开鼠标时）鼠标的位置（endMouseX，endMouseY）那么–拖拽结束时，元素的位置为（endMouseX-startMouseX+divX，endMouseY-endMouseY+divY）2、相关方法onmousedown ：按下鼠标时触发onmousemove：按住鼠标拖动时触发onmouseup：松开鼠标时触发
2020-07-31 02:57:28
1017
原创 使用setTimeout 实现setInterval
两者区别setTimeout() 只执行一次setInterval() 一直执行，直到clearInterval()思路在setTimeout 内部调用自身，以达到不停被调用代码function st(){ setTimeout(function(){ console.log("被调用了"); st() },2000);}st();...
2020-07-26 16:47:42
266
原创 写一个函数，输出四次“hello world“,每次间隔3秒
思路使用setTimeout ，每三秒输出一次使用一个计数标志，每输出一次加一， 判断次数决定是否继续输出代码 function repeat4(str, num, time) { var flag = 0; function st() { setTimeout(function () { if (flag > num-1) {
2020-07-26 16:36:16
1429
原创 支持select下拉框选择输入和键盘输入两种输入方式并且支持手动换行
接收到一个需求，目标是实现一个工具可以支持select下拉框选择输入和键盘输入两种输入方式同时支持手动换行。1、键盘输入默认情况下div标签是不可编辑的，加上contenteditable="true"之后使得div标签变成可编辑状态，我们可以随意修改div的内容。div(class="tt" contenteditable="true") 鹅鹅鹅，曲项向天歌。白毛浮绿水...
2019-06-05 14:44:37
3591
原创 跨域问题的产生及解决
跨域问题的产生及解决开发过程中，或多或少都碰见过这样的情况，本地写了个ajax请求想从某某域下获取数据，代码如下： $.ajax({ url:"https://www.baidu.com", data:{ name:"name", address:"beijing" }, type:"post", ...
2019-05-27 15:25:17
1644
原创 artTemplate 学习笔记
artTemplate ------ JavaScript模板引擎。快速上手1、下载artTemplate.js 文件并在页面中引入，下载地址：点击打开链接 2、在HTML文档中添加一个type="text/html"的script标签 存放模板。<script type="text/html"> <p>{{title}}</p> <ul&g...
2018-05-04 23:01:24
367
原创 HTTP 笔记
基本的浏览器连接处理浏览器从URL中解析出服务器主机名浏览器将服务器主机名转换为对应的IP地址浏览器从URL中解析出端口号浏览器建立一条与web服务器的TCP（传输控制协议）连接浏览器向服务器发送一条HTTP请求报文服务器向浏览器回送一条HTTP响应报文关闭连接，浏览器像是文档HTTP网络协议栈TCP传输控制协议，规定了数据是如何从一个地方发送到另一个地方的。TCP主要提供了无差错的数据传输按序传...
2018-04-25 21:01:28
183
原创 用CSS实现：左右两栏宽度固定，中间一栏的宽度随浏览器宽度的改变而改变
HTML 代码<div class="zuo">左边 </div><div class="zhong">中间</div><div class="you">右边</div>CSS 代码1.zuo, .you{ width:200px;
2018-04-10 22:21:31
606
原创 用CSS实现图片幻灯片式的切换（所有图片轮流显示，每次显示一张）
HTML 部分<div id="img-wrap"> <img src="img/1.jpg"> <img src="img/2.jpg"> <img src="img/3.jpg"> <img src="img/4.jpg">&
2018-04-10 20:30:17
6969
原创 使用JavaScript实现简单的瀑布流
效果截图基本思路每行展示固定数目的图片（假设为5），第一行从左至右依次展示5张图片，第6张放在前5张中高度最小的那张下方，第7张放在前6张中整体高度最小的那张下方，第8张放在前7张中整体高度最小的那张下方.......整体高度：每一列的所有图片高度之和 以及padding、margin、border（如果有的话）之和代码部分HTML
2018-01-23 20:04:32
297
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人