- 博客(94)
- 收藏
- 关注
RSS订阅原创 谷歌浏览器控制台调试，输入框要聚焦时才会显示某个div，鼠标一直无法选择到那个div，因为鼠标一移开那个div就消失了，要如何调试
（例如下面例子可以查找“搜索发现”这几个关键字）（3）像这种情况，我们可以添加事件监听器断点，如下图，箭头1位置那个div就是包含那个动态生成的div的父元素，选中那个div，右键菜单，选中箭头2位置的“子树修改”，因为这个例子，是这个div的子元素发生了变化，大家根据具体情况进行选择。（2）像这种div一般都放在body的后面，我们可以观察到右侧箭头那个div原本是空的，在鼠标在聚焦到输入框时，如下图箭头位置有内容生成，当然我们鼠标一点过去就消失了，因为输入框失去焦点，js就把内容给移除了。
2024-12-25 00:49:05
274
原创 web前端好用的CDN网站
二、Unpkg.com是一个基于npm的CDN链接，提供了npm上的最新版本的JavaScript库和框架的直接链接。通过使用Unpkg.com的链接，开发者可以直接在浏览器中引入所需的库，而无需先在本地安装和构建。cdnjs （cdnjs 的版本更新可能略滞后，可以看到资源在github中的情况，有时搜索名字要加上 .js才能比较精确）三、jsDelivr（可以看到资源最近下载情况，各个版本下载量，并访问官网等；如何在unpkg找到库对应版本的链接地址：(Unpkg.com首页有示例)
2024-12-09 15:44:08
581
原创 vue知识点： v-if和v-for为何不能同时使用？
作用域内定义的变量别名。v-if里是无法访问到todo的，这将会报错。在vue3中，是因为当它们同时存在于一个节点上时，写法 二：利用元素，将。写法一、先过滤数据，再使用v-for。的子元素中，而不是与。直接放在同一个元素上。
2024-03-31 16:58:48
615
原创 window.postMessage学习（问答式）
答：可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面同源时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。答：在JavaScript中，同源（Same-Origin）是指两个页面的协议、域名和端口都相同。这是浏览器安全策略的一部分，用于限制不同源之间的交互，以防止潜在的安全风险。
2024-03-11 14:58:55
1249
2
原创 抓包工具：fiddler
确保手机和电脑连接同一wifi，苹果手机进入wif连接页面，点击wifi后面的感叹号，进去最下面有个配置代理，默认关闭状态，切换手动配置代理：代理的主机名为上面查到的ip地址，比如我的为172.23.89..40，端口为Tools->Options->Connections里设置的端口，默认为8888，如下图，点击存储。3、安装证书生成器插件，不然访问https相关网站的时候，会提示连接不安全，在pc端虽然不安装也可以监听到https请求，但要监听移动端的https请求就必需安装，不然是监听不到的。
2024-01-09 21:49:24
2071
原创 flex-grow，flex-shrink 缩放比例详解
属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。不同于flex-grow，如果设定了flex-shrink，当容器空间不足时， 每个项目收缩的空间，不仅跟项目设定的flex-shrink和总的收缩空间有关，还跟项目自身的大小有关。加入弹性元素本身大小作为计算方法的考虑因素，主要是为了避免将一些本身宽度较小的元素在收缩之后宽度变为0的情况出现。son1最终渲染宽度 = 120px + 40*1.5/(1+1.5) = 144px。，即如果存在剩余空间，也不放大。
2023-12-07 17:11:36
520
原创 websocket和mqtt
而MQTT5则是在2019年发布的，它在3.1.1版本的基础上做了更多的补充和完善，同时完全兼容3.1.1版本。文件大小：Paho MQTT.js相比小得多， MQTT.js 压缩版本311kb ，Paho MQTT.js 压缩版本只有31kb。PAHO MQTT.js版本1.0.2及之前的版本文件名用的是mqttws31.js，之后的版本文件名用的是paho-mqtt.js。PAHO MQTT.js除了版本0.9.0全局变量用的 Messaging，其他版本的导出的全局变量都是 Paho。
2023-11-22 16:56:07
2040
原创 script标签问题
原因是：javascript代码中只要出现了“”，无论是在引号中还是在注释中都会被认为是script标签的结束。于是给字符串中 前面部分就会因缺少后引号而报语法错误。图中代码，提示错误：Unterminated string literal. （未终止的字符串文字。解决方法2：用acill字符 \x3c 代替
2022-10-14 14:57:42
941
原创 vue3[@vue/compiler-sfc] ::v-deep usage as ...和 [@vue/compiler-sfc] the ＞＞＞ and /deep/ combinators...
单文件组件样式特性 | Vue.jsvue3单文件组件中，处于 scoped 样式中的选择器如果想要做更“深度”的选择，也即：影响到子组件，可以使用 :deep() 这个伪类；<style scoped> :deep(.el-input) { width: 200px; height: 40px; }</style>使用下面的这些写法时，编译的时候终端会有警告；（1）::v-deep<style sc..
2022-05-26 10:52:26
4155
原创 Element属性 ：获取，设置元素滚动距离，scrollHeight,scrollTop, scrollLeft属性详解
Element.scrollTop - Web APIs | MDNElement.scrollTop属性可以获取或设置一个元素的内容垂直滚动的像素数。scrollTop 可以被设置为任何整数值，同时注意：如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个"non-scrollable"属性），scrollTop将被设置为0。 设置scrollTop的值小于0，scrollTop被设为0 如果设置了超出这个容器可滚动的值,scrollTop会被设为最大值。
2022-05-25 10:10:31
4352
原创 Element属性：获取元素各边框宽度，clientTop,clientLeft
clientTop： 元素上边框的宽度，即border-top-width，只读属性，number类型clientLeft：元素左边框的宽度，即border-left-width，只读属性，number类型不存在clientBottom和clientRight属性，可通过如下方式获取
2022-05-25 10:08:03
831
原创 Element属性：scrollHeight，clientHeight，offsetHeight区别
相关属性解释见专栏其他文章介绍只讨论块级元素的情况下：（1）元素没有滚动条，且没有border-top, border-bottom时，三者相等（2）元素没有垂直滚动条时，scrollHeight，clientHeight相等（3）元素有垂直滚动条，且没有border-top, border-bottom时，clientHeight和offsetHeight相等（4）元素有垂直滚动条，且有border-top或 border-bottom时，三者不相等JS在线编辑器,JS在线运行
2022-05-24 20:59:53
405
原创 Element属性：scrollHeight，clientHeight，scrollTop，offsetHeight；应用示例：控制滚动条滚动
本文章相关的属性：scrollHeight，clientHeight，scrollTop，offsetHeight元素可滚动距离计算公式： let canScrollDistance =element.scrollHeight - element.clientHeight;示例1：实现滚动条缓慢滚动到底部
2022-05-24 20:25:03
540
原创 HTMLElement属性：offsetParent,offsetLeft,offsetTop
HTMLElement.offsetParent - Web API 接口参考 | MDNHTMLElement.offsetParent是一个只读属性，返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的table,td,th,body元素。当元素的style.display设置为 "none" 时，offsetParent返回null。offsetParent很有用，因为offsetTop和offsetLeft都是相对于其内边距边界的。HTMLElem...
2022-05-20 14:42:13
697
原创 HTMLElement属性：获取元素高度，宽度，offsetHeight, offsetWidth
HTMLElement.offsetLeft - Web API 接口参考 | MDNHTMLElement.offsetHeight 是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。如下图：offsetHeight = 内容高 + paddingTop + paddingBottom + borderTop + borderBottom...
2022-05-20 14:41:59
1440
原创 Element属性 ：获取元素高度，宽度，clientHeight, clientWidth属性详解
Element.clientHeight - Web APIs | MDN是 Internet Explorer 对象模型中引入的属性。是一个只读属性，其值计算方式如下；clientHeight = 内容高 + paddingTop + paddingBottom - 水平滚动条的高度 (如果存在)如图：控制台选中元素时，看到的蓝色部分就是盒子内容box-sizing值为content-box时：内容高 = css heightbox-sizing值为border...
2022-05-19 16:52:12
2509
原创 js截取一对括号里面的内容（正则表达式）
本文只针对有一对括号的情景：相关正则表达式：// 小括号和中括号作为正则里的特殊字符，需要使用转义字符\let regex = /\((.+?)\)/g; // 小括号let regex = /\[(.+?)\]/g; // 中括号// 下面这些括号，则不需要，不过加了也没关系let regex = /{(.+?)}/g; // 大花括号let regex = /（(.+?)）/g; // 中文小括号let regex = /【(.+?)】/g; // 中文中括号使用示例：
2022-05-12 17:06:44
5945
转载 ES6 增强的对象字面量
————————————————版权声明：本文为优快云博主「梦想画家」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.youkuaiyun.com/neweastsun/article/details/103746344ES6 中三种方式定义对象属性重复样本代码让开发者很不爽，代码混乱掩盖了重要业务代码。ES6关注并解决一些重复的代码方式，使代码简洁、逻辑清晰，如数组解构、对象解构、箭头函数等。本文我们主要介绍利用三种方式在初始化对象
2022-05-08 15:44:49
190
转载 flex实现多行多列-内容单行或者2行-超过2行显示省略号且文字居中
版权声明：本文为优快云博主「billycoder」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.youkuaiyun.com/billycoder/article/details/122640705效果图：关键点：超出两行或多行显示省略号的盒子，外面再套一层flex盒子，这样就可以实现内容只有一行的时候，文字也可以垂直居中了；代码如下：<!DOCTYPE html><html lang.
2022-05-06 21:15:53
3238
原创 谷歌浏览器支持的音频和视频文件编码格式
官方文档：https://www.chromium.org/audio-video注意里面的Google Chrome OS ：是一款Google开发的基于PC的操作系统，并不是指谷歌浏览器。==Video== VP8 VP9 AV1 [Only Chrome OS, Linux, macOS, and Windows at present] Theora [Except on Android variants] H.264 ...
2022-04-26 11:23:06
5395
原创 video及视频文件相关知识文章汇总
video基础知识：<video> - HTML（超文本标记语言） | MDN查看视频文件信息：在线网站：mediainfo.js在线网站：MP4Box.js - JavaScript MP4 Reader/Fragmenter播放器：potplayer，播放视频，右键查看属性视频编码格式：视频编码格式_全球百科AVC和HEVC简单比较：avc和hevc有什么区别_处理_带宽_流式H.264/AVC 概述：H.264/AVC 概述 - 知乎H.26..
2022-04-26 11:00:57
321
转载 js计算base64图片大小
————————————————版权声明：本文为优快云博主「小刘先森」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.youkuaiyun.com/qq_35241223/article/details/109164015另一篇参考文章：base64计算文件大小方法（C#和js）_今晚打老虎z的博客-优快云博客_base64获取文件大小Base64简介base64中每6位为一个单元，对应一个打印字符。2的6次方为64，所..
2022-04-15 18:01:24
4027
原创 node相关（二）： npm =》 npm install本地安装的三种指令 （了解）
举例：运行： npm install less运行： npm install less -S运行： npm install less -D（1）在一个空目录下：三者效果等同（2）当前目录存在package.json这个文件，但未安装lessnpm install less 效果等同于 npm install less -S（3）当前目录存在package.json这个文件，且已安装less运行：npm install less =》不会有变化运行：npm inst
2022-03-10 19:17:38
360
原创 node相关（二）： npm
NPM的全称是Node Package Manager，是一个NodeJS包管理和分发工具。npm 是干什么的？一、npm常用命令（单词：aliases, alias的复数，alias：别名，化名）（1）查看npm有哪些命令npm -l（小写的L）（2）live-serverNPM 使用介绍...
2022-03-06 17:57:48
359
原创 【layui】laydate选中日期后，即刻关闭弹出框
laydate.render({ elem: '#yearInput', type: 'year', trigger: 'click', showBottom: false, // 选中某个年份后即刻关闭弹出框，年份扔可以左右点击选择 change: function (value, date, endDat...
2021-05-13 18:59:31
1952
原创 js中通过ajax接口后台返回的文件流如何进行下载？
Blob是xhr 2的内容，jquery不支持，可以考虑axios或原生xhr/fetch。使用原生xhr方法如下download("http://.....exportData", {"name": "张三", "year": 30});function download(url, data) { var xhr = new XMLHttpRequest(); xhr.open('POST', url, true); //.....
2021-05-10 14:51:42
6434
4
原创 【汇总】相关问题一： 解决ios系统下，返回时页面不刷新的问题
百度搜索出来的解决方法基本都是：window.onpageshow =function(event){ if(event.persisted){ window.location.reload(true); } };调试的时候，确实有进入if代码块里面，但是window.location.reload(true);执行后页面却并没有....
2021-04-28 15:27:40
880
1
原创 取消文本选中状态，禁止选中 js/css
用js，直接取消选中的文本window.getSelection().empty()用css，对特定区域设置选中透明效果p::selection {background: transparent}getSelection文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getSelection...
2021-03-26 19:27:28
3849
原创 伪元素灵活使用demo，伪元素动态内容，伪元素由内容决定宽度，伪元素居中问题
* content: attr(placeholder); 内容随着元素属性变化 * width: max-content; 宽度随着内容而变化 * left: 50%; transform: translateX(-50%); 使得不定宽的伪元素相对父元素居中<!DOCTYPE html><html lang="zh"><head> <meta charset="utf-8">...
2021-03-18 19:13:35
278
2
原创 禁止iframe产生历史记录
1.页面上有两个iframe元素 <iframe id="trustBillsIframe" class="iframe" src="" scrolling="no" frameborder="0"></iframe> <iframe id="handleRecordIframe" class="iframe hide" src="" scrolling="no" frameborder="0"></iframe>...
2021-01-31 16:22:03
848
原创 【layui】 laydate动态改变日期最小值或最大值
官方文档：https://www.layui.com/doc/modules/laydate.html#minmaxvar startDateL = laydate.render({ elem: "#startDate", eventElem: ".glyphicon", type: 'date', trigger: 'click', format: 'yyyy-MM-dd'...
2020-12-24 22:51:14
2485
原创 输入框placeholder字体颜色修改
占位符属性placeholder<input type="text" placeholder="我是占位符" value=" ">默认的placeholder字体颜色呈浅灰色，通过下面的方法，可以改变默认颜色：input:-moz-placeholder, textarea:-moz-placeholder { color: red; } input:-ms-input-placeholder, textarea:-ms-input...
2020-12-16 10:41:31
9088
1
原创 select2下拉框在模态框中无法正常显示的问题
原因：select2的z-index值小于父容器的z-index值设置select2的dropdownParent参数后，select2会根据据父容器的z-index值自动调整select2的z-index值$("#org").select2({ language: 'zh-CN', dropdownParent: $('#orgBoxModal')}); $('#orgBoxModal')为下拉框所在模态框对应的jquery对象...
2020-12-09 14:11:13
1182
转载 js 页面全屏控制
handleFullScreen(true); // 全屏模式 handleFullScreen(false); // 退出全屏 // 全屏控制 function handleFullScreen(fullScreen) { if (fullScreen) { // 全屏模式 var docElm = document.documentElement; if (docEl...
2020-08-21 19:20:58
314
转载 linux centOS7安装jdk1.8的方法
1、在/usr/local 目录下新建Java文件夹mkdir /usr/local/java将jdk拷贝到 /usr/local/java 进入到java文件夹，解压压缩包 (下载jdk方法见文章末尾)tar xvf jdk-8u261-linux-x64.tar.gz2、设置环境变量 这里采用全局设置方法，就是修改etc/profile，它是是所有用户的共用的环境变量 找到/etc/profile,编辑，在末尾添加export JAVA_HOME=/usr/...
2020-07-16 10:33:12
151
原创 jQuery click 与原生 click 的区别 || jQuery 代码触发a标签的点击事件
<a id="skip" href="https://www.baidu.com/" target="_blank">打开百度<a>使用 $('#skip').click()或者$('#skip').trigger('click')发现都不能跟用户手动点击一样打开新的页面，没有任何反应<a id="skip" href="https://www.baidu.com/" target="_blank" onclick="alert('hello')">打...
2020-07-14 16:38:07
406
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人