- 博客(32)
- 收藏
- 关注
RSS订阅原创 前端常用布局大全——细致讲解
作为一名前端开发者，每天都在和浏览器打交道，而浏览器中展示的网页需要做的很美观，并且可以吸引住用户浏览网页，提升用户体验是很重要的，所以不可避免的就要用到各种各样的布局。今天就来列举一下各种常用布局以及实现方法。...
2022-01-07 20:19:38
3510
原创 canvas绘制文字位置偏移
前言今天在做一个小功能，也就是给图片添加水印时发现，我用canvas绘制水印文字时，水印的位置总是和理想中的不一样，总是会发生偏移。解决方法遇到这个问题其实可以有两种解决方法：根据偏移的距离找出一个合适的反向移动的距离。是不是不太理解这句话的意思，没关系，大家可以看我的另一篇文章拖拽水印插件这里有讲到距离怎么实现，以及源码。也可以通过canvas的原生API：textBaseLine这个来实现，canvas在绘制文字的时候会有一个对齐的标准，同时也会受到字体的影响，我的解决方式是通过设置text
2021-08-10 11:13:08
3072
原创 编程题-----任务调度所需时间
题目给定一系列的任务，这些任务可能有依赖关系，有依赖关系须相继执行，没有依赖关系则可以同时执行。写一个函数，计算完成给定所有任务需要的时间。//例如下面这些任务执行总时间为 4const tasks = [ { "name": "task1", "time": 1, "dependency": "", }, { "name": "task2", "time": 2, "depend
2020-12-16 16:04:54
2989
2
原创 功能插件---水印插件
前言还就没写博客了，最近实在是太忙了，马上还要做毕业设计和论文，今天抽时间写一写关于添加水印的问题吧添加水印如果只是想简单的给图片添加一个水印，其实很简单，只需要使用canvas，将需要的图片画出来之后再画上文字，最后导出成为base64格式的图片即可const parentImg = new Image()parentImg.src = imgSrcparentImg.onload = () => { let canvas = document.createElement('ca
2020-11-28 22:35:36
645
原创 webpack学习之编译结果分析
什么是webpack当开发一个具有规模的程序，将会遇到非常多的非业务问题，这些问题包括：执行效率、兼容性、代码的可维护性、可扩展性、团队协作、测试等等、我们将这些问题称之为工程问题。工程问题与业务无关，但它深刻影响哦开发难度，如果没有一个好的工具解决这些问题，将使得开发难度变得极其缓慢，同时也让开发者陷入技术的泥潭。在浏览器端，开发时态和运行时态的侧重点不一样。开发时态：模块划分越细越好支持多种模块化标准支持npm或者其他包管理器下载的模块能够解决其他工程化的问题运行时态：文件越少越
2020-09-04 21:02:31
245
原创 简单易懂——手动实现事件模型
前言这几天准备加深一下自己对Vue的理解，所以决定开始看Vue的源码，看到了事件模型，觉得可以很好地锻炼自己的思维能力，所以就手写下来了，现在分享给大家，希望有所帮助。功能事件模型有包括三个功能函数：on、off、emit。on事件函数负责注册各种事件，off事件函数负责注销已经注册的函数，emit事件函数负责触发已经注册的函数。这些功能是很常用的。代码把这个代码写在一个立即执行函数中，这样可以防止变量污染，虽然写这个功能也没啥可以污染的，但是也要养成良好的编码习惯不是_。var event =
2020-07-27 15:52:49
250
原创 算法---二进制求和
前言距离上一次写博客已经过去大半个月了，主要原因是找到了实习，一直在忙于入职和熟悉公司里的项目，在我的不懈努力下自己动手模仿公司的项目写了一个简易版的出来之后，终于把项目搞懂了，再加上今天在LeetCode上刷了一下算法题，遇到了一个很有意思的题目，现在就把它分享给大家吧，题目很简单，不过给我印象挺深刻的。题目LeetCode上的第题，二进制求和，题目：给你两个二进制字符串，返回它们的和（用二进制表示）。输入为 非空 字符串且只包含数字 1 和 0。示例：输入: a = "11", b = "
2020-07-11 22:31:49
559
原创 前端存储——Cookie的基本概念
学习cookie笔记，作为复习使用一个不大不小的问题假设服务器有一个接口，通过请求这个接口，可以添加一个管理员但是，不是任何人都有权力做这种操作的那么服务器如何知道请求接口的人是有权力的呢？答案是：只有登录过的管理员才能做这种操作可问题是，客户端和服务器的传输使用的是http协议，http协议是无状态的，什么叫无状态，就是服务器不知道这一次请求的人，跟之前登录请求成功的人是不是同一个人由于http协议的无状态，服务器忘记了之前的所有请求，它无法确定这一次请求的客户端，就是之前登录成功的那个
2020-06-10 14:09:08
1066
原创 CORS原理详解
JSONP并不是一个好的跨域解决方案，它至少有着下面两个严重问题：会打乱服务器的消息格式：JSONP要求服务器响应一段JS代码，但在非跨域的情况下，服务器又需要响应一个正常的JSON格式只能完成GET请求：JSONP的原理会要求浏览器端生成一个script元素，而script元素发出的请求只能是get请求所以，CORS是一种更好的跨域解决方案。概述CORS是基于http1.1的一种跨域解决方案，它的全称是Cross-Origin Resource Sharing，跨域资源共享。它的总体思路是
2020-05-31 13:44:21
4366
4
原创 原生JS实现三级联动
效果展示在我们使用某个APP或者网站的时候，需要注册，那么会有地区选择，选择某个省，会自动列出这个省的所有城市，选择城市，会自动列出所有村镇，我们要实现的就是这个效果，在这里村镇就用每个省的学校来替代，完整代码已经上传到github：https://github.com/caohongyu-crypto/Three-level-，所有的省市信息我放在一个js文件里，省会是一个数组，城市和学校是对象(下面是部分信息截图)：所有不需要向后台请求数据，效果如下：是不是感觉很简单，没错，就是很简单HTM
2020-05-21 21:47:08
1018
原创 520必备---程序员也可以很浪漫
明天就是520了，所以呢写了个小demo，用来表白也不失为一个很好的选择，先看一下效果吧，不能放gif图，超过了最大限制，具体效果可以克隆下来代码然后运行就可以啦代码放到github上了：https://github.com/caohongyu-crypto/Love-520HTML部分html部分很简单，这个demo其实是两个小demo组合成的，所以大家拿到代码完全可以自己DIY<canvas id=q></canvas><div id="clock"><
2020-05-19 12:17:58
261
原创 vue---剖析vue响应式原理
1. 前言在vue中，只要数据变化，页面就会重新渲染，这个是怎么做到的呢？在创建vue实例时，vue会将data中的成员代理给vue实例，目的就是实现响应式，监控数据变化，然后执行某个事件函数。在vue2.0中使用的是Object.defineProperty来实现数据的劫持，配合发布-订阅者模式来实现。2. Object.defineProperty首先我们来看一下怎么使用Object.defineProperty，其实使用方法很简单。这个函数接收三个参数：1.需要监控的对象2.需要监控的对象
2020-05-08 17:52:45
158
原创 头脑风暴--原生JS实现汉诺塔游戏
介绍今天写了一个汉诺塔游戏，我想大家应该都玩过，先给大家看看具体是什么样吧。源码已上传github：github链接很遗憾，也就只有3个圆盘我可以顺利通过，哈哈~~~，如果谁可以玩更高的级别，还请不吝赐教啦。话不多说，先看怎么实现吧。游戏规则整个小游戏是可以自己调整难度的，演示里我是使用的3个圆盘，大家可以自行调整。当然，也可以改成闯关模式，这就靠大家发挥啦。汉诺塔游戏规则：只有宽度...
2020-05-06 00:05:26
1152
原创 vue-----手写实习vue基本功能
现在用来手写实现vue的简单功能，主要就是可以和Vue一样渲染页面，这个是很简单的一个，没有实现指令操作，想看指令操作的可以看一下我的github：github地址这是html代码 <div id="app"> <p>姓名：{{name}}</p> <p>年龄：{{age}}</p><button...
2020-05-03 16:23:00
969
7
原创 JS进阶---事件循环
事件循环//输出结果是多少呢，先输出'abc'还是先交叉输出//还是先输出i呢setTimeout(function func1() { console.log("abc") }, 0); for (var i = 0; i < 10000; i++) { console.log(i); }概念ps:最后有面试题哦浏览器、JS、执行引擎的关系JS：一...
2020-04-16 18:47:02
203
原创 js原型和原型链学习笔记详解
首先做到题看看对原型和原型链的理解如何//第一题var F = function () {}Object.prototype.a = function () {}Function.prototype.b = function () {}var f = new F();console.log(f.a, f.b, F.a, F.b);//第二题function A() {}fu...
2020-04-10 17:38:30
280
原创 react封装翻页插件
插件演示今天用react封装一个翻页插件，先给大家看一下效果：翻页插件上面的文字是从后台获取的。插件说明这个插件有五部分组成：首页、上一页、中间显示数字、下一页、尾页。具体的功能是：如果当前页面是第一页，那么首页和上一页就不能点击，下一页和尾页也是如此。插件原理接下来就是怎么写这个插件。在这里我是用的react封装的，本篇文章就先解释原理，具体代码我会附上链接。那么，该如何下手呢，首...
2020-04-04 12:05:38
632
原创 为什么走上了前端之路
时光荏苒，岁月如梭，转眼间已是一年过去，这开头，小学初中写作文经常用，唉！真怀念啊…大一，刚进入大学的校园，迎接自己的都是全新的世界，心中都有着自己的想法，不过现在还记得吗？因为刚步入大学的校园，延续着高中一样的作息方式和思想，每天认真的听课，认真的完成作业，计算机专业，课程很多，所以每天很忙碌，也喜欢玩游戏，课余时间也会玩游戏，因为从小就练武的原因，身体素质比较好，报名学生会进入了体育部，也参...
2020-03-25 18:49:42
160
原创 js实用方法-----柯里化
首先，什么是柯里化：用于固定某个函数的某些参数，得到另一个函数，该函数接收剩余参数。柯里化至少要有一个参数，就是要固定的那个函数。先举个例子来解释一下什么是函数柯里化:function f(x, y, z){ return (x + y) * z;}//curry是需要写的柯里化函数let f1 = curry(f, 2);//固定了f的第一个参数，返回一个可以传参的函数let f...
2020-03-22 21:27:24
135
原创 js实用功能---节流
节流：持续触发事件时，保证在一定时间之内，函数只触发一次，这种情况在mousemove、scroll等事件中会经常发生，如果我们不对这种情况进行阻止，会消耗性能，这是完全可以避免的。实现节流用到定时器和时间戳，下面就封装一个节流函数，模拟场景是在抢优惠券： var span = document.getElementsByTagName('span')[0]; var btn = d...
2020-03-17 19:10:43
404
原创 js实用功能----防抖
今天记录一个很实用的功能-----防抖，这个操作我想是很常用的了，例如，在百度搜索东西的时候，输入完之后才会显示出来列表，也就是隔一段时间再进行搜索，而不是输入一个单词发送一次网络请求，这样对浪费性能。防抖就像是生活中乘坐公交车一样，每到一个站台，都是等人上完之后才关门开车，而不是上一个人就关一次门，防抖的原理也是如此。如果不使用防抖会是什么情况呢，看下面的例子无论你输入的速度有多快，都会...
2020-02-26 19:31:36
132
原创 ES6小记-------迭代器
最近学习了迭代器，发现这个东西真的是个很好用的工具，什么是迭代器呢？迭代器（1）一个具有next方法的对象，next方法返回下一个数据，并且能指示是否迭代完成。迭代器优点（1）迭代器不需要知道可迭代对象的数据长度，它会返回一个下一个数据，并判断是否还有数据（2）可以不需要迭代对象亲自参数操作，只需要把迭代器封装好就行可迭代对象（1）可迭代对象：只要是原型上带下图这个方法的就属于可迭代...
2020-02-14 22:12:11
90
原创 js小记----数组方法sort
在js中数组的用处很大，在很多地方都会用到数组，因为数组用起来比较方便，在数组中有的方法比较简单，有的比较复杂，今天介绍一个很常用但是又容易记混的方法：sort（）方法。这个方法可以直接使用： var arr = [5,1,3,6,4,8,7,9]; var newArr = arr.sort();//[1,3,4,5,6,7,8,9]会按照从小到大的顺序返回，是不是觉得很简单呢，...
2020-01-16 19:25:10
155
原创 css3小记----动画
今天写了一个挺好玩的简单动画，是一个马儿奔跑的效果，大家看了以后如果想要素材可以在下面留下你的邮箱，我会打包发给你。下面给大家看看效果（忽略水印哈）效果是不是挺炫酷的，下面告诉大家怎么制作这个跑马<div class="wrapper"> <div class="show"> </div> </div>html的代...
2020-01-05 22:24:23
178
原创 js学习小记-----闭包
难道是因为别的同学都出去跨年了所以我学习的心被打乱了吗，我竟然把我闭包的笔记删掉了。。。当看到的时候，脑壳一阵昏，下面给他补上。在我们学习js的过程中肯定都接触过闭包，所以大家也都知道闭包的重要性，那么什么是闭包呢？闭包就是在一个函数的内部定义了另外一个函数，并且把它拿到了外部来执行，这就是闭包，并且这个被抛出来的函数还会一直拿着父级函数的作用域中的值，正常情况下一个函数执行完就会被销毁，但是...
2019-12-31 20:21:42
81
原创 js学习小记----递归
在js的学习过程中我认识到了闭包的重要性，而且在我们平时编写代码的过程中有意无意的就用到了闭包，可能我们没有发现吧。什么是闭包呢？ 用汉语解释一下就是一个函数内部定义了一个函数，但是把它拿到了全局中使用，并且父级的函数作用域没有成功销毁，而是被抛出来的函数给拿着，还可以继续访问父级函数作用域的变量，这就是闭包。可能语言形容的比较抽象，毕竟我不善表达。 下面请看一个例子在这里插入代码片：func...
2019-12-28 17:31:45
128
2
原创 你不知道js系列之判断this
今天看了你不知道的javascript这本书，看到了一个我觉得很重要的点，判断this！这里有四种方法判断this的指向，准确的说是四步顺序：1.函数是否在new中调用？如果是的话this绑定的是新创建的对象var bar = new foo();2.函数是否通过call、apply或者硬绑定调用？如果是的话，this绑定的是指定的对象。var bar = foo.call(obj);...
2019-12-10 14:46:53
168
原创 js中关于this的一个小问题
我们平时在写代码的时候肯定少不了和this打交道，我们都认为this是指向自己，但是这句话其实是不完全正确的，可以看下面的代码：function show(){ var a = 10; console.log(this.a); } show();这段代码并不会像大家想象中那样输出一个10，而是输出undefined，这是为什么呢，推翻了大家心中的this指向自己这个说法。...
2019-12-08 14:10:24
70
原创 js简易轮播图，二十行代码搞定
今天给大家写一款简易轮播图，这个轮播图的实现方式很简单，通过切换图片的src就可以实现，话不多说开始干代码。首先我们在html中插入一张图片给它取一个id名称，在这里我就叫它focusImg：<img src="img/nr2.jpg" width="100%" height="100%" id="focusImg"/>图片插入好之后可以自己设置想要的css样式，这里就不为...
2019-12-07 12:51:40
3439
8
原创 关于HTML-DOM和DOM-CORE的获取图片src问题
今天写一个关于鼠标点击切换图片显示的小功能上碰壁了！！ 检查好几遍代码都没找到原因，最后使用控制台发现了原因所在， 下面给大家说一下，希望可以帮大家解决一些问题//获取class名为 focusImg的元素，切记，获取一个className后面的[0]不能少var focusImg = document.getElementsByClassName('focusImg')[0];...
2019-12-05 15:07:19
869
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人