前端零零散散
关注
分享
扫一扫
文章平均质量分 66
前端零零散散
不知-_
一切皆为自学所记录
展开
-
前端实现下载文件（处理后端返回的二进制流）
Blob代表了一中不变的、原数据的类文件对象，它们可以当作text或者binary data或者转换为可读取的流(ReadableStream)。所以它的方法可以被用来处理数据。正常情况下axios 不会处理二进制数据，即会去接收但是不会去处理，需要在请求得适合设置。点击按钮向后端请求数据，实现文件下载。// 模拟在按钮上实现一次鼠标点击。// 允许用户在客户端上保存文件。// 释放 URL 对象。原创 2022-10-01 10:56:53 · 2287 阅读 · 2 评论 -
js中的Date对象 及 将时间戳转换为yy-mm-dd hh:mm:ss格式的方法
Date 对象用于处理日期和时间。日期对象是用 创建的。有 4 种方法创建新的日期对象：说明：JavaScript（默认情况下）将以全文本字符串格式输出日期：在 HTML 中显示日期对象时，会使用 toString() 方法自动转换为字符串。注意：使用构造函数（ ）创建是对象类型使用函数创建是字符串类型......原创 2022-07-14 15:55:48 · 2066 阅读 · 0 评论 -
uniapp封装全局js并在页面引用
创建一个common文件夹，在common文件夹下创建public.js文件原创 2022-07-14 11:38:51 · 1231 阅读 · 0 评论 -
Vue2.x 过滤器
在 2.x 中，开发者可以使用过滤器来处理通用文本格式。过滤器可以用在两个地方：双花括号插值和 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示。例1：结果：例2：过滤器可以串联： 的结果将传递到 中。过滤器是 JavaScript 函数，因此可以接收参数：这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 ‘arg1’ 作为第二个参数，表达式 arg2 的值作为第三个参数。在 3.x 中，过原创 2022-07-14 09:57:15 · 260 阅读 · 0 评论 -
css margin传递（塌陷现象）
互相嵌套的块级元素，子元素的margin-top会作用在父元素上，导致父元素一起向下移动。只有margin-top会有传递的问题，其他三个方向是没有传递问题的。给父元素设置border-top或者padding-top（分隔父子元素的margin-top）给父元素设置padding-top来达到相同的效果给父元素设置overflow:hidden（推荐使用，触发BFC）将其中一个元素转换成行内块元素给其中一个元素设置浮动：当父容器或子容器处于浮动时，就不存在margin传递问题了，因为已经脱离了文档流原创 2022-07-13 15:22:43 · 198 阅读 · 0 评论 -
js和jq实现点击小眼睛后密码显示与隐藏切换
点击密码框后的小眼睛图标，可以改变图标的样式，同时改变输入框内的文字状态。jq实现一个我的疑问——jq入口函数必须要写吗？在< head> 标签中，jQuery入口函数必须要写，在< body> 可以不写。写上入口函数后不论放在哪个标签下都能去执行。一般建议在body标签中写入口函数，就是为了等页面加载完成后才执行入口函数。...原创 2022-06-03 22:04:53 · 1418 阅读 · 0 评论 -
css复合选择器
复合选择器是通过基本选择器进行组合后构成的。常用的复合选择器有：交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器和属性选择器等。原创 2022-06-03 21:05:36 · 1204 阅读 · 0 评论 -
opacity和rgba的区别
css设置透明度原创 2022-06-03 15:29:50 · 1682 阅读 · 0 评论 -
css 动画——animation属性（含transition）
css动画原创 2022-06-03 14:11:00 · 285 阅读 · 0 评论 -
vue组件
vue组件基础原创 2022-06-02 11:17:11 · 587 阅读 · 0 评论 -
三栏布局：左右固定宽，中间自适应的几种方式
要求三个div占满一行，左右两个div宽为100px，中间的div自适应宽度，时刻保持三个div占满一行实现方法1. 浮动 float代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor原创 2022-05-31 16:41:10 · 474 阅读 · 0 评论 -
js事件流
参考：人民邮电出版社 Javascript高级程序设计（第3版）文章目录1 事件2 事件流2.1 捕获事件2.2 冒泡事件2.3 DOM事件流1 事件Javascript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间2 事件流当浏览器发展到第四代时，浏览器开发团队遇到了一个很有意思的问题：页面的哪一部分会拥有某个特定的事件？要明白这个问题问的时什么，可以想象华仔一张纸上的一组同心圆。如果你的手指放在圆心上，那么你的手指指向的不是一个圆，而是纸上所有原创 2022-05-28 11:51:25 · 168 阅读 · 0 评论 -
后代选择器和子代选择器
文章目录title属性后代选择器和子代选择器margin传递（塌陷现象）opacity和rgba的区别title属性title不止是< img>标签才有的属性，它其实是所有html标签都具有的一个属性，它表示一个提示信息，当我们把鼠标放到标签上时，该提示信息就会显示出来。后代选择器和子代选择器后代选择器：M N { }子代选择器：M > N { }最大的区别：子代选择器只能选择元素的子代，而他的孙代、曾孙不能被选上。后代选择器：子代选择器：为什么不用字体颜色color原创 2022-01-20 17:51:50 · 458 阅读 · 0 评论 -
js实现滑动条验证
一、效果预览二、下载插件下载地址：https://sc.chinaz.com/jiaoben/160330568920.htm下载后解压文件，有以下文件：可以在index.html中看使用示例。三、基础使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE原创 2022-03-02 11:18:26 · 2636 阅读 · 0 评论 -
Jq点击其他任意地方隐藏关闭弹窗div
代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g原创 2022-01-13 15:07:28 · 2634 阅读 · 0 评论 -
get与post请求方式
HTTP协议规定，浏览器向服务器提交请求的方式有8种，但GET与POST请求时最常用的两种方式。GET请求由于GRET请求会将请求所携带的参数作为请求URL中的一部分出现，所以请求参数会显示在地址栏。这就导致了GET提交的三点不足：参数值只能是字符串，而不能是其他类型可以携带的数据量较小数据安全性较低但GET请求有一个重要的特征：客户端一旦接收到“服务器向GET请求发送的响应”后，浏览器会自动缓存响应。当客户端再一次提交相同请求时，将直接读取本地浏览器缓存中的数据，而不再向服务器端真正发送数据原创 2021-01-24 18:44:42 · 535 阅读 · 2 评论 -
vue中实现a标签href里添加参数
原创 2021-12-29 17:51:56 · 3443 阅读 · 0 评论 -
CSS实现中间粗两头细的线条
通过给一个盒子添加渐变背景的方式来实现画一条中间粗两头细的线条的效果效果如图：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wi原创 2022-01-20 14:51:58 · 1520 阅读 · 0 评论 -
包含项目组的下拉列表 select-optgroup-option
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>sel原创 2021-12-18 23:22:02 · 286 阅读 · 0 评论 -
使用localStorage进行页面间传值
A页面：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&原创 2021-12-27 22:18:27 · 1060 阅读 · 0 评论 -
CSS背景图模糊，内容保持清晰
效果：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti原创 2021-12-18 22:47:13 · 1738 阅读 · 0 评论 -
改变input内placeholder的字体颜色
input::-webkit-input-placeholder { /* WebKit browsers */ color: red;}input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: red;}input::-moz-placeholder { /* Mozilla Firefox 19+ */ color: red;}input:-ms-input-placeholder { /* Internet原创 2021-12-18 21:58:09 · 609 阅读 · 0 评论 -
CSS 文本溢出处理（单行和多行）
文章目录1 单行文本2 多行文本溢出1 单行文本html：<span>单行文本溢出处理</span>css：span{ display: inline-block; width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}span{ border: 1px solid black; }效果图：注意：要配合width属性使原创 2021-12-18 18:37:55 · 1488 阅读 · 0 评论 -
CSS定位有哪些值，分别是相对谁定位？
目录CSS position属性staticrelative 相对定位absolute 绝对定位fixed 固定定位sticky 黏性定位常用定位——“子绝父相”CSS position属性css 的 position 属性用于指定一个元素在文档中的定位方式。top、right、buttom、left属性则决定了该元素的最终位置。position取值：static（默认）| relative | absolute | fixed | stickystatic一般的标签元素不加任何定位属性都属于静态原创 2021-12-18 17:11:41 · 921 阅读 · 0 评论 -
可单选可进行范围选择的日历——daterangepicker的改动
Date Range Picker是用于选择日期范围，日期和时间的JavaScript组件。我的需求我的需求是点击某按钮出现一个日历，该日历可单选可多选，根据选择的日期筛选日期范围内的数据。最后做出来的效果如下图：单选多选Date Range Picker的使用和改动过程1 确定需要的选择器选择上图这款带回调的简单日期范围选择器，具体使用过程见官网。2 汉化等操作<!DOCTYPE html><html lang="en"><head>原创 2022-01-13 11:59:53 · 2498 阅读 · 0 评论 -
Merry Christmas
我的圣诞树写好啦~第一颗圣诞树参考链接：https://www.bilibili.com/video/BV1PZ4y1X7sY展示：代码HTML：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi原创 2021-12-25 20:06:11 · 596 阅读 · 0 评论 -
idea常用快捷键
快捷键功能Alt + Enter导入包，自动修正代码Ctrl + Y删除光标所在行Ctrl + D复制光标所在行的内容，插入光标位置下面Ctrl + Alt + L格式化代码Ctrl + /单行注释，再按取消注释Ctrl + Shift + /选中代码注释，多行注释；再按取消注释Alt + Insert自动生成代码，toString, get, set等方法Alt + Shift + 上下箭头移动当前代码...原创 2021-03-06 14:00:14 · 105 阅读 · 0 评论