- 博客(37)
- 收藏
- 关注
原创 中心点缩放,四个角允许拉伸添加放大镜等功能糅杂
一共涉及到以下几个功能:1、按照鼠标中心点进行缩放2、四个角允许拖动3、众包盒子的拖拽4、图片拖拽5、增加放大镜6、图片默认展示7、拍摄时间固定1、按照鼠标中心点进行缩放操作:鼠标放置在图区中,滚轮滚动现象:以鼠标中的点进行,缩放。思路:滚轮缩放, 通过 捕获 事件对象的步长。然后通过 transfrom scale 实现缩放。缩放平移,在视觉上达到中心点缩放的效果。注意点: transfrom 所有属性都不改变元素的布局。scale 只会引起重绘,不会引起重排。在性能上 scale
2021-01-05 17:21:34 952 1
原创 原型、原型链
记住两句话1、 所有的对象,都有prototype属性。 只不过 实例的prototype 是 undefined。2、 所有的构造函数 都是 Function 的实例。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jm7Mc8Gh-1597897515025)(原型.png)]JS 原型链JS中每个对象都有一个prototype 属性。 称为原型。而原型的值 也是一个对象,因此 它也有自己的原型,这样就串联起了一条原型链。原型的链头是 o..
2020-08-20 12:25:32 286
原创 px,rem,vw
px, rem , vw 一般移动端布局, 使用 rem。 rem 是相对于根元素标签的字体大小。 默认是 1rem = 16px;这篇文章写的好 总结的好,我把我需要的拿下来。 自己看https://www.cnblogs.com/SRH151219/p/10407609.html再来了解一个名词 dpr。 dpr(device pixel ratio) 设备像素比 。 简单的理解 : 就是 F12 控制台的手机模型, 和真正的像素 对应关系。
2020-08-10 23:13:29 245
原创 数组常用方法总结
数组常用的属性以及方法1、属性length 数组的长度2、方法unshift(item): 将元素添加到数组的头部 改变原数组shift : 将数组头部元素弹出 改变原数组push: 将元素添加到数组的尾部 改变原数组pop: 将元素尾部元素 弹出 改变原数组join(string): 将元素拼接成字符串tostring(): 将数组转为字符串splice(开始索引
2020-08-06 14:56:54 169
原创 函数变量提升总结
变量提升和函数提升 1. 所有的声明都会被提升 2. 函数的提升 包含 函数的声明 和 函数的定义。而变量的提升只会提升声明 3. 函数的提升 优于 变量的 提升, 在声明函数的时候一定不要和变量重名 4. 多次声明只会有一次有用, 其他的会被忽略 5. 所有提升都只会提升到当前作用域的顶部。...
2020-07-30 22:25:01 110
原创 斑马线实现
斑马线, 实现方式css 选择器中 nth-child() 奇数 偶数 odd evencss 使用线性渐变 background-image:linear-gradient(90deg,#E1DEB0 50%,transparent 50%,transparent);js 中 个数取 2 的余 然后设置 样式bootstrap 有现成的vue 实现 遍历 data 中的数据, 绑定样式 :style 也是取2的余<li v-for="(ite
2020-07-30 16:59:52 312
原创 前端插值语法总结
前端插值语法MVC 框架 <%=key%>ejs 模板 <%=key%>ES6${key}less@{key}scss#{$key}微信{{key}} 伪 js 环境vue{{key}}
2020-07-28 19:45:37 545
原创 闭包适用场景篇
闭包的适用场景 应用场景一: 典型应用是模块封装,在各模块规范出现之前,都是用这样的方式防止变量污染全局。 应用场景二: 在循环中创建闭包,防止取到意外的值。 **应用场景三:**函数防抖 按钮提交场景:防止多次提交按钮,只执行最后提交的一次 搜索框联想场景:防止联想发送请求,只发送最后一次输入节流适用场景 拖拽场景:固定时间内只执行一次,防止超高频次触发位置变动 缩放场景:监控浏览器resize区别:节流不管事件触发多频繁保证在一定时间内一定会执行一次函数
2020-07-23 22:50:49 4032
原创 嵌入的js代码应该放在什么位置
嵌入的js代码应该放在什么位置js阻塞: 所有浏览器在下载js代码的时候,会阻止其他一切活动,比如 其他资源下载,内容呈现等。直到js代码 下载、解析、执行完毕 后才开始继续并行下载其他资源并渲染内容。css阻塞: css本身是并行加载的。但是css后面如果跟着js代码的话, 就会发生阻塞。该css就会阻塞后面资源的下载。(意思就是 css 加载完毕, js阻塞后面的资源。 相对于 css 阻塞 后面资源)如果把嵌入的js代码放到css前面。css就不会发生阻塞了。
2020-06-23 22:32:16 1912
原创 前端html css实现三角形
html+ css 实现三角形, 箭头。首先先介绍以下 border border 官方定义 简写属性在一个声明设置所有的边框属性。 咱们首先知道 border 在浏览器上 是怎么绘制的。 当 被绘制的盒子width 有值的时候,围绕着盒子绘制。 也就是边框的宽度。 当 被绘制的盒子width 为 0的时候, border 是从 中心点开始绘制的上代码:.box{ width:0; height:0;
2020-06-07 22:32:23 636
原创 前面基础知识(查缺补漏)css篇
知识点 css篇自适应单位百分比: %相对于视口宽度单位: vw相对于视口高度单位: vh相对于视口宽度或高度单位: vm (取决于哪个小) 相对于父元素字体单位大小: em相对于根元素字体单元大小: rem选择器比重 内联样式 1000 ID选择器 0100 类选择器, 属性选择器, 伪类选择器(:link :visited :hover :actice)0010 标签选择器, 伪元素选择器(:before :after) 0001 通配符选择器
2020-06-07 21:20:51 296
原创 让超过宽度部分,打点(显示省略号)
让超过宽度部分,打点(显示省略号)<style> main { border: 5px solid red; width: 120px; height: 20px; } main div { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }</style><body
2020-06-07 21:19:36 385
原创 三栏布局
固比固(浮动布局)知识点。保存。忘记来看左 内容 右 两边固定,内容自适应和元素位置有关系 当DOM元素位置为 <aside class="left">1</aside> <aside class="right">3</aside> <div class="contain">2</div>原理: 内容在文档流, 左边栏左浮动, 右边栏右浮动 由于浮动元素不会覆盖在另一个BFC(块级格
2020-06-07 21:19:11 1561 1
原创 ==、===、is区别
==判断 会做类型转换===判断 不会做类型转换全等判断的时候有两个问题: 1 、无法0和-0 结果是true 0和-0之间差了一个符号位,在二进制中存储的形式是不同的 2 、 判断NaN的时候有问题 所有的NaN都表示“不是一个数”,所以就是一个“NaN”数据,因此存储的地址是一样的is方法判断的时候: 0和-0 结果是...
2020-02-25 23:06:00 145
原创 闭包
闭包函数 定义: 闭包是指有权访问另一个函数作用域中的变量的函数 创建闭包的常见方式: 就是在一个函数内部创建另一个函数,通过另一个函数访问这个函数的局部作用域。(变量被引用的时候,垃圾回收机制是不能回收的。) 闭包的特点: 让一个局部变量像全局一样,通过制定的方法,可以在全局中使用。 闭包的好处: 1、 在全局中使用局部变量 ...
2020-02-25 21:26:39 199
原创 css预编译
css 预编译常用模块 less 、 sass css 预编译解决的问题: css 预编译: 属于css 预处理语言中的一种,为css 赋予了动态语言的特性, 例如: 可以使用 变量 、 表达式 、 循环 、 判断等less 编译的方式: 前端编译、 node编译 、 webpack编译sass 编译方法: ruby 编译、 webpack编...
2020-02-24 23:41:51 924
原创 js三种弹框
js的三种弹框: alert() 弹出警示框,用户只能点击确认 confirm() 弹出信息之后,用户可以选择确认和取消 对应结果: 确认为true,取消为false prompt() 弹出弹框,让用户输入信息 结果: 确认为输入的信息或者空白,取消为null...
2020-02-23 20:26:47 183
原创 null专栏
null 是一个 空对象的指针。 这个属性是没有用的。 1、 类型和值都是自己本身 2、 使用typeof 查看的时候。 显示为 object 那他为什么会这样呢? 原因: null 为一个空对象的指针。 本身指向了一个空指针。...
2020-02-23 20:18:19 119
原创 npm
cnpm 是淘宝镜像, 是中国的服务器。npm node package manager node包管理。dns服务器解析 将域名发送到国外的服务器。然后解析。返回 ip地址。真正访问的都是 ip地址。npm 是发送命令到外国的服务器。然后解析。返回数据包。查看全局路径npm config ls当 nodejs 装在其他盘符的时候。 他的全局路径。 是你下载的盘...
2020-02-23 20:06:21 108
原创 nodejs 搭建静态服务器
服务器分类 按照请求的资源类型进行分类 静态服务器: 静态网页 请求的资源为 html 、css 、 js 、 图片等 动态服务器: 动态网站。 登陆,注册等。 搭建静态服务器 静态的意思: 浏览器请求某个文件,对应的文件内容返回给浏览器 思路: 获取请求文件的路径 根据路径找到对应的文件,有则返回,没有则给出提示。...
2020-02-22 21:37:54 368
原创 出现undefined的情况
undefined 表示未定义的值。 也就是表示一个不存在的值。 那么说明时候会是 undefined呢? 肯定是查看变量的时候, typeof 1、 未声明的变量 2、 未赋值的变量。 undefined 3、 被删除释放掉的对象的属性; 释放使用 delete。 例如window.a = 2;delete window.a;consol...
2020-02-22 16:03:28 4275
原创 数据类型
数据类型一共8种 基础数据类型 7种。 1、 number 数字 2、 string 字符串 3、 boolean 布尔 4、 null 空对象的指针 5、 undefined 一个特殊的值,表示变量没有值 6、 symbol() : 会生成一个唯一值, 必须通过 symbol() 生成 7、...
2020-02-22 15:58:40 124
原创 css选择器总结
css选择器通用选择器 *标签选择器id 选择器class 类选择器并集选择器交集选择器结构选择器 匹配到的都是F元素 E F : F 元素在E元素的内部 E > F : F 元素必须为E 元素的子元素 ( 儿子辈) E ~ F : F元素 有一个为E 元素的 哥哥 (同级查找,F 元素在 E 元素的后面) ...
2020-02-22 15:49:20 102
原创 return打断
return 打断 , 是打断 当前函数的执行, 直接返回。let a = (function(){ if(' ') { console.log(123); return; console.log(234); } console.log(456);})()结果 123let b = (function(...
2020-02-18 16:38:45 210
原创 fs删除非空文件夹
fs 删除非空文件夹方法具体在 链接方法详解实现fs 删除非空文件夹// 定义删除非空目录的方法function del(path) { // 第一步读取文件内部的文件 let arr = fs.readdirSync(path); // console.log(arr); // 遍历数组 for (let i = 0; i < arr.length; i++) { ...
2020-02-17 21:53:14 708
原创 fs模块方法
fs模块 是nodejs 的内置模块fs : file system 文件系统, 操作文件以及文件夹引入fs模块let fs = require('fs');创建文件fs.appendfile( path , data , fn)path : 生成文件的路径。 如果文件存在则在原有的内容之后追加内容data : 要写入的内容fn : 执行完...
2020-02-17 21:47:56 503
原创 请求类型
get和 post请求请求类型 请求 就是浏览器发送信息到服务器的过程 通常按照目的分为两种 第一种: 获得数据 第二种: 发送数据GET请求 获取数据 get 请求的特点: 1、get请求的数据携带在URL 的query 2、长度受限, 不能携带大量的数据 3、...
2020-02-15 11:17:45 204
原创 MVC笔记,加深理解
搭建MVC实现:MVC 模式 MVC模式 是将程序分为三层: M层(Model): 负责数据层 V层(View): 负责视图层 C层 (contraller): 控制器 负责交互在MVC 模式中: C层是 核心层: 既可以更新数据,又可以更新视图 V层: 可以获取数据 M层: 存储数据MVC的主要思想 ...
2020-02-13 23:59:38 153
原创 jQuery理解源码(三)笔记
jQuery实现另一类方法(笔记)还有一类方法, 是jQuery原型的方法 例如 jQuery(‘div’).html(); 在上一篇讲到,实现jQuery的构造器。那么就是说 jQuery(‘div’) 就是 jQuery.prototype的实例连接: [https://blog.csdn.net/qq_35898059/article/details/1039...
2020-01-15 19:32:36 1571 1
原创 jquery源码解读 (二) 笔记
jquery源码解读(二)首先实现 $ . 直接调用方法 ( 例如:$.each() )我们这里的jQuery是什么呢?是一个构造函数。所以不能往原型上添加方法。构造函数本身就是一个对象, 函数都是对象。jQuery.each() 意味着 为这个构造函数添加一个方法。html就用简单的三个div。<div>1</div><div>...
2020-01-14 01:27:25 217
原创 jquery源码解读(一)笔记
jquery源码解读,实现大概框架(一) jquery是一个库,封装了很多方法。为的就是更加方便使用。 首先:分析, 第一条。 他们有两类方法,一种是 $ . 直接调用方法 ( 例如:$.each() )另一种是 (‘Selector’)调用方法(例如:(‘ Selector’)调用方法 (例如:(‘Selector’)调用方法(例如:...
2020-01-12 21:59:38 365
原创 迭代器的总结
迭代器的总结:迭代器: 迭代器(iterator)是一种对象,它能够用来遍历标准模板库容器中的部分或全部元素,每个迭代器对象代表容器中的确定的地址。迭代器修改了常规指针的接口,所谓迭代器是一种概念上的抽象:那些行为上像迭代器的东西都可以叫做迭代器。然而迭代器有很多不同的能力,它可以把抽象容器和通用算法有机的统一起来。jQuery中的迭代器var obj = {a: 11, b: 2...
2020-01-08 00:14:30 132
原创 不使用for遍历进行,叠加(递归,ES5实现),map、fill、reduce。 fill的灵魂体现。
不使用for遍历进行,叠加(递归,ES5实现)实现addNum(num1, num2)方法, 接受两个参数, 分别是两个整数,求两个整数之间的所有整数之和 例如: addNum(10, 20) 10+11+…+20 得到165 可以包含两个参数, 可以不包含两个参数 我们统一包含两个参数不要使用for循环法一: 使用递归function addNu...
2020-01-07 14:44:54 784
原创 原生JS拖拽模型(有限制范围的)
原生拖拽模型(有限制范围的)思路:确定盒子的移动的方式 1、 定位的left top值可以让盒子移动 2、直接margin 顶(在文档流中,不建议) 父元素的padding顶 (更加不建议) 使用left来实现 ,需要设置定位。全部用 相对定位(叠加计算) 绝对定位都能实现(相对是谁,如果代码多,会很乱。),这里我们使用 父相子绝(边界相对定位,移动的盒子...
2019-12-23 10:42:35 1352
原创 原生js实现如下效果: 一个按钮,点击它会弹出对话框,但5秒内再点击不会再弹出对话框。5秒后恢复正常。
原生js实现如下效果: 一个按钮,点击它会弹出对话框,但5秒内再点击不会再弹出对话框。5秒后恢复正常。第一种方式:使用函数节流的方式(就是设置一个变量,来一个判断语句,判断这个变量的值。为真或假执行某些事情)弹出框,我就用alert()了。补充一下:因为要用原生js实现,原生js提供的弹出框的方式(我暂时知道四种),其中有三种都是阻塞加载的。剩下一种很多浏览器已经不支持alert() ...
2019-12-18 19:33:18 1239
原创 异形轮播图,旋转木马(样式放数组) 理解
单纯的就是 相对于谁,谁怎么动的一个情况单纯为了学会使用博客,把自己当时没有理解的东西写下来。也希望能帮忙到大家这种方式,使用的是,将样式放到数组中,然后样式和元素一 一 对应的方式。只有左右键 加上瞬移效果,防流氓。如果还有瞬移的小原点,可以使用防流氓,也 可以使用节流(上锁)以三个元素为例前景声明: 绿色盒子 点击右键...
2019-12-17 16:46:10 426
原创 纯js实现随机整数[m,n],使用Math的方法处理出现概率不相等的问题
纯js实现随机整数[m,n],处理出现概率不相等的问题1、可以使用 parseInt(取整)会智能识别 ceil(向上取整) floor(向下取整) round(四舍五入) 直接上代码法1:使用四舍五入 function randomRound(m, n) { return Math.round((Math.random() * (n - m) ...
2019-12-05 17:20:07 375
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人