没入门到放弃-CSDN博客

原创中心点缩放，四个角允许拉伸添加放大镜等功能糅杂

一共涉及到以下几个功能：1、按照鼠标中心点进行缩放2、四个角允许拖动3、众包盒子的拖拽4、图片拖拽5、增加放大镜6、图片默认展示7、拍摄时间固定1、按照鼠标中心点进行缩放操作：鼠标放置在图区中，滚轮滚动现象：以鼠标中的点进行，缩放。思路：滚轮缩放，通过捕获事件对象的步长。然后通过 transfrom scale 实现缩放。缩放平移，在视觉上达到中心点缩放的效果。注意点： transfrom 所有属性都不改变元素的布局。scale 只会引起重绘，不会引起重排。在性能上 scale

2021-01-05 17:21:34 864 1

原创原型、原型链

记住两句话1、所有的对象，都有prototype属性。只不过实例的prototype 是 undefined。2、所有的构造函数都是 Function 的实例。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jm7Mc8Gh-1597897515025)(原型.png)]JS 原型链JS中每个对象都有一个prototype 属性。称为原型。而原型的值也是一个对象，因此它也有自己的原型，这样就串联起了一条原型链。原型的链头是 o..

2020-08-20 12:25:32 260

原创 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 233

原创数组常用方法总结

数组常用的属性以及方法1、属性length 数组的长度2、方法unshift(item)：将元素添加到数组的头部改变原数组shift ：将数组头部元素弹出改变原数组push: 将元素添加到数组的尾部改变原数组pop: 将元素尾部元素弹出改变原数组join（string）: 将元素拼接成字符串tostring(): 将数组转为字符串splice(开始索引

2020-08-06 14:56:54 140

原创函数变量提升总结

变量提升和函数提升 1. 所有的声明都会被提升 2. 函数的提升包含函数的声明和函数的定义。而变量的提升只会提升声明 3. 函数的提升优于变量的提升，在声明函数的时候一定不要和变量重名 4. 多次声明只会有一次有用，其他的会被忽略 5. 所有提升都只会提升到当前作用域的顶部。...

2020-07-30 22:25:01 100

原创斑马线实现

斑马线，实现方式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 276

原创前端插值语法总结

前端插值语法MVC 框架 <%=key%>ejs 模板 <%=key%>ES6${key}less@{key}scss#{$key}微信{{key}} 伪 js 环境vue{{key}}

2020-07-28 19:45:37 526

原创闭包适用场景篇

闭包的适用场景应用场景一：典型应用是模块封装，在各模块规范出现之前，都是用这样的方式防止变量污染全局。应用场景二：在循环中创建闭包，防止取到意外的值。 **应用场景三：**函数防抖按钮提交场景：防止多次提交按钮，只执行最后提交的一次搜索框联想场景：防止联想发送请求，只发送最后一次输入节流适用场景拖拽场景：固定时间内只执行一次，防止超高频次触发位置变动缩放场景：监控浏览器resize区别:节流不管事件触发多频繁保证在一定时间内一定会执行一次函数

2020-07-23 22:50:49 3913

原创嵌入的js代码应该放在什么位置

嵌入的js代码应该放在什么位置js阻塞：所有浏览器在下载js代码的时候，会阻止其他一切活动，比如其他资源下载，内容呈现等。直到js代码下载、解析、执行完毕后才开始继续并行下载其他资源并渲染内容。css阻塞： css本身是并行加载的。但是css后面如果跟着js代码的话，就会发生阻塞。该css就会阻塞后面资源的下载。（意思就是 css 加载完毕， js阻塞后面的资源。相对于 css 阻塞后面资源）如果把嵌入的js代码放到css前面。css就不会发生阻塞了。

2020-06-23 22:32:16 1858

原创前端html css实现三角形

html+ css 实现三角形，箭头。首先先介绍以下 border border 官方定义简写属性在一个声明设置所有的边框属性。咱们首先知道 border 在浏览器上是怎么绘制的。当被绘制的盒子width 有值的时候，围绕着盒子绘制。也就是边框的宽度。当被绘制的盒子width 为 0的时候， border 是从中心点开始绘制的上代码：.box{ width:0; height:0;

2020-06-07 22:32:23 603

原创前面基础知识（查缺补漏）css篇

知识点 css篇自适应单位百分比： %相对于视口宽度单位： vw相对于视口高度单位： vh相对于视口宽度或高度单位： vm (取决于哪个小) 相对于父元素字体单位大小： em相对于根元素字体单元大小： rem选择器比重内联样式 1000 ID选择器 0100 类选择器，属性选择器，伪类选择器（:link :visited :hover :actice）0010 标签选择器，伪元素选择器（:before :after） 0001 通配符选择器

2020-06-07 21:20:51 281

原创让超过宽度部分，打点（显示省略号）

让超过宽度部分，打点（显示省略号）<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 352

原创三栏布局

固比固（浮动布局）知识点。保存。忘记来看左内容右两边固定，内容自适应和元素位置有关系当DOM元素位置为 <aside class="left">1</aside> <aside class="right">3</aside> <div class="contain">2</div>原理：内容在文档流，左边栏左浮动，右边栏右浮动由于浮动元素不会覆盖在另一个BFC（块级格

2020-06-07 21:19:11 1515 1

原创 ==、===、is区别

==判断会做类型转换===判断不会做类型转换全等判断的时候有两个问题： 1 、无法0和-0 结果是true 0和-0之间差了一个符号位，在二进制中存储的形式是不同的 2 、判断NaN的时候有问题所有的NaN都表示“不是一个数”，所以就是一个“NaN”数据，因此存储的地址是一样的is方法判断的时候： 0和-0 结果是...

2020-02-25 23:06:00 124

原创闭包

闭包函数定义：闭包是指有权访问另一个函数作用域中的变量的函数创建闭包的常见方式：就是在一个函数内部创建另一个函数，通过另一个函数访问这个函数的局部作用域。（变量被引用的时候，垃圾回收机制是不能回收的。）闭包的特点：让一个局部变量像全局一样，通过制定的方法，可以在全局中使用。闭包的好处： 1、在全局中使用局部变量 ...

2020-02-25 21:26:39 174

原创 css预编译

css 预编译常用模块 less 、 sass css 预编译解决的问题： css 预编译：属于css 预处理语言中的一种，为css 赋予了动态语言的特性，例如：可以使用变量、表达式、循环、判断等less 编译的方式：前端编译、 node编译、 webpack编译sass 编译方法： ruby 编译、 webpack编...

2020-02-24 23:41:51 894

原创 js三种弹框

js的三种弹框： alert() 弹出警示框，用户只能点击确认 confirm() 弹出信息之后，用户可以选择确认和取消对应结果: 确认为true，取消为false prompt() 弹出弹框，让用户输入信息结果：确认为输入的信息或者空白，取消为null...

2020-02-23 20:26:47 162

原创 null专栏

null 是一个空对象的指针。这个属性是没有用的。 1、类型和值都是自己本身 2、使用typeof 查看的时候。显示为 object 那他为什么会这样呢？原因： null 为一个空对象的指针。本身指向了一个空指针。...

2020-02-23 20:18:19 113

原创 npm

cnpm 是淘宝镜像，是中国的服务器。npm node package manager node包管理。dns服务器解析将域名发送到国外的服务器。然后解析。返回 ip地址。真正访问的都是 ip地址。npm 是发送命令到外国的服务器。然后解析。返回数据包。查看全局路径npm config ls当 nodejs 装在其他盘符的时候。他的全局路径。是你下载的盘...

2020-02-23 20:06:21 98

原创 nodejs 搭建静态服务器

服务器分类按照请求的资源类型进行分类静态服务器：静态网页请求的资源为 html 、css 、 js 、图片等动态服务器：动态网站。登陆，注册等。搭建静态服务器静态的意思：浏览器请求某个文件，对应的文件内容返回给浏览器思路：获取请求文件的路径根据路径找到对应的文件，有则返回，没有则给出提示。...

2020-02-22 21:37:54 341

原创出现undefined的情况

undefined 表示未定义的值。也就是表示一个不存在的值。那么说明时候会是 undefined呢？肯定是查看变量的时候， typeof 1、未声明的变量 2、未赋值的变量。 undefined 3、被删除释放掉的对象的属性；释放使用 delete。例如window.a = 2;delete window.a;consol...

2020-02-22 16:03:28 4047

原创数据类型

数据类型一共8种基础数据类型 7种。 1、 number 数字 2、 string 字符串 3、 boolean 布尔 4、 null 空对象的指针 5、 undefined 一个特殊的值，表示变量没有值 6、 symbol（）：会生成一个唯一值，必须通过 symbol() 生成 7、...

2020-02-22 15:58:40 113

原创 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 96

原创 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 194

原创 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 646

原创 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 485

原创请求类型

get和 post请求请求类型请求就是浏览器发送信息到服务器的过程通常按照目的分为两种第一种：获得数据第二种：发送数据GET请求获取数据 get 请求的特点： 1、get请求的数据携带在URL 的query 2、长度受限，不能携带大量的数据 3、...

2020-02-15 11:17:45 179

原创 MVC笔记，加深理解

搭建MVC实现：MVC 模式 MVC模式是将程序分为三层： M层（Model）：负责数据层 V层（View）: 负责视图层 C层（contraller）: 控制器负责交互在MVC 模式中： C层是核心层：既可以更新数据，又可以更新视图 V层：可以获取数据 M层：存储数据MVC的主要思想 ...

2020-02-13 23:59:38 143

原创 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 1542 1

原创 jquery源码解读 (二) 笔记

jquery源码解读（二）首先实现 $ . 直接调用方法（例如：$.each() ）我们这里的jQuery是什么呢？是一个构造函数。所以不能往原型上添加方法。构造函数本身就是一个对象，函数都是对象。jQuery.each() 意味着为这个构造函数添加一个方法。html就用简单的三个div。<div>1</div><div>...

2020-01-14 01:27:25 206

原创 jquery源码解读（一）笔记

jquery源码解读，实现大概框架（一） jquery是一个库，封装了很多方法。为的就是更加方便使用。首先：分析，第一条。他们有两类方法，一种是 $ . 直接调用方法（例如：$.each() ）另一种是 (‘Selector’)调用方法(例如：(‘ Selector’)调用方法 (例如：(‘Selector’)调用方法(例如：...

2020-01-12 21:59:38 337

原创迭代器的总结

迭代器的总结：迭代器：迭代器（iterator）是一种对象，它能够用来遍历标准模板库容器中的部分或全部元素，每个迭代器对象代表容器中的确定的地址。迭代器修改了常规指针的接口，所谓迭代器是一种概念上的抽象：那些行为上像迭代器的东西都可以叫做迭代器。然而迭代器有很多不同的能力，它可以把抽象容器和通用算法有机的统一起来。jQuery中的迭代器var obj = {a: 11, b: 2...

2020-01-08 00:14:30 121

原创不使用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 752

原创原生JS拖拽模型（有限制范围的）

原生拖拽模型（有限制范围的）思路：确定盒子的移动的方式 1、定位的left top值可以让盒子移动 2、直接margin 顶（在文档流中，不建议）父元素的padding顶（更加不建议）使用left来实现，需要设置定位。全部用相对定位(叠加计算) 绝对定位都能实现(相对是谁，如果代码多，会很乱。)，这里我们使用父相子绝（边界相对定位，移动的盒子...

2019-12-23 10:42:35 1243

原创原生js实现如下效果：一个按钮，点击它会弹出对话框，但5秒内再点击不会再弹出对话框。5秒后恢复正常。

原生js实现如下效果：一个按钮，点击它会弹出对话框，但5秒内再点击不会再弹出对话框。5秒后恢复正常。第一种方式：使用函数节流的方式（就是设置一个变量，来一个判断语句，判断这个变量的值。为真或假执行某些事情）弹出框，我就用alert()了。补充一下：因为要用原生js实现，原生js提供的弹出框的方式（我暂时知道四种），其中有三种都是阻塞加载的。剩下一种很多浏览器已经不支持alert() ...

2019-12-18 19:33:18 1197

原创异形轮播图，旋转木马（样式放数组）理解

单纯的就是相对于谁，谁怎么动的一个情况单纯为了学会使用博客，把自己当时没有理解的东西写下来。也希望能帮忙到大家这种方式，使用的是，将样式放到数组中，然后样式和元素一一对应的方式。只有左右键加上瞬移效果，防流氓。如果还有瞬移的小原点，可以使用防流氓，也可以使用节流（上锁）以三个元素为例前景声明：绿色盒子点击右键...

2019-12-17 16:46:10 396

原创纯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 350

qq_35898059的博客