前端类
关注
分享
扫一扫
UserGuan
这个作者很懒，什么都没留下…
展开
-
CSS 控制 video 标签的控制栏组件的显隐
当 video 标签添加上 controls 属性时，页面上会显示出所有的控制组件。若有些组件不需要展示，只需在 css 中设置相关属性把它隐藏掉即可。原创 2024-02-05 16:03:32 · 1610 阅读 · 0 评论 -
ElementUI 自定义 Tree 树形控件背景；Tree 树形菜单组件
ElementUI 自定义 Tree 树形控件背景；Tree 树形菜单组件原创 2023-11-02 20:00:00 · 1063 阅读 · 0 评论 -
win 下安装 nvm 的使用与配置
nvm 全名 node.js version management，是一个 nodejs 的版本管理工具。通过它可以安装和切换不同版本的 nodejs。为了确保 nodejs 已彻底删除，可以看看安装目录中是否有 node 文件夹，有的话一起删除。再看看文件夹下有没有以及等都删除掉。再看看环境变量中有没有 node 相关的，有的话也一起删除掉。原创 2023-10-30 17:00:35 · 3397 阅读 · 0 评论 -
关于 XSS 漏洞的测试
XSS(Cross-Site Scripting)跨站脚本攻击，是一种常见的网络安全漏洞，指攻击者将恶意脚本注入到网页中，然后这些脚本在用户的浏览器中执行。这种攻击通常发生在基于 Web 的应用程序中，如网站和 web 应用程序，当它们未能正确过滤、转义或验证用户输入时。XSS 攻击的主要目标是窃取用户的敏感信息，如：登录凭证、会话令牌和个人数据。或者执行恶意操作，如：冒充用户执行操作、改变页面内容或重定向用户到恶意网站。原创 2023-10-18 22:15:00 · 892 阅读 · 0 评论 -
CSS 实现页面底部加载中与加载完毕效果
【代码】CSS 实现页面底部加载中与加载完毕效果。原创 2023-08-23 19:01:01 · 909 阅读 · 0 评论 -
flex 布局使用 space-between 时将最后一行左对齐
判断如果最后一个元素处于当前列，会发生布局错乱，则设置元素的 margin-right 为剩余空间的大小(剩余列宽度 + 剩余间隙大小)。假设元素宽度是 $width，总间隙是 $space(盒子宽度 - 元素宽度 * 列数)计算公式：宽度为30%，则剩余间隙：100% - 30% * 3 = 10%计算公式：宽度为22%，则剩余间隙：100% - 22% * 4 = 12%计算公式：宽度为18%，则剩余间隙：100% - 18% * 5 = 10%特点：适用于任意列数布局，比较简单，缺点是会产生空标签。原创 2023-08-05 10:40:53 · 1026 阅读 · 0 评论 -
微信小程序UV、PV量解释以及接口调用频率
如果访客连续30分钟没有新开和刷新页面，或者访客关闭了浏览器，则当访客下次访问网站时，访问次数加1。访客在一次访问中，平均打开网站的时长。即每次访问中，打开第一个页面到关闭最后一个页面的平均值，打开一个页面时计算打开关闭的时间差。一天之内网站的独立访客数(以Cookie为依据)，一天内同一访客多次访问网站只计算1个访客。只浏览了一个页面便离开了网站的访问次数占总的访问次数的百分比。以下接口的调用频率的最大值是该小程序的PV量的2倍。一天的独立访客中，历史第一次访问网站的访客数。访客到达转化目标页面的次数。原创 2023-07-06 14:51:19 · 3739 阅读 · 0 评论 -
微信小程序基础库的介绍与更改
1、基础库是小程序运行的必要环境，我们的开发主要就是面向基础库开发的。基础库封装了微信和手机的能力并提供给小程序使用，我们使用基础库提供的组件和API开发起来非常的方便。2、基础库存在于我们的微信客户端中，它和微信一样，也有其自己的版本，每个版本都会有一些新特性。微信官方为了使得基础库的版本和微信的版本同步，采取了一个微信版本对应一个基础库版本的方式。这就使得用户在更新最新版本的微信时也能更新至最新版本的基础库。带来的优点就是用户的基础库都是最新版本的。原创 2023-07-06 14:43:53 · 4427 阅读 · 0 评论 -
数字滚动动画效果
vue-count-to 是一个没有依赖的轻量级 vue 组件，可以自行覆盖 EasingFn。可以设置 startVal 和 endVal，它会自动判断计数进行数字渲染。原创 2023-04-17 21:21:49 · 1703 阅读 · 1 评论 -
ECharts 横向柱状图自动滚动
【代码】ECharts 横向柱状图自动滚动。原创 2023-04-17 17:04:54 · 2277 阅读 · 1 评论 -
ECharts 横向柱状图与纵向柱状图的切换
① 柱状图的横向与纵向的设置与x轴和y轴的设置有关。② 将柱状图从纵向改成横向显示，只需要交换xAxis和yAxis中的设置即可。原创 2023-04-17 15:39:08 · 7196 阅读 · 0 评论 -
谷歌浏览器调试时页面的刷新与强制刷新+清空缓存的操作
浏览器的刷新一般分为三种类型即：1、正常重新加载。2、硬性重新加载(强制刷新)。3、清空缓存并硬性重新加载。原创 2023-02-28 16:51:15 · 12594 阅读 · 6 评论 -
flex 布局中子元素设置宽度无效的解决办法
因为父元素设置了【display: flex】所以该父元素下所有的子元素都会默认加上【flex: 0 1 auto】。其中 1 就是 flex 中的 flex-shrink 属性，表示开启元素的收缩功能，所以子元素宽度才会失效。flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。默认值：0 1 auto。原创 2023-01-05 19:09:47 · 12019 阅读 · 3 评论 -
颜色透明度或 alpha 值与十六进制对照表
透明度分为256个等级，即 0 ~ 256 之间的取值，0 表示完全透明，255 表示完全不透明。透明度 0 (完全透明) –> 255 (完全不透明)对应的 16 进制是 00 (完全透明) –> FF (完全不透明)，如: 50% 透明度的 50% 是 256 的一半即 128，因为是从 0 开始算的，所以是 127，转换成 16 进制就是 7F。注意：透明度 和 不透明度 是两个概念，它们加起来是1，或者100%原创 2022-12-08 23:11:16 · 11481 阅读 · 0 评论 -
echarts 折线图面积区域渐变
【代码】echarts 折线图面积区域渐变。原创 2022-11-22 09:20:45 · 1789 阅读 · 0 评论 -
通过 CSS3 实现特殊效果
【代码】通过 CSS3 实现特殊效果。原创 2022-11-18 11:52:58 · 363 阅读 · 0 评论 -
行高 line-height: 1.5、line-height: 150%、line-height: 1.5em 的区别
设置行高的元素(父元素) div 的 font-size: 60px;，那父元素的行高为 60 * 150% = 90，即 line-height: 90px;，那父元素的行高为 60 * 1.5 = 90，即 line-height: 90px;，那子元素的行高为 40 * 1.5 = 60，即 line-height: 60px;元素内所有标签的行高是由设置行高的元素的字体大小决定的(这两种写法的效果是一样的)。子元素 p 的行高直接继承父元素的行高，即 line-height: 90px;原创 2022-11-18 11:23:59 · 1515 阅读 · 0 评论 -
echarts 统计图 x 轴实现拉伸滑动
【代码】echarts 统计图 x 轴实现拉伸滑动。原创 2022-11-06 18:46:19 · 3541 阅读 · 0 评论 -
使用 CSS + absolute 实现奥运五环效果
【代码】使用 CSS + absolute 实现奥运五环效果。原创 2022-10-29 15:10:56 · 133 阅读 · 0 评论 -
CSS Loading 加载效果
【代码】CSS Loading 加载效果。原创 2022-10-17 10:36:10 · 404 阅读 · 0 评论 -
HTML使用 crypto-js-AES 加密
【代码】HTML使用 crypto-js-AES 加密。原创 2022-09-14 13:54:52 · 4797 阅读 · 0 评论 -
用CSS实现对（√）和错（×）
注：因为这些字符属于unicode字符集，我们在使用时需将添加这些字符的代码声明为UTF-8格式。原创 2022-08-12 11:36:45 · 2242 阅读 · 0 评论 -
new Date(date)与new Date(date).getTime()在苹果手机中返回NaN
new Date(date).getTime()方法来获取时间戳，在苹果手机上是不兼容的new Date(date)方法进行字符串日期转换成时间格式，在苹果手机上是不兼容的解决办法：new Date(data.replace(/-/g,'/')).getTime();data是字符串，格式类似于：'2022-05-31 09:17:40'...原创 2022-05-31 09:18:36 · 1213 阅读 · 1 评论 -
如何在手机端运行HTML代码并查看console打印
js引入方式(html中使用)<script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script><script>let vConsole = new VConsole();</script>npm引入方式(vue中使用)第一步：安装npm install vconsole第二步：引入import Vconsole from 'vconsol原创 2022-05-30 17:20:35 · 1075 阅读 · 0 评论 -
CSS + JS 实现内容无限垂直滚动
<!DOCTYPE html><html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>CSS + JS 实现内容无限垂直滚动</title> <style type="text/css"> body { display: fl.原创 2022-05-25 21:34:40 · 768 阅读 · 0 评论 -
H5打开APP或小程序
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>H5打开APP或小程序</title> <script src="http://libs.baidu.com/jque.原创 2022-05-13 20:12:47 · 701 阅读 · 0 评论 -
HTML判断页面在哪个浏览器中打开(移动端[微信、微博等]、PC端[火狐、Safari等])
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>JS判断页面在哪个浏览器打开(QQ、微信、微博、安卓、IOS、PC)</title> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> </head> .原创 2022-05-13 18:56:12 · 1455 阅读 · 0 评论 -
重置页面滚动条样式，页面内容自动水平滚动
上下滚动条/* 上下滚动条 */.box_roll_vertical { overflow-y: auto; overflow-x: hidden;}.box_roll_vertical::-webkit-scrollbar { width: 2px;}.box_roll_vertical::-webkit-scrollbar-track,.box_roll_vertical::-webkit-scrollbar-thumb:hover { backgrou原创 2022-05-12 11:24:56 · 385 阅读 · 0 评论 -
css分割线
方式一：使用after与before设置.box_area { position: relative; color: #000; font-size: 24px; text-align: center; overflow: hidden;}.box_area::after,.box_area::before { position: absolute; top: 50%; content: ''; width: 100%;原创 2022-05-01 16:24:01 · 1556 阅读 · 0 评论 -
css利用border实现三角效果
【代码】css利用border实现三角效果。原创 2022-01-29 11:47:15 · 1598 阅读 · 0 评论 -
正则表达式去除所有HTML标签，获得标签中的内容
// 替换所有的html标签，最终得到标签中的内容const req = '<div style="color: #f00; font-size:20px">全球领先的中文搜索引擎，找到所求。<br />百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果...</div>';const median = req.replace(/<\/?.+?>/g, '');const res = median.replace(/ /g, ''); // re.原创 2022-01-05 12:02:38 · 2654 阅读 · 0 评论 -
去除rich-text所有标签的style和class等属性
<view style="padding: 20rpx"><rich-text :nodes="repChar(content)" /></view>repChar(e) { const baseUrl = 'www.xxx.com/'; // 请求路径 e = e.replace(new RegExp('src="/', 'g'), 'src="' + baseUrl); // 给图片的 URL 地址加上请求路径 e = e.replace.原创 2021-12-31 11:44:24 · 1003 阅读 · 0 评论 -
方法的封装与使用
封装方式一封装的方法/** 从底部向上弹出操作菜单 * @param {Object} itemList 按钮的文字数组(微信、百度、字节跳动小程序数组长度最大为6个) */function showSheet(itemList) { return new Promise((resolve, reject) => { uni.showActionSheet({ itemList: itemList, success原创 2021-12-23 10:02:07 · 406 阅读 · 0 评论 -
CSS内容超出DIV宽度后自动换行，显示省略号
内容超出DIV宽度后自动换行word-wrap: break-word;word-break: break-all;overflow: hidden;内容超出DIV宽度后显示省略号单号white-space:nowrap;overflow:hidden;text-overflow:ellipsis;多行word-break: break-all;text-overflow: ellipsis;overflow: hidden;display: -webkit-..原创 2020-08-05 11:07:33 · 5274 阅读 · 0 评论 -
CSS的水平居中与垂直居中
一、水平居中行内元素水平居中：指文本text、图像img、按钮超链接等只需给父元素设置text-align:center即可实现.center{ text-align:center;}<div class="center">水平居中</div>块级元素水平居中：指div标签等只需给需要居中的块级元素设置margin:0 auto即可，但宽度width值一定要有.center{ width:200px; margin:0 aut原创 2020-07-14 11:49:49 · 420 阅读 · 0 评论 -
layui中table表格内容过多自动换行
改样式前效果：超出内容没有自动换行，超出部分需要自动换行。将以下css样式覆盖到当前html文件的头部样式中即可：<style>.layui-table-cell { font-size:14px; padding:0 5px; height:auto; overflow:visible; text-overflow:inherit; white-space:normal; word-break: break-all;}原创 2020-05-13 10:41:40 · 5002 阅读 · 3 评论 -
web前端常见的特殊符号
往网页中输入特殊字符时，需在html代码中加入以&开头的字母或以&#开头的数字组合。https://www.toptal.com/designers/htmlarrows/https://blog.csdn.net/u013778905/article/details/53177042?depth_1-utm_source=distribute.pc_relevant...原创 2020-04-15 10:08:11 · 3260 阅读 · 0 评论 -
把a标签设置为不可点击，鼠标放上去让div变成小手样式
把a标签设置为不可点击 <div style="pointer-events: none;"> <a href="www.baidu.com">百度一下</a> </div>給div添加了pointer-events: none样式后，div里面的所有点击事件都不会被触发鼠标放上去让div变成小手样式cursor...原创 2019-12-24 10:52:59 · 6378 阅读 · 0 评论 -
解决input输入的是空格问题
<el-input v-model="form.reason" type="textarea" placeholder="请输入理由"/>this.form.reason.split(' ').join('').length === 0this.form.reason.split(' ').join('').length === 0的意思是先以空格拆分成数组，再拼接起来，最...原创 2019-12-24 10:50:25 · 5285 阅读 · 0 评论 -
使用浏览器调试前端的必备技巧
一、按钮的功能【从左往右来】1.箭头按钮：用于在页面选择一个元素来审查和查看它的相关信息。2.设备图标：点击它可以切换到不同的终端进行开发模式，移动端和PC端的一个切换，可以选择不同的移动终端设备，同时可以选择不同的尺寸比例，chrome浏览器的模拟移动设备和真实的设备相差不大，是非常好的选择。3.Elements功能标签页：用来查看，修改页面上的元素，包括DOM标签，以及...原创 2019-12-03 14:13:46 · 2035 阅读 · 4 评论