- 博客(53)
- 收藏
- 关注
RSS订阅原创 canvas图片合并
接口返回两个图片数组，原图、水印图，其中原图数组需要通过接口调用数组子项的值拿到真实的原图地址，然后将原图和水印图一一对应，合并成页面展示的图片。画图函数返回一个 Promise 对象，然后通过 Promise.all([原图promise,水印图promise]) 等两张图片加载完后再合并图片。此时我们已经有了原图和水印图的 Promise数组，通过for循环调用画图函数,传参为 画图函数(原图[i], 水印图[i], 宽度, 高度)通过Promise.all()拿到所有的真实原图地址。
2023-10-31 15:01:21
479
原创 ElementUI 中 ElImageViewer 组件的使用与属性说明
ElementUI 中 ElImageViewer 组件的使用与属性说明ElImageViewer是Image组件的内置组件，主要实现图片的预览功能，对于这个组件官方文档没有过多介绍，但有些需求可以单独使用使用方法<!-- 这里用 v-if 和 v-show 的区别是 v-if 每次都会重置默认第一张预览图，由 initialIndex 属性指定，而 v-show 会缓存上次切换的那张图 --><el-image-viewer v-if="showViewer" :in
2021-12-03 14:11:59
2376
原创 一些常用正则
常用正则1. 数字价格千分位分割'123456789'.replace(/(?!^)(?=(\d{3})+$)/g, ',') // 123,456,789小数千分位支持const formatNum = numStr => { const regex = new RegExp(`(?!^)(?=(\\d{3})+${numStr.includes('.') ? '\\.' : '$'})`,'g') return numStr.replace(regex,',')}consol
2021-11-03 11:35:48
179
原创 适合初学者入手的vue项目(2)
适合初学者入手的vue项目(2) 鉴于我之前一篇博客适合初学者入手的vue项目这个项目对现在来说有点太老了，那个项目现在其实不是很推荐大家去写了。 现在Vue3.2也出来了，Vite+Vue3+TS一定是未来的趋势。所以说学习是不能停止的，今天给大家推荐的项目在B站搜索Vue.js 移动端项目实战（今日头条）这个就好，当然你也可以点我这个链接打开。这个项目是Vue2.6那个版本的，资料很全，接口地址完整(有的接口会有些问题，不用钻牛角尖)。不是说Vue3出来了就不用学Vue2了，Vue3也只是加了
2021-08-27 17:09:28
1805
9
原创 WebSocket
WebSocketWebSocket 是一种数据通信协议也是用于客户端和服务端数据通信，类似于我们常见的 http既然有 http，为啥还要 WebSockethttp通信是单向的请求 + 响应没用请求也就没用响应初次接触WebSocket的人，都会问同样的问题：我们已经有了HTTP协议，为什么还需要另一个协议，它能带来什么好处？答案很简单，因为HTTP有一个缺陷：通信只能由客户端发起举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP协议做不
2021-08-24 09:28:55
1307
原创 web开发杂记
web开发杂记ios在ios系统浏览器中输入框得到焦点时页面自动放大<meta name="apple-mobile-web-app-capable" content="yes"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">移动端ios浏览器双指禁止放大页面<
2021-08-24 09:26:45
120
原创 js四舍五入toFixed与Math.round
js四舍五入toFixed与Math.roundtoFixed()let num = 1.335num.toFixed(2) // num = 1.33原因：toFixed()使用的是银行家舍入规则，银行家舍入：所谓银行家舍入法，其实质是一种四舍六入五取偶（又称四舍六入五留双）法简单来说就是：四舍六入五考虑，五后非零就进一，五后为零看奇偶，五前为偶应舍去，五前为奇要进一Math.round()let num = 1.335num = Math.round(num * 100) / 1
2021-08-16 16:45:45
271
原创 git 冲突解决
git 冲突解决Your local changes to the following files would be overwritten by merge您对以下文件的本地更改将被merge覆盖方法一、stashgit stash 封存修改git commitgit stash pop 修改还原git stash: 备份当前的工作区的内容，从最近的一次提交中读取相关内容，让工作区保证和上次提交的内容一致。同时，将当前的工作区内容保存到Git栈中。git stash pop: 从Git
2021-08-13 11:12:07
166
原创 异形布局 canvas画龙
异形布局 canvas画龙参考文章：产品经理：你能不能用div给我画条龙？<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> html, body { margin: 0; padding: 0; background: #3
2021-06-15 11:20:21
1084
1
原创 前端本地存储
本地存储特性：数据存储在用户浏览器中设置，读取方便，甚至页面刷新不丢失数据容量较大，sessionStorage约5M，localStorage约20M只能存储字符串，可以将对象JSON.stringify()编码后存储sessionStorage和localStorage都存在四个方法存储数据：sessionStorage.setItem(key,value) || localStorage.setItem(key,value)获取数据：sessionStorage.getIte
2021-05-08 16:34:23
165
原创 原生JS基于canvas写的一个贪吃蛇小游戏
直接复制粘贴就能玩<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1
2021-05-08 10:08:33
206
原创 JS基础
JS基础将之前的一些博客整合在了一起JS编程基础编程 ：就是计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程计算机程序： 就是计算机所执行的一系列的指令的集合，而程序全部都是我们用所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出指令注意： 上面所定义的计算机指的是任何能够执行代码的设备计算机的组成硬件输入设备 键盘鼠标输出设备 显示器打印机cpu 负责处理数据和运算硬盘 负责存储数据，硬盘永久存储数据内存 内存暂
2021-04-25 10:46:07
482
原创 Canvas
Canvascanvas概述canvas的像素化我们使用canvas绘制了一个图形，一旦绘制成功了，canvas就像素化了它们。canvas没有能力，从画布上再次得到这个图形，也就是说我们没有能力去修改已经在画布上的内容，这个就是canvas比较轻量的原因 如果我们想要让这个canvas图形移动，必须按照 清屏-更新-渲染的逻辑进行编程canvas的动画思想动画思想就是 清屏-更新-渲染实际上动画的生成就是相关静态画面连续播放，这个就是动画的过程，我们把每一次绘制的静态画面叫做 “
2021-04-23 17:32:09
679
原创 SVG绘制等份环形图
SVG绘制等份环图需求如下图使用技术：svg.js和无敌的jQuery我们需要使用svg的path绘制每项数据的环图份额path元素的属性d用于定义路径，属性d实际上是一个字符串，包含了一系列路径描述。这些路径由下面这些指令组成：Moveto，Lineto，Curveto，Arcto，ClosePath。我们会用到的指令有：Moveto(移动画笔到起始点)，语法：‘M x,y’ 在这里x和y是绝对坐标，分别代表水平坐标和垂直坐标;Lineto(绘制直线),语法：‘L x, y’ 在这里x和y
2021-03-25 17:16:18
867
原创 小程序请求封装和接口统一管理
小程序请求封装和接口统一管理api/config.js 根据自己的需求定义// 请求用的const baseUrl = "";// 上传文件用的const upLoad = "";export { baseUrl, upLoad}api/http.js// http.js 发送真正的网络请求import {baseUrl} from "./config";const FN = require("../common/public"); // 这是我常用的微信方法封装expo
2021-02-19 16:57:19
340
1
原创 前端开发vscode配置
前端开发vscode常用插件Auto Rename Tag 重命名一个HTML / XML标签时，自动重命名配对的HTML / XML标签Bracket Pair Colorizer 匹配的括号用颜色标识Live Server 实时服务器open in browser 在浏览器中打开Path lntellisense 路径智能感知polacode-2020 代码截图prettier 代码格式化atom one dark theme || one dark pro 颜色主
2021-02-08 09:11:00
1033
原创 函数防抖和节流
前端性能优化之函数防抖和节流函数防抖和节流是优化高频率执行js代码的一种手段，js中的一些事件如浏览器的resize、scroll，鼠标的mousemove、mouseover，input输入框的keypress等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制。1.防抖(debounce)应用场景登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖调整浏览器窗口大小时，resize 次数过于频繁，造
2021-01-13 16:32:27
132
原创 vue中axios的二次封装
vue中axios的二次封装封装src目录下新建 api 文件夹api文件夹下新建 http.js 文件import axios from "axios"import qs from "qs"// 根据环境变量区分接口的默认地址// switch(process.env.NODE_ENV) {// case "production": // axios.defaults.baseURL = "";// break;// case "test"://
2021-01-13 15:24:24
589
原创 vue如何监听dom元素滚动到了可视区？
vue如何监听dom元素滚动到了可视区？场景：当某个元素滚动到可视区时，为其添加动画样式(animate.css)。common/utils.jsexport const isElementNotInViewport = function(el) { if (el) { let rect = el.getBoundingClientRect(); return ( rect.top >= (window.innerHeight || document.document
2020-12-26 13:12:28
3200
原创 如何解决vue项目(cli3以上)中的跨域问题(axios版)
如何解决vue项目(cli3以上)中的跨域问题(axios版)今天在写项目的时候突然网络请求发送不出去，一看是出现了跨域问题，如下图。要想解决这个问题，我们必须先了解什么是跨域，当然你想直接看解决方法可以直接下滑拉。什么是跨域？跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。这里说明一下，无法跨域是浏览器对于用户安全的考虑，如果自己写个没有同源策略的浏览器，完全不用考虑跨域问题了。是浏览器的锅，对。同源策略限制了一下行为：
2020-12-11 17:28:18
448
原创 小程序页面之间传递数据如何传递对象
小程序页面之间传递对象的数据主页// 主页let list = { id:1, name: beibei, sex: '男', age: 21, src: 'https://blog.csdn.net/Kavii_a'}// 假如list是我们从后台获取过来的数据，我们需要传递给别的页面// 需要将数据转换成json字符串，不然传不过去list = JSON.stringify(list);wx.navigateTo({ // encode
2020-12-11 16:43:42
802
原创 富文本数据处理
关于后台拿的富文本数据处理，及replace的妙用 昨天在写小程序的时候，从后台拿到了富文本数据。然后用了parser（小程序富文本插件），在页面展示的数据中包含有标签之类的。这时候我发现后台拿来的数据是这样的 我们可以看到，他并不是标签，而是一些转义字符，例如p标签就是 “<p>;” 这时候我们就不能直接用富文本插件了，需要对数据进行处理再使用，于是我想到了用replace方法，替换字符嘛。但是问题来了，replace方法不能替换所有的转义字符。然后我又去看
2020-11-13 09:24:23
655
原创 Promise
Promise1. promise是什么？1.1 理解抽象表达：Promise是 js 进行异步编程的新的解决方案具体表达：它语法上来说是一个构造函数功能上来说promise对象用来封装一个异步操作并可以获取其结果1.2 promise的状态改变 1. pending 变为 resolved 2. pending 变为 rejected说明：只有这两种，且一个promise对象只能改变一次，无论变为成功还是失败，都会有一个数据结果，成功的数据结果一般称为value，失败的结果数据一
2020-11-09 17:48:25
187
原创 适合初学者入手的vue项目
项目介绍写在前面这里是项目地址，如果觉得对你有帮助的话就给我点个星星8这是一个简单的vue项目，适合初学者练手。在这里特别感谢coderwhy老师提供的接口，想要接口的小伙伴请添加老师微信coderwhy00技术栈html + css + jsES6AJAX (项目里用的是封装过的axios)Vue + VueCli + Vuex + VueRouter （Vue全家桶）效果图能学到什么锻炼刚学过的知识组件化开发的思想，以及封装一些公共的组件特别常用的组件可以把
2020-10-19 21:05:19
7592
8
原创 vue中 methods watch computed的执行顺序
vue中 methods watch computed的执行顺序今天在做项目的时候，遇到一个问题，一直告诉我一个函数未定义。因为我是使用的计算属性（computed）给子组件传递的数据，于是我就写了一个demo测试了一下。 <div id="app"> <h2>{{currentTabComponent}}</h2> <button @click="changTab">点击切换</button> </div
2020-10-16 23:01:22
1176
1
原创 vue生命周期
vue实例的生命周期什么是生命周期：从vue实例创建，运行，到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！生命周期钩子：就是生命周期事件的别名而已；主要的生命周期函数分类；创建期间的生命周期函数：beforeCreate：实例刚在内存中创建出来，此时，还没有初始化好 data 和 methods属性created：实例在已经内存中创建完成，此时 data 和 methods 已经创建ok，此时还没有编译模板beforeMount：此时已经完成了模板的编译，但是还没有挂在
2020-09-08 23:14:00
184
1
原创 git底层存储原理及常用命令
版本控制工具集中式（svn）svn因为每次存的都是差异需要的硬盘空间会相对的小一点可是回滚的速度会很慢优点：代码存放在单一的服务器上，便于项目的管理缺点：服务器宕机：员工写的代码得不到保障服务器炸了：整个项目的历史记录都会丢失分布式（git）git每次存的都是项目的完整快照需要的硬盘空间会相对大一点(Git团队对代码做J极致的压缩，最终需要的实际空间比svn多不了太多可是Git的回滚速度极快)优点：完全的分布式缺点：学习起来比svn陡峭git基础概念* 客户端
2020-08-07 20:00:51
275
原创 JS闭包和递归以及浅拷贝和深拷贝
目录函数的定义和调用函数内this指向问题以及改变this指向高阶函数闭包递归浅拷贝和深拷贝函数的定义和调用 ^函数的定义我们函数的定义有三种定义方式函数的声明方式 function 关键字函数表达式（匿名函数）new Function()第三种定义函数的方式代码如下 let fn = new Function('a','b','console.log(a+b)'); fn(1,1); /*
2020-07-27 17:38:24
304
原创 ES5新增方法
目录数组方法字符串方法对象方法数组方法 ^迭代遍历方法: forEach(),map(),filter(),some(),every()那么这几种方法有什么区别呢？forEach()遍历数组 // 语法 array.forEach(function(currentValue,index,arr)) /* * currentValue 每一个数组元素 * index
2020-07-27 16:40:44
269
原创 JS构造函数和原型，原型链和继承
目录利用构造函数创建对象静态成员和实例成员原型对象原型__proto__原型constructor原型链继承利用构造函数创建对象 ^我们知道，创建对象有三种方式，那么是哪三种方式呢？第一种就是利用 new Object();创建对象，例如let obj = new Object();第二种就是利用对象字面量创建对象let obj = {}第三种也就是我们利用构造函数创建对象辣 function Sta
2020-07-27 14:23:37
171
原创 ES6新特性
letconstlet在es6中，我们可以用let来声明变量替换var，那么let声明的变量有什么特性呢？使用let声明的变量具有块级作用域在一个大括号中，使用let声明的变量才具有块级作用域，var不具备这个特点防止循环变量成为全局变量不存在变量提升，也就是说我们必须先声明，再使用暂时性死区，和当前块级作用域绑定var a = []; for (var i = 0;i<2;i++){ a[i] = function () { co
2020-07-23 10:11:49
221
原创 面向对象编程
面向对象编程介绍两大编程思想~ 面向过程~ 面向对象面向过程编程 POP (Process-oriented programming)~面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了~举个例子：将大象装进冰箱，面向过程做法1.打开冰箱门 -> 2.大象装进去 -> 3.关上冰箱门面向过程，就是按照我们分析好了的步骤，按照步骤解决问题面向对象编程 OOP (Object Oriented Programming)面
2020-07-16 15:51:05
90
原创 jQuery事件
jQuery事件事件处理on单个事件注册语法：element.事件(function(){})$(“div”).click(function(){ 事件处理程序 })其他事件和原生基本一致比如mouseover,mouseout,blur,focus,change,keydown,keyup,resize,scroll事件处理 on() 绑定事件on() 方法优势1：可以绑定多个事件，多个事件处理程序on() 方法优势2：可以事件委派操作。事件委派的定义就是，把原来加给子元素身上的事件绑
2020-06-30 17:30:39
201
1
原创 jQuery的元素操作
jQuery元素操作主要是遍历，创建，添加，删除元素操作遍历元素注意：jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历语法1：$("div").each(function(index,doEle){})each()方法遍历匹配的每一个元素。主要用DOM处理。each每一个里面的回调函数有两个参数：index是每个元素的索引号，domEle是每个DOM元素对象，不是jQuery对象所以要想使用jQuery方法，需要给这个dom元素转换成jqu
2020-06-16 19:18:47
730
原创 jQuery基础
jQuery概述和基本使用概述JavaScript库仓库：可以把很多东西都放到这个仓库里面，找东西只需要到仓库里面查找就可以了JavaScript库：即library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate,hide,show，比如获取元素等简单理解：就是一个js文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能比如jQuery，就是为了快速
2020-06-16 18:05:35
278
原创 offsetWidth获取元素宽度不准确
关于offsetWidth获取元素宽度不准确的问题今天用js写轮播图的时候，发现使用offsetWidth获取foucs的宽度和我css设置的宽度不一致，如下：在谷歌控制台输出的确是722，一开始我以为代码哪里出了问题，后来发现，原来是foucs里面的margin左右设置的是auto，于是我将auto改成一个准确的数字之后控制台输出的终于是721和css设置的一致...
2020-06-09 21:08:13
3303
5
原创 立即执行函数
什么是立即执行函数？不需要调用，立马能够自己执行的函数 function fn() { console.log(1); } fn(); // 1. 写法 也可以传递参数进来 // (function(){})() 或者 (function(){}()) (function (a, b) { console.log(a + b); var
2020-06-09 20:50:05
140
原创 mouseenter和mouseover的区别
区别：mouseenter 鼠标事件 不会冒泡搭配鼠标离开mouseleave同样不会冒泡当鼠标移动到元素上时就会触发mouseenter事件类似mouseover，它们之间的差别是mouseover鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter只会经过自身盒子触发 <style> .father{ width: 100px; height: 100px; backg
2020-06-09 20:46:52
128
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人