自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(26)
  • 收藏
  • 关注

转载 elementUI合并列

getSpanArr(data) { this.spanArr = []; for (var i = 0; i < data.length; i++) { if (i === 0) { // 如果是第一条记录(即索引是0的时候),向数组中加入1 this.spanArr.push(1); this.pos = 0; } else { // console.log(..

2022-05-23 23:12:14 303

原创 Vue双向绑定原理

<div id="box"></div>//例如:我们在vue中定义一个a数据数据function data() { return { a: 10 }}let d = data() //这样就可以通过d.a访问数据,d.a = 20 从新给数据赋值//Object.defineProperty 用来定义对象数据,有三个参数//第一个参数:必需。目标对象 这里就是d//第二个参数:必需。需定义或修改的属性的名字 .

2022-03-29 16:09:00 884

原创 文件上传、

FormData方式//因为input file 的onchange事件选择重复的文件第二次不会触发,所以给button绑定事件,生成虚拟file类型的input框//或者可以直接使用<input type="file" @change="btnEvt">/> btnEvt() { //给input绑定btnEvt点击事件 // console.log(evt.target.files); const input = document.c.

2022-03-21 20:50:39 257

原创 MD5、AES加密

MD5cnpm i -S crypto-jsimport md5 from "crypto-js/md5"md5('密码').toString()AESimport aes from "crypto-js/aes";import { enc } from "crypto-js/core"加密: aes.encrypt("密码(只能字符串)", "自定义密钥(解码时需要)").toString()解密: aes.decrypt(密码, "密钥").toString(enc.U...

2022-03-21 15:14:09 334

原创 实时数据获取

轮循就是启动定时器,固定时间发送一次请求长链接 ,后端数据更新向前端推送安装 cnpm i -S socket.io-client@2引入 import io from 'socket.io-client'const socket = io("ws://请求地址"); 请求地址必须ws开头例如 ws://www.xxxxxx//可以监听 .on 一个连接事件 //链接成功socket.on("connect", function () { c...

2022-03-19 15:46:19 765

原创 echarts

var myChart = echarts.init(this.$refs.box); 实例化echarts对象 (绑定的dom节点)myChart.setOption(option); ( option/网站上复制的那块代码 )myChart.resize( ) 重置echarts画布,监听window.resize事件需要做防抖 myChatr.dispose( ) 销毁echarts对象...

2022-03-19 15:04:42 902

原创 天气获取 和风

和风天气 => 注册账号 => 控制台 => 应用管理 => 新建应用 => 获取keyjs或vue中发送ajax请求axios.get( "https://devapi.heweather.net/v7/weather/now?location=经度,纬度&key=应用管理的key" ).then((d) => {console.log(d);});请求参数location 是经度,纬度 key 是你应用管理项目中的key...

2022-03-17 20:00:27 623

原创 百度Api定位试用

网站https://lbsyun.baidu.com/先注册账号 => 注册成为开发者 => 控制台 => 应用管理 => 我的应用 => 创建应用 => 根据需求创建 => 创建后会有一个访问AK=>添加meta标签<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />=>设置容器样式<style type="text/css.

2022-03-17 19:40:57 405

原创 防抖、节流

防抖: 触发高频事件n秒后只会执行一次,如果n秒内高频事件再次触发,重新计算时间 - input键盘输入事件,搜索关联内容 - resize浏览器窗口尺寸改变事件,移动端适配 封装代码: 事件绑定: inputEle.oninput = bounce1(zxhs, 1000) //第一个参数为触发执行函数,第二个为时间 事件监听: inputEle.addEventListener('input',bo.

2022-01-13 11:22:43 109

原创 gulp-

gulp :项目自动化构建打包工具(将我们本地的项目打包成放在外网的项目) gulp项目目录结构 -gulp_demp(项目名) -src -css -js -pages //html -sass package.json //npm init -y 项目初始化(-y为默认) package-lock.json ...

2022-01-07 20:37:00 72

原创 gitee

git 分布式版本控制工具 =>介绍:操作内容,项目代码,文档... 记录项目代码文档的每次提交的版本号,版本提交者,时间,修改的内容 随时找到响应版本的代码 =>使用: 1.下载git工具软件 2.通过命令行操作 =>命令: 在项目文件夹中右键点击Git Bash Here 初始化版本库 git init ...

2022-01-07 20:26:47 265

原创 npm包、scss

npm包管理工具 在统一的地方下载项目依赖的第三方包 安装:随nodejs一起安装 检查:npm -v (检查安装是否成功) 下载: npm install 包名 -g (-g为全局安装,任意目录下可以使用) npm install jquery 删除:npm uninstall 包名 -g 项目管理:(初始化) npm init npm init -y (-y为默认)...

2022-01-07 20:25:20 1061

原创 jquery动画

隐藏 参数分别为 时间,匀速,触发执行函数,动画操作都可用 $('div').hide(1000,'linear', function () { console.log(1);})显示 $('div').show(1000)切换 $('div').toggle(1000) 淡入 $('div').fadeIn(1000)淡出 $('div').fadeOut(1000)切换 $('div').fadeToggle(1000)垂直滑入 隐藏 $('div').slideD.

2021-12-30 19:58:01 497

原创 jquery

选择器:和css一样 返回的是一个伪数组对象 $('p') $('input[name="username"]') $('li').first() //选中第一个li $('li').last() //选中最后一个li $('ul li:nth-child(2)') $('.li1').parent() //选中li的第一个父节点 $('.li1').parents()//选中li的所有父节.

2021-12-28 20:41:33 256

原创 构造函数继承、闭包

// 继承 // 构造函数中,子类可以继承父类构造函数的方法 原型继承 // 声明一个 人 的构造函数 function Person(name) { this.name = name this.say = function () { console.log(this.name + '能说话'); } } ...

2021-12-27 17:58:04 255

原创 Ajax、cookie

1.HTTP协议 HTTP(超文本传输协议)是一个基于请求与响应的模式、无状态的、应用层的协议、绝大多数的web开发,都是勾践在HTTP协议之上的2.Ajax 浏览器与服务器通讯而无需刷新当前页面的技术,不需要刷新当前页面,只刷新局部页面的一种异步通讯技术. //1.实例化ajax核心对象xmlhttpRequest const xhr = new window.XMLHttpRequest //2.建立链接 .

2021-12-25 15:57:48 371

原创 常用方法函数封装

//格式化日期function dateFtt(fmt, date) { var o = { "M+": date.getMonth() + 1, //月份 "d+": date.getDate(), //日 "h+": date.getHours(), //小时 "m+": date.getMinutes(), //分 "s+": date.getSeconds(), //秒 "q+": Math..

2021-12-22 20:40:01 608

原创 面向对象、原型、异步

面向对象: 找解决问题的对象,调用其功能方法解决问题,如果对象不存在,自己创建对象构造函数: 构造函数名与数据类型名相同 第一个字母大写 函数体中使用this关键字定义对象的属性和方法 使用new语句调用构造函数创建对象原型: 每个构造函数(对象)都有一个prototype属性指向它的原型(原型对象) 所有实例对象都可以访问原型对象上定义的公共的属性和方法 //定义一个构造函数 function Student.

2021-12-15 18:59:09 795

原创 正则表达式

// 正则 //用某种模式表达一类字符串的公式 //方法 正则表达式.test(字符串) //=>返回布尔值 字符串.match(正则) //=>返回符合的 数组 字符串.replace(正则,新内容) //替换, 返回替换后的字符串 字符串.search(正则) //返回下标,没有返回-1 // test 为正则的方法,其它都是字符串的方法 //常用 let rng = /\d/ .

2021-12-13 20:44:40 336

原创 ES6新增语法

// ES6新语法 // ECMA Script // 改变this指向调通函数时使用call fn.call(obj, 1) // 此时第一个值为改变this的指向, 第二个值开始为形参 // 自调用函数 (function () { //函数执行代码 arguments //所有实参的集合,是一...

2021-12-11 09:16:35 135

原创 冒泡排序、选择排序、数组去重

1.冒泡排序 挨着两个数,两两相比,如是前一个值比后一个值大,就交换位置 一轮之后最大的值排在后面,在未排序的值中重复以上操作 var arr = [10,5,2,18,60,5,18] for(var i = 0;i < arr.length - 1;i++){ for(var a = 0;a < arr.length - 1 - i;a++){ if(arr[a] > arr[a + 1]){ ...

2021-11-30 19:50:49 573

原创 用边框实现三角形、复选框样式、怪异盒子

1.实现三角形 1.实现一个宽高为0的盒子 2.给边框设置成有粗度的透明色 透明transparent border:*px solid transparent 3.给想要的方向的边框设置成对应的颜色2.实现好看的复选框 1.实现框和勾勾 【勾勾由设置相邻两边边框旋转得到】 2.设置定位和浮动-让框和文字横着排列,让勾显示在框上面 3.让勾勾隐藏 4.选中对应的选项的时候里面的勾勾显示出来。...

2021-11-22 18:19:50 135

原创 移动端布局、响应式

1.响应式 概念:一套代码,能够适应多个终端。【页面能够根据屏幕尺寸、设备类型等,实现不一样的页面效果】 原理:利用媒体查询。 关键字: @media 属于说明: 设备像素:屏幕的物理像素 逻辑像素:css上的像素 dpr = 设备像素/逻辑像素 理想视口: 可视视口/布局视口 = 1; 理想视口的设置<meta name="viewport" content...

2021-11-16 17:23:04 191

原创 弹性盒子.

1.弹性盒子 概念:是一种新的布局方式,主要是让元素有能力控制子元素的排列方式。常用语移动端 1.容器上的属性 1.设置成容器 disolay:flex 丨 inline-flex; [flex是弹性盒子,inline-flex是行内块弹性盒子] 2.设置主轴的方向 flex-direction:row 丨 column 丨row-reverse 丨 column-reverse;...

2021-11-12 16:49:23 224

原创 H5新增标签

1.语义化标签 概念:有意义的标签,提倡用正确的标签去描述有对应含义的内容。 1.结构上的语义化标签。 页头 <header></header> 导航 <nav></nav> 主体 <main></main> 独立的区域 <section></section&g...

2021-11-09 16:08:59 109

原创 精灵图、兼容性

1.精灵图/雪碧图 sprites 概念:由多张图组合成的一张图 实现步骤: 1.实现一个指定带下的盒子 2.讲精灵图设置为该盒子的背景图 3.通过background-position属性,设置背景图的起始位置 优缺点: 减少访问次数,提升性能 占用内存小 文件数量小,命名难度小 缺点:增删图片麻烦...

2021-11-09 16:08:06 82

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除