I Have.-CSDN博客

原创实现深拷贝

在通过 vuex 进行数据共享的时候都知道，vuex有一个响应式的特性，如果组件中想要使用vuex中的共享数据，但是在某一情况下需要改变这个数据，并且还不能影响其他使用该数据的组件时，就可以通过深拷贝来实现，深拷贝会重新开辟一块内存，存放对应的数据，改变之后不会影响原来的数据，下面是通过递归实现的深拷贝：function deepCopy(new_o, old_obj) { for (var k in old_obj) { // 判断属于那种数据类

2021-12-12 16:04:13 635

原创 Elenment UI 中上传图片(upload)

在做项目的时候用到Element UI中的 upload属性上传图片，但是发现请求之后，只是页面中上传成功，服务器返回的状态码并不是200，而且提示无效token，但是在全局配置的时候已经配置了发起请求时，自动携带token：/ 请求时, 自动携带token值axios.interceptors.request.use(config => { config.headers.Authorization = window.sessionStorage.getItem('token') //

2021-12-10 16:14:51 342

原创 FormData对象

formdata对象作用：可以将表单对象作为参数传递到服务器端，还可以传递二进制数据格式文件，用formdata对象传递表单，需要将表单转换为formdata对象:new FormData(form)，然后可以将这个对象放在send()中进行提交，也正是这样，不能用get方法传递，而使用post方法传递；(因为get方法再url中传递参数)代码如下，写的不好的地方还请大家见谅：<body>  <form id="f

2021-11-20 23:26:42 1306

原创本地储存：sessionStorage和localStorage

本地储存：sessionStorage : 1、生命周期为关闭浏览器窗口；2、在同一个窗口下，数据可以共享；3、以键值对的方式存储使用；存储数据：sessionStorage .setItem('name',value);获取数据：sessionStorage .getItem('name');删除数据：sessionStorage .removeItem('name');清空数据：sessionStorage .clear();localStorage：1、生命周期永久有效，除非手

2021-11-20 23:07:35 202

原创缓动动画原理

利用定时器；让元素运动快慢发生变化，最常见的就是慢慢慢下来，就是让移动距离逐渐变小，用目标位置，减去现在的位置，由于现在的位置是逐渐增加的，所以相减之后就会逐渐减小；当盒子当前位置等于目标位置的时候，就停下来；但是实际上达不到莫表位置就停下来了，是因为除法会有小数除不尽的情况，所以需要用到向上取整Math.ceil() 和向下取整 Math.floor()；正数就是向上取整，负数向下取整：function animate(obj, target) { // 先清除原先的定

2021-11-06 18:42:00 118

原创 js侧边栏案例

利用滚动事件onscroll，当页面被卷去的头部(window.pageYOfset)大于某个值时，就让侧边栏定位为固定定位fixed，否则就还是绝对定位；// 滚动事件 onscroll document.addEventListener('scroll', function () { // 页面被卷去的头部：window.pageYOfset if (window.pageYOfset >= bannertop) {

2021-11-06 18:28:58 258

原创 js拖动模态框案例

拖动模态框主要用到3个鼠标事件：mousedown按下；mousemove移动；mouseup弹起；按下鼠标，获得鼠标在盒子内的坐标：// 按下鼠标，获得盒子内坐标 title.addEventListener('mousedown',function(e) { //e事件对象，事件发生时的数据，储存在其中 var x = e.pageX - login.offsetLeft; var y = e.pageY - login.off

2021-11-06 18:10:59 118

原创 js实现倒计时效果

用输入的时间减去现在的时间， var inputTime = +new Date('2021-11-10 24:00:00'); //返回输入时间总毫秒 var nowTime = +new Date(); //返回当前时间总毫秒 var times = (inputTime - nowTime) / 1000; //剩余时间的秒数Date构造函数返回的是总毫秒数，然后换算成时分秒，不满10的，前面用0补齐

2021-11-06 17:55:34 167

原创 DOM事件流

dom事件流分为捕获阶段和冒泡阶段，事件会一层一层传递，从父节点到子节点的过程叫做捕获阶段；从子节点到父节点传递的过程，叫冒泡阶段，js代码只能执行其中一个阶段，并且传统事件(onclick等)只能得到冒泡事件；daaEventlistener 中最后一个参数userCapture，为true就是捕获阶段调用程序，为false就是冒泡阶段调用程序1、捕获阶段：如下代码，点击son盒子，先弹出father盒子，再弹出son盒子var son = document.querySelector(

2021-11-06 17:39:26 65

原创 js实现tab栏切换案例

点击某个导航栏，显示对应的内容，在很多网页里面都存在，思路：利用for循环，注册点击事件，先创建一个样式类，当点击某一个元素时，利用排他思想，清除所有元素样式，然后点击了某个元素，就给被点击的元素添加这个样式的类名；// 排他，其余清除 class 这个类 for (var i = 0;i < lis.length;i++) { lis[i].className = ''; }

2021-11-06 17:20:51 592

原创 js实现隔行变色案例

在很多地方都能看到鼠标经过某一个表格对应的一行，这一行就会改变颜色，以便方便阅读，可以用js实现；通过循环，把注册事件写到循环里面，主要用到鼠标经过事件，和鼠标离开事件，循环次数也不要写定值，可以用数组长度arr.length，方便更改；css代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Com

2021-11-06 16:42:22 703

原创 js排他思想

排他思想常与事件搭配，当点击某个元素时，让该元素的样式发生变化，并且去掉其他元素的样式；比如轮播图下面的小圆点，点击某个圆点，让这个圆点变色，其他圆点颜色消失；排他思想步骤：就拿小圆点为例：先把所有圆点颜色清除，可以用循环，再给被点击的那个圆点颜色；<body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button>

2021-11-06 16:31:37 308

原创 js显示与隐藏密码明文案例

这个案例核心是：通过点击事件click，每点击一次，让文本框和密码框交换，相应的也改变图片路径，用一个全局变量，来帮助判断条件，在每次判断完之后，注意要让变量取反；代码如下：<body> <div class="box"> <label for=""> <img src="img/yin.png" alt="" id="eye"> </label>

2021-11-06 16:20:34 3101

原创 JS--预解析

在js中，代码运行分两步：1、预先解析；2、代码执行1、预解析：js引擎会把当前所有变量声明和函数声明提升到【当前作用域】的最前面，一定是当前作用域，并且只提升声明，并不进行赋值和调用函数的操作；比如下面案例：// 案例1： var num = 10; fun(); function fun() { console.log(num); var num = 20; }

2021-11-06 16:02:12 67

原创 flex布局水平垂直居中

在flex布局中，子元素的属性代码写在父盒子里面，并且flex布局中任何元素都可以设置大小；居中的思路就是分清楚主轴justify-content和侧轴align-items，都设置为center即可，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=ed

2021-10-30 23:12:58 5037

原创 css定位的方式使元素居中

定位居中的关键是要知道怎么移动元素的位置：先移动父盒子的50%，再往回移动自身的一半，也就是（-50%），知道盒子宽度就可以直接减半写上去，不知道就可以用transform ：transleteX（-50%）：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="I

2021-10-30 23:01:20 255

原创写出的页面超出了下面屏幕，但是无法滚动页面

在写移动端一个案例时，写到超出屏幕下端后无法滚动页面，其他样式没有任何问题，经过排查，发现是body里面的overflow：hidden；的原因，本来是为了隐藏左右超出的部分，但是上下也隐藏了，正确的写法是：overflow-x：hidden；body { max-width: 540px; min-width: 320px; margin: 0 auto; /* overflow: hidden; */ overflow-x: hidden;.

2021-10-26 15:50:11 3978 1

原创 flex布局笔记小结

有总结不到位的地方欢迎大家补充指正。任何一个容器都可以指定flex布局，flex布局中，行内元素也能定义大小，定义子项的属性要写在父项中；flex-direction：设置主轴方向（主轴可以是X轴，也可以是Y轴，默认为X轴）justify-content:设置主轴上子元素的排列方式（默认在主轴（X轴）上从左往右排列）align-items：侧轴子元素排列方式（主轴之外的另一个轴就是侧轴），这个属性针对单行（无换行）align-content：多行子元素排列方式flex-wrap：是否

2021-10-26 00:15:52 93

原创 3D旋转木马案例

理解不成熟，大家见谅；这个案例主要是练习3D坐标的旋转rotate和移动translate，除此之外还需要添加动画效果，需要注意的是，给每个盒子摆放时，是先旋转还是先移动，因为坐标轴会发生变化，这个案例可以先旋转，再移动，移动的时候是根据旋转后盒子的坐标进行的，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv=

2021-10-25 14:10:52 304

原创 CSS显示与隐藏透明背景

显示与隐藏的方法主要有三种，因为透明背景和此对象要在同一个位置，所以这里用的是display属性，和绝对定位，隐藏后不占有原来位置（脱标）；需要注意的一点就是，在写光标经过的时候显示隐藏背景时，是显示父级盒子里面的子级盒子.tudou:hover .mask；写得不好的地方大家多多包涵，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta

2021-10-19 21:25:24 1017

原创 CSS子绝父相

简单来说就是：子级是绝对定位的话，父级用相对定位，因为很多时候，父级需要占有位置，子级不需要占有位置，这个时候父级用绝对定位就不会保留原来的位置，后面的内容就会占有父级以前的位置，父级就会覆盖在后面内容的上面，不是想要的效果，此时就需要所谓的子绝父相；（因此相对定位经常用来作为绝对定位的父级）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta ht

2021-10-19 14:59:35 314

原创 CSS嵌套块元素塌陷

刚写，理解不是很深刻，大家见谅哈，嵌套块元素塌陷就是使用margin定义块元素外上边距时，两个嵌套关系(父子关系)的块元素，【父元素有上外边距】同时【子元素也有上外边距】，还有就是【父元素没有设置上外边距】的情况下，给【子元素设置的上外边距】会【传递】给【父元素】，此时父元素会塌陷相对较大的外边距值（就是子元素块向下，父元素块也跟着向下的情况）。<!DOCTYPE html><html lang="en"><head> <meta charset

2021-10-19 14:47:09 236

原创 html小总结

html小总结，注册页面案例，刚开始写，大家多多包涵啊，html就是要知道标签的含义和使用方法，标签有很多，不需要每一个都记住，要学会自己查询????，当然常见的查询方法就是老生常谈的度娘了，另外还有个w3c的网站，代码如下：大家将就着看一下呀...

2021-10-14 14:46:03 57

m0_62937694的博客