桃小瑞

前言不知各位朋友现在在web端进行登录的时候有没有注意一个变化，以前登录的时候是直接账号密码通过就可以直接登录，再后来图形验证码，数字结果运算验证，到现在的拼图验证。这一系列的转变都是为了防止机器操作，但对于我们来说，有亿点麻烦，但也没办法呀。 今天我们也一起来做一个制造亿点麻烦的人，实现一个拼图验证。 实现原理这个实现原理并不复杂，我们只需要一张图作为我们的拼接素材，我们再单独弄一个盒子，然后移动它，到我们的指定位置，到达指定范围内即验证通过，反之验证未通过。 既然原理我们知道了，那我们就开干吧。 实现前端登录拼图验证本篇文章以 css 为主， javascript为辅实现。 搭建框架我们要实现这个功能，我们需要先搭建出来一个框架。 1234567891011121314151617// css<style> .check{ width: 400px; height: 300px; background-repeat: no-repeat; background-siz ...

前言我们在项目的开发、面试的过程中，我们都在接触原型及原型链，这里这样说大家没有印象。各位朋友在vue 2中做全局挂载，这个做过吧。 1Vue.protype.$xx = xx 上面这个代码是不是很熟悉？没错，上面的代码就是我们在vue 2中做全局挂载的一种方式。这个就是一个原型的操作。那这个也只是一个原型操作啊，那什么是原型链，你还是没说啊，ei，让我们往看下面。一起来揭开原型链的神秘面纱。 什么是原型链（Prototype chain）？什么是原型链？我们谈原型链的时候，继承它就跑不脱（跑不掉），它跟原型链是挂钩的，二者并存的一个关系。 我们看一下MDN的官方解释。 每个实例对象（object）都有一个私有属性（称之为 __proto__）指向它的构造函数的原型对象（prototype）。该原型对象也有一个自己的原型对象（__proto__），层层向上直到一个对象的原型对象为 null。并作为这个原型链中的最后一个环节。 大白话就是说我们每一个对象都有一个私有属性__proto__，层层向上的一个__proto__的一个链就是原型链。 我们看张图。 我们再画张图看一下他们的 ...

前言在现在的前端大环境下，由从前的html、css、js，逐渐衍生出来了前端的工程化，由简到繁，越来越复杂，最复杂的要属我们的webpack了，已经出现了webpack工程师，用来专门配置webpack。 前端工程化打包工具千千万，谁又是你的NO.One。 本篇文章实现的是一款简单的javaScript打包工具，不涉及非javaScript的打包，如：css、html、静态文件等。 环境我们的电脑上需要配备node环境。 所需部件工具fsfs模块是用来操作文件的，该模块只能在node环境中使用，不可以在浏览器中使用。 pathpath模块是用来处理文件及文件路径的一个模块。 @babel/parser@babel/parser模块用于接收源码，进⾏词法分析、语法分析，⽣成抽象语法树（Abstract Syntax Tree），简称ast。 @babel/traverse@babel/traverse模块用于遍历更新我们使用@babel/parser生成的AST。对其中特定的节点进行操作。 @babel/core@babel/core模块中的transform用于编译我们的代码，可以转编 ...

JavaScript的数据类型，也可以称为原始类型，加上es6的Symbol现在一共是七种，分别是：Undefined、Null、Boolean、Number、object、String和Symbol 本章节只是对这些数据类型进行了简单描述，以便理解 一、 undefinedundefined表示值未定义，只有一个值，就是特殊值undefined 。当使用var或let声明了变量但没有初始化时，就相当于给变量赋予了undefined值 二、booleanboolean表示值为布尔值；值只有true和false 三、stringString（字符串）数据类型表示零或多个16位Unicode字符序列。字符串可以使用双引号（”）、单引号（’）或反引号（`）标示 四、 number数值，Number类型使用IEEE 754格式表示整数和浮点值（在某些语言中也叫双精度值）,最基本的数值字面量格式是十进制整数，也就是我们日常使用的数值。 1let intNum = 55; // 整数 五、object用来表示一组数据和功能的集合。可以通过new关键字创建 1let obj = new Objec ...

前言在现在的时代发展中，从以前的手写签名，逐渐衍生出了电子签名。电子签名和纸质手写签名一样具有法律效应。电子签名目前主要还是在需要个人确认的产品环节和司法类相关的产品上较多。 举个常用的例子，大家都用过钉钉，钉钉上面就有电子签名，相信大家这肯定是知道的。 那作为前端的我们如何实现电子签名呢？其实在html5中已经出现了一个重要级别的辅助标签，是啥呢？那就是canvas。 什么是canvasCanvas（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。Canvas 对象表示一个 HTML 画布元素 -。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。 大白话就是canvas是一个可以在上面通过javaScript画图的标签，通过其提供的context(上下文)及Api进行绘制，在这个过程中canvas充当画布的角色。 1<canvas></canvas> 如何使用canvas给我们提供了很多的Api，供我们使用，我们只需要在body标签中创建一个c ...

我：ui，这里需要一个水珠效果图 ui：现在没空，你不能自己在网上找一个或者自己做一个吗？ 我：啊这… 我：行吧，你空了给我做一下 ui：…哦可 手写就手写，谁怕谁，直接开干。 这里我们在一个新建的html中编写。 新建一个html。 在head标签中新建一个style标签，并去除多余边距。 这里为什么需要去除多余的边距呢？ 是因为有些内核的浏览器会默认自带一些边距，为了在所有浏览器中看起来都是一样的效果，我们需要给它去除掉，也就是初始化一次。 12345678<style> * { margin: 0; padding: 0; }</style> 在body中新建一个div盒子用来呈现我们的水珠效果，我们先给他加个class类名为water 123<div class="water" ></div> 我们接下来给body加个宽高和颜色，方便看我们的水珠效果 123456789<style> body{ width ...

gitee 地址gitee地址： gittee地址 本篇目标 结合gsap动画库，添加动画使我们的盒子更加顺畅的移动和旋转gsap介绍gsap是一款以javascript实现方式实现的动画库。 gsap有很多的Api我这里就不做详细的解释了，大家可以去看官方文档，我这里把文档给摆出来。 文档： 英文文档 中文文档 相信同时点击了中文文档和英文文档的同学，有点纳闷，这两个名字不一样啊。其实是没关系的，这两个是一个子集关系，都是一样的。大家放心看吧。 下载gsap123456// npmnpm i gsap -s// pnpmpnpm i gsap -s// yarnyarn add gsap 在项目中使用gsap动画库在项目中引入gsap12// 引入 gsap 动画库import gsap from "gsap" 添加动画我们先让我们的动画像 x 轴移动 12345678// 添加动画gsap.to( cube.position, // 需要执行动画的参数对象 {// 执行动画的目标参数 x: 10, // 使盒子移动到 x ...

gitee 地址gitee地址： gittee地址 本篇目标 实现画布的响应式，根据屏幕尺寸自适应 设置画布全屏，和退出全屏 实现画布的响应式我们这里需要用到原生的addEventListener用来监听我们窗口的变化。我们需要将原来写死的画布大小改成窗口大小 12345// 设置大小renderer.setSize( window.innerWidth, // 宽度 window.innerHeight // 高度); 添加窗口变化监听器1234// 添加窗口变化监听器addEventListener('resize', () => {}) 监听器添加完成后，我们需要在回调函数里面，重新设置其大小和比例 1234567891011// 更新修改相机比例 camera.aspect = window.innerWidth / window.innerHeight // 更新摄像机的投影矩阵 camera.updateProjectionMatrix() // 更新画布大小 renderer.setSize( windo ...

gitee 地址gitee地址： gittee地址 本篇目标 使用controls控制器对我们创建的模型添加交互添加controls控制器引入控制器本文使用的是OrbitControls(轨道控制器)12// 引入控制器import { OrbitControls } from "three/examples/jsm/controls/OrbitControls" 控制器列表 控制器名称 控制器名称-中文 描述 DragControls 拖放控制器 该类被用于提供一个拖放交互。 FirstPersonControls 第一人称控制器 该类是 FlyControls 的另一个实现。 OrbitControls 轨道控制器 可以使相机围绕目标进行轨道运动。 PointerLockControls 指针锁定控制器 该类的实现是基于Pointer Lock API的。 对于第一人称3D游戏来说， PointerLockControls 是一个非常完美的选择。 TrackballControls 轨迹球控制器 TrackballC ...

gitee 地址gitee地址： gittee地址 本篇目标 搭建开发环境 安装three.js 了解three.js的基本内容 搭建一个3d立方体并渲染到页面上搭建全程采用vite用作本地服务启动工具。创建一个文件夹，在终端中打开文件夹并输入以下内容12345678// pnpm pnpm create vite// npmnpm create vite@latest// yarnyarn create vite 删除多余文件，并删除main.js中的内容。文件夹结构如下图： 安装 three.js123456789// pnpm pnpm i three -s// npmnpm i three -s// yarnyarn three// <script src="https://threejs.org/build/three.js"></script> 了解three.jsthree.js官网地址：官网在使用的过程中，我们需要用到three.js的三大组件，分别是场景(Scene)、相机(Camera)、渲染器(Renderer) 场 ...