自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(55)
  • 收藏
  • 关注

原创 一文弄懂节流和防抖

一、防抖原理:其总是在设置时间的最后一刻执行一次,且只执行一次。在事件被触发n秒后再执行回调函数,如果在这n秒内又被触发,则重新计时。用白话文来说就是:用户你尽管触发事件,但是事件我一定在事件触发 n 秒后才执行,如果你在一个事件触发的 n 秒内又触发了这个事件,那我就以新的事件的时间为准,n 秒后才执行,总之,就是要等你触发完事件 n 秒内不再触发事件,n秒后才执行。整个防抖实现的流程大概是:点击执行函数清除定时 clearTimeout(timer),需要清除上一次的定时器重新计时

2022-03-01 22:22:23 1291

原创 ES6-ES11的新特性

一、ES是什么?ES 全称 EcmaScript,是脚本语言的规范,JavaScript 是 EcmaScript的一种实现,所以 ES 新特性其实指的就是 JavaScript 的新特性1.1 ECMA-262Ecma 国际制定了许多标准,而 ECMA-262 只是其中的一个,ECMA-262(ECMAScript)历史版本查看网址:这里版本时间概述第 1 版1997年制定了语言的基本语法第 2 版1998年较小改动第 3 版1999年引入正则、异

2022-02-25 15:51:28 1410

原创 Webpack 究竟是什么?如何理解Webpack

本篇文章主要是针对 B站Webpack从原理到实战 的知识梳理,之前写过一些 Webpack 更细节的一些知识,详情见 前端工程化(webpack),里面更详细的介绍了前端工程化、loader的使用,webpack的常用插件,Source Map等知识。本文重点:理解前端的模块化;理解 Webpack 打包的核心思想;Webpack核心:loader 和 plugin,要分清楚什么情况下 loader,什么时候用 plugin,要有技术选型能力。一、Webpack介绍1.1 Webpack

2022-02-24 23:00:08 2078

原创 Cookie 、Session、localstorage、Sessionstorage的区别

一、一些概念理解Cookie & Session(会话跟踪技术)、H4的存储机制;localstorage、Sessionstorage是Web Storage,H5的本地存储机制。是针对HTML4中 Cookie 存储机制的一个改善,由于Cookie存储机制有很多缺点,HTML5不再使用它,转而使用改良后的 Web Storage 存储机制。WebStorage两个主要目标:(1)提供 cookie 之外存储会话数据的路径。(2)提供跨会话持久化存储大量数据的机制。1. 会话(Sess

2022-02-24 15:28:24 9551

原创 web缓存(强制缓存、协商缓存、CDN缓存)

文章目录一、HTTP缓存1.1 强缓存1. 强制缓存的header属性(Pragma/Cache-Control/Expires)cache-control 的常用选项1.2 协商缓存(对比缓存)(一)Last-Modified(二)ETag(三)对比 Last-Modified 和 ETag1.3 HTTP缓存的整个流程二、CDN(内容分发网络)2.1 分发的内容是什么2.2 CDN 分发的流程静态内容动态内容2.3 CDN 工作原理1. 传统的未加缓存服务的访问过程2. 使用CDN缓存后的网站的访问过程

2022-02-23 14:00:00 3370 1

原创 网络、浏览器专题重点知识(含原理)

文章目录一、前言URL 和 URI二、互联网如何运作?/ 浏览器怎么通过互联网获取到网页数据的三、输入url到页面展示经历的步骤3.1 宏观层面3.2 微观层面的详细流程1. 用户输入URL2. URL请求过程(1)查找缓存(2)DNS解析获取IP地址(具体DNS的说明可见七)(3)建立TCP连接:TCP 三次握手(4)浏览器发送 HTTP 请求(5)服务器处理请求并响应数据(6)断开连接:TCP 四次挥手3. 准备渲染进程4. 提交文档5. 浏览器解析渲染页面四、浏览器是如何运作的?4.1 不同浏览器的

2022-02-23 12:00:28 2119

原创 JavaWeb项目(登录注册页面)全过程详细总结

JavaWeb项目(登录注册页面)全过程总结文章目录JavaWeb项目(登录注册页面)全过程总结一、环境准备与开发工具二、创建 JavaWeb 项目2.1 新建Dynamic Web Project项目2.2 创建前端页面2.2.1 登录页面1.login.jsp2. login.js3. time.js4. focus.js + animate.js2.2.2 注册页面(register.jsp)2.2.3 修改密码的页面(change_pwd.jsp)2.2.4 登录成功的页面(success.jsp

2021-12-02 20:29:27 101773 42

原创 Tomcat的使用

Tomcat文章目录Tomcat一、 Web 资源的分类二、常用的 Web 服务器三、Tomcat3.1 Tomcat 的目录结构3.2 动态 Web 资源目录结构3.3 Tomcat 项目发布的方式3.3.1 方式一3.3.2 方式二(不知什么原因一直失败)(不推荐)1. 虚拟路径的概念2. 配置虚拟路径3.3.3 方式三(推荐)3.4 在 eclipse 中配置 tomcat3.4.1 在 eclipse 中发布 web 项目的步骤3.5 tomcat 配置虚拟主机3.5.1 网站访问的全过程3.5.

2021-12-02 20:18:58 1497

原创 Servlet的使用

Servlet文章目录Servlet一、Servlet 概述1.1 使用 Servlet1.2 具体使用步骤(实际开发不会用该方法)1.3 Servlet 执行流程二、Servlet 的实现关系2.1 基本实现关系2.2 实现关系概述2.3 Eclipse 中使用 Servlet 模板三、servlet的生命周期3.1 servlet 生命周期相关的方法3.2 servlet 的启动时加载3.2.1 servlet 启动时加载概念3.2.2 配置启动时加载3.3 Servlet 的访问路径的配置3.3.1

2021-12-02 20:15:02 2185

原创 Vue.js 2.0 铺垫知识——模块化开发和异步编程高级使用

Vue.js 2.0 铺垫知识——模块化开发和异步编程高级使用文章目录Vue.js 2.0 铺垫知识——模块化开发和异步编程高级使用一、模块化开发1.1 前端模块化开发的分类1.2 CommonJS1.3 ES6模块化规范1.3.1 ES6模块化的基本语法1. 默认导出与默认导入2. 按需导出与按需导入3. 直接导入与执行模块中的代码二、Promise2.1 基于then-fs异步读取文件内容2.2 then-fs 的基本使用2.3 .then()方法的特性2.4 基于Promise 按顺序读取文件内容

2021-11-11 10:46:34 1498

原创 node.js 学习笔记(二)模板引擎和C/S渲染

node.js 学习笔记(二)模板引擎和C/S渲染文章目录node.js 学习笔记(二)模板引擎和C/S渲染一、初步实现Apache功能1.1 使用模板引擎1.2 在 node 中使用模板引擎二、客户端渲染和服务器渲染2.1 客户端渲染1. 客户端(浏览器)渲染过程2. 要点3. 优缺点2.2 服务器渲染1. 要点2. 优缺点2.3 实际开发情况三、处理网站的静态资源四、重定向4.1 临时重定向和永久重定向一、初步实现Apache功能Apache 服务器软件默认有一个 www 目录,所有存放在 ww

2021-11-07 16:37:41 565

原创 Vue.js 2.0 学习笔记(五)路由

Vue.js 2.0 学习笔记(五)路由文章目录Vue.js 2.0 学习笔记(五)路由一、 把axios挂载到Vue的原型上二、前端路由的概念与原理2.1 路由的概念2.2 SPA(单页面应用程序)与前端路由2.3 前端路由的工作原理三、vue-router 的使用3.1 vue-router 的概念3.2 vue-router 安装和配置的步骤3.3 路由的基本使用3.3.1 基本写法3.3.2 利用 router-link 代替 a 链接3.3.3 H5 中的 history3.4 嵌套路由3.4.

2021-11-06 17:19:27 904

原创 Vue.js 2.0 学习笔记(四)动态组件&插槽&自定义指令

Vue.js 2.0 学习笔记(四)动态组件&插槽&自定义指令文章目录Vue.js 2.0 学习笔记(四)动态组件&插槽&自定义指令一、动态组件1.1 实现动态组件的渲染1.2 keep-alive的使用1.2.1 keep-alive 对应的生命周期函数1.2.2 keep-alive的 include 和 exclude 属性1.3 组件注册名称和组件声明时name的区别二、插槽slot1.1 slot 的概念1.2 插槽使用的例子——移动网站中的导航栏1.3 插槽的基

2021-11-05 13:06:03 345

原创 node.js 学习笔记(一) 基础知识

node.js 学习笔记(一) 基础知识文章目录node.js 学习笔记(一) 基础知识一、Node.js是什么二、Node.js 的应用三、使用node.js3.1 使用 node.js 执行 js 脚本3.2 使用 node.js 读写文件3.2.1 读取文件3.2.2 写文件3.3 使用 node.js 提供 http 服务3.3.1 request 请求事件3.3.2 案例三、Node中的 JS 模块3.1 模块系统3.2 核心模块3.3 用户自定义模块3.4 模块的加载与导出四、IP地址和端口号

2021-11-02 21:24:57 418

原创 Vue.js 2.0 学习笔记(一)前端工程化(webpack)

Vue.js 2.0 学习笔记(一)前端工程化(webpack)文章目录Vue.js 2.0 学习笔记(一)前端工程化(webpack)一、前端工程化1.1 前端工程化的概念1.2 前端工程化的解决方案二、webpack2.1 webpack的基本使用2.2 webpack的案例1. 在项目中安装webpack2. 在项目中配置webpack2.3 webpack.config.js 文件的作用2.4 webpack 中的 entry 和 output2.4.1 自定义打包的入口和出口2.5 webpac

2021-10-25 23:27:51 1447

原创 Vue.js 2.0 学习笔记(三)组件化开发

vue.js 学习笔记(二)组件化开发文章目录vue.js 学习笔记(二)组件化开发一、组件化开发1.1 组件使用的基本步骤(1)Vue.extend()(2)Vue.component()(3)使用组件1.2 全局组件和局部组件1.3 父组件和子组件1.4 语法糖(重要,之前的写法现在不用了)1.4.1 注册全局组件1.4.2 注册局部组件1.5 组件模板的分离写法1.6 组件访问vue的数据1.6.1 组件自己数据的存放1.7 父子组件的通信1.7.1 父子组件通信的方法1.7.2 props基本用法

2021-10-23 09:28:10 1169

原创 Vue.js 2.0 学习笔记(二)初识Vue

Vue.js 学习笔记(一)初识Vue文章目录Vue.js 学习笔记(一)初识Vue一、初认识Vue1.1 MVX 模式1.1.1 MVC1. MVC 定义2. MVC设计模式1.1.2 MVP1.1.3 MVVM1. Vue中的MVVM二、基础语法及指令2.1 插值操作2.1.1 Mustache 语法2.1.2 v-once 指令2.1.3 v-html 指令2.1.4 v-text 指令2.1.5 v-pre 指令2.1.6 v-cloak 指令2.2 v-bind动态绑定属性2.2.1 v-bin

2021-10-21 23:49:28 803

原创 JS学习笔记(十四)动画和Canvas图形

JS学习笔记(十四)动画和Canvas图形文章目录JS学习笔记(十四)动画和Canvas图形一、使用requestAnimationFrame1.1 早期定时动画1.2 requestAnimationFrame1.3 cancelAnimationFrame1.4 通过requestAnimationFrame节流1.5 缓动动画1.5.1 缓动动画原理step进阶一:step进阶二:1.5.2 缓动动画添加回调函数二、基本画布功能2.1 getContext()2.2 toDataURL()三、2D绘

2021-10-14 14:54:51 1054

原创 JS学习笔记(十三)事件

JS学习笔记(十三)事件文章目录JS学习笔记(十三)事件一、事件流1.1 事件冒泡1.2 事件捕获1.3 DOM 事件流二、事件处理程序(事件监听器)2.1 HTML 事件处理程序(不建议使用)2.1.1 HTML 事件处理程序的问题2.2 DOM0 事件处理程序2.3 DOM2 事件处理程序2.4 IE 事件处理程序2.5 跨浏览器事件处理程序三、事件对象3.1 DOM 事件对象(1)target 和 currentTarget(2)type属性(3)preventDefault()(4)stopPro

2021-10-12 11:12:44 1556

原创 JS学习笔记(十二)DOM

JS学习笔记(十二)DOM文章目录JS学习笔记(十二)DOM一、DOM1.1 Document类型1.2 DOM树1.3 获取文档子节点 body 和 html(一)获取body(二)获取html1.4 文档信息1.5 获取元素1.5.1 根据ID获取1.5.2 根据标签名获取1.5.3 HTML5新增的获取方式1.6 特殊集合1.7 文档写入二、节点2.1 Node类型2.1.1 nodeName 和 nodeValue2.2 节点关系2.3 节点操作2.3.1 父节点的操作2.3.2 子节点的操作基本

2021-10-07 15:30:08 1499

原创 JS学习笔记(十一)BOM

JS学习笔记(十一)BOM文章目录JS学习笔记(十一)BOM一、window对象1.1 窗口关系1.2 窗口位置与像素比1.2.1 moveTo() 和moveBy()1.2.2 像素比1.3 窗口大小1.3.1 innerWidth、innerHeight、outerWidth、outerHeight1.3.2 resizeTo() 和resizeBy()1.4 视口位置1.5 导航与打开新窗口1.5.1 弹出窗口1.5.2 弹窗屏蔽程序1.6 定时器1.7 系统对话框二、location 对象2.1

2021-09-26 14:58:15 310

原创 JS学习笔记(九)函数

JS学习笔记(九)函数文章目录JS学习笔记(九)函数一、函数的定义1.1 函数声明与函数表达式二、箭头函数三、参数四、没有重载五、默认参数值5.1 默认参数作用域与暂时性死区六、参数扩展与收集6.1 扩展参数6.2 收集参数七、函数作为值八、函数内部8.1 arguments8.2 this(重点)标准函数箭头函数8.3 new.target九、函数属性和方法十、闭包10.1 this对象十一、立即调用的函数表达式一、函数的定义利用function关键字的函数声明function sum(num

2021-09-24 16:09:02 124

原创 JS学习笔记(八)代理与反射

JS学习笔记(八)代理与反射文章目录JS学习笔记(八)代理与反射一、代理1.1 创建空代理1.2 定义捕获器1.3 捕获器参数和反射API1.4 可撤销代理1.5 实用反射API1.5.1 反射API与对象API1.5.2 状态标记1.5.3 用一等函数替代操作符二、代理捕获器与反射方法2.1 get()1. 返回值2. 拦截的操作3. 捕获器不变式2.2 set()1. 返回值2. 拦截的操作2.3 has()1. 返回值2. 拦截的操作2.4 defineProperty()1. 返回值2. 拦截的操

2021-09-23 14:43:24 815

原创 JS学习笔记(六)迭代器与生成器

JS学习笔记(六)迭代器与生成器文章目录JS学习笔记(六)迭代器与生成器一、迭代器模式1.1 可迭代协议1.1.1 实现Iterable接口需要的能力1.1.2 实现Iterator接口的内置类型1.1.3 接收可迭代对象的原生语言特性1.2 迭代器协议二、生成器2.1 生成器基础2.2 通过yield中断执行2.3.1 生成器对象作为迭代对象2.3.2 yield实现输入输出2.3.3 产生可迭代对象2.3.4 使用yield* 实现递归算法一、迭代器模式   &nbs

2021-09-23 09:57:20 372

原创 CSS进阶(七)过渡与动画

CSS进阶(七)过渡与动画文章目录CSS进阶(七)过渡与动画一、缓动效果背景弹跳动画cubic-bezier()函数二、闪烁效果三、打字效果解决方案四、状态平滑的动画背景一、缓动效果背景回弹效果:指当一个过渡达到最终值时,往回倒一点,然后再次回到最终值,如此往复一次或多次,并逐渐收敛,最终稳定在最终值。回弹效果的作用:尺寸变化角度变化弹跳动画我们希望小球下落方向上的调速函数是加速的(easy-out)。而弹起方向是减速的(ease-in)@keyframes bounce {

2021-09-19 16:40:17 549

原创 JS学习笔记(五)集合引用类型

JS学习笔记(五)集合引用类型文章目录JS学习笔记(五)集合引用类型一、Object1.1 Object创建实例的方法1. 使用new(用的少)2. 使用对象字面量表示法(更好)3. 利用构造函数构造函数的语法格式1.2 存取属性的方法1.3 for in 遍历对象属性二、Array2.1 创建数组1. 使用Array构造函数2. 使用数组字面量2.2 创建数组的静态方法2.2.1. from()2.2.2. of()2.3 数组空位2.4 检测是否为数组2.4.1. instanceof2.4.2.Ar

2021-09-19 11:47:03 1543

原创 CSS进阶(六)结构与布局

CSS进阶(六)结构与布局文章目录CSS进阶(六)结构与布局一、自适应内部元素解决方案二、精确控制表格列宽解决方案三、根据兄弟元素的数量设置样式场景解决方案根据兄弟元素的数量范围来匹配元素四、满幅的背景,定宽的内容背景解决方案五、水平居中和垂直居中(重点)5.1 水平居中5.2 垂直居中基于绝对定位的解决方案基于视口单位的解决方案1. 视口单位基于flexbox的解决方案(最佳)六、紧贴底部的页脚Flexbox方案(推荐)一、自适应内部元素解决方案CSS内部与外部尺寸模型:http://w3.org

2021-09-16 11:09:26 582

原创 JS学习笔记(四)基本引用类型

JS学习笔记(四)基本引用类型文章目录JS学习笔记(四)基本引用类型一、 Date1.1 Date.parse()1.2 Date.UTC()1.3 Date.now()1.4 继承的方法1.5 日期格式化方法1.6 日期/时间组件方法二、RegExp2.1 RegExp 实例属性2.2 RegExp 实例方法2.2.1 exec()方法2.2.2 test() 方法2.2.3 RegExp构造函数属性2.3 原始值包装类型2.3.1 Boolean2.3.2 Number1. toFixed()2. t

2021-09-15 16:42:45 767

原创 CSS进阶(五)用户体验

CSS进阶(五)用户体验文章目录CSS进阶(五)用户体验一、选用合适的鼠标光标1. 提示禁用状态2. 隐藏鼠标光标二、扩大可点击区域背景解决方案三、自定义复选边框解决方案:开关式按钮四、通过阴影来弱化背景问题背景伪元素方案box-shadow方案backdrop方案五、通过模糊来弱化背景六、滚动提示解决方案七、交互式的图片对比控件CSS resize方案一、选用合适的鼠标光标光标:http://w3.org/TR/css3-ui/#cursor 1. 提示禁用状态:disabled,[

2021-09-14 21:02:41 146

原创 JS学习笔记(三)变量、作用域与内存

JS学习笔记(三)变量、作用域与内存文章目录JS学习笔记(三)变量、作用域与内存一、原始值和引用值1.1 复制值1.2 传递参数1.3 确定类型二、执行上下文2.1 作用域链增强2.2 变量声明1. 使用var的函数作用域声明2. 使用let 的块级作用域声明3. 标识符查找三、垃圾回收(重点)3.1 标记清理(最常用)思路3.2 引用计数思路策略缺陷3.3 内存管理1. 通过const和let声明提升性能2. 隐藏类和删除操作3. 内存泄漏4. 静态分配与对象池使用对象池一、原始值和引用值ES变量包

2021-09-12 12:32:34 186

原创 CSS进阶(四)字体排印

CSS进阶(四)字体排印文章目录CSS进阶(四)字体排印一、连字符断行二、插入换行解决方案:补充:三、文本行的斑马条纹问题背景:如何给文本加上斑马条纹解决方案:四、调整tab的宽度问题背景:解决方案:五、连字六、华丽的&符号解决方案:补充:unicode-range七、自定义下划线解决方案:7.1 实线下划线7.2 虚线下划线八、现实中的文字效果8.1 凸版印刷效果适用场景:原理:案例1(中等亮度底,深色字):案例2(深色底,浅色字):8.2 空心字效果方法一:使用多个text-shadow方法二

2021-09-09 12:54:35 766

原创 CSS进阶(三)视觉效果

CSS进阶(三)视觉效果一、单侧投影box-shadow语法box-shadow: inset x-offset y-offset blur-radius spread-radius color;box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;用法解释:box-shadow:2px 3px 4px rgba(0,0,0,.5);投影的绘制过程:以该元素相同的尺寸和位置,画一个rgba(0,0,0,.5)的矩形将其向右移动2px,向下移动

2021-09-08 11:03:46 588

原创 JS笔记(一)基础知识

JS笔记(一)基础知识文章目录JS笔记(一)基础知识一、浏览器执行JS简介二、JavaScript实现2.1 ECMAScript2.2 DOM三、HTML中的JS3.1 <`script`>元素3.1.1 标签位置3.1.2 推迟执行脚本3.1.3 异步执行脚本3.1.4 动态加载脚本3.2 行内脚本和外部脚本3.2.1 行内式JS3.2.2 内嵌JS3.2.3 外部JS文件3.3 文档模式(doctype)3.4 确保JavaScript不能用是的用户体验一、浏览器执行JS简介浏览器分

2021-09-07 13:00:51 231

原创 移动web开发(三)rem布局

移动端web开发(三)rem布局文章目录移动端web开发(三)rem布局一、rem适配布局二、媒体查询(Media Query)2.1 语法:2.1.1 mediatype类型2.1.2 关键字2.1.3 媒体特性2.2 引入资源2.2.1 语法2.2.2 媒体查询+rem实现元素动态大小变化三、Less3.1 Less的使用3.1.1 Less 变量变量命名规范3.1.2 Less 编译3.1.3 Less 嵌套3.1.4 Less运算3.1.5 Less中引入Less文件四、rem的适配目标4.1 r

2021-08-24 15:38:22 131

原创 移动web开发(二)flex弹性布局

移动端web开发(二)flex弹性布局文章目录移动端web开发(二)flex弹性布局一、flex弹性布局原理二、 常见父项属性1、flex-direction 设置主轴方向2、 justify-content 设置主轴上的子元素排列方式2.1 子元素垂直居中的方法3、 flex-wrap 设置子元素是否换行(重要)4、align-items 设置侧轴上的子元素排列方式(单行)实例:实现盒子水平垂直居中5、 alilgn-content 设置侧轴上的子元素排列方式(多行)6、align-content 和

2021-08-22 21:51:23 409

原创 移动web开发(一)基础知识

移动端web开发(一)基础知识文章目录移动端web开发(一)基础知识一、移动端基础1.1 移动端调试方法1.2 视口1.2.1 理想视口(ideal viewpoint)1.2.2 meta 视口标签1.2.3 标准的viewport二、二倍图2.1 物理像素和物理像素比2.2 二倍图2.3 背景缩放 background-size三、移动端主流开发方案3.1 单独制作移动端页面(主流)3.2 响应式页面兼容移动端(其次)四、移动端技术解决方案4.1 CSS初始化 normoalize.css4.2 CS

2021-08-22 18:51:02 488

原创 CSS进阶(二)形状

文章目录一、自适应的椭圆1、自适应椭圆2、半椭圆3、四分之一椭圆二、平行四边形方法一:嵌套元素方案方案二:伪元素方案(更好)三、菱形图片方法一:基于变形的方案方法二:裁剪路径方案扩展:clip-path制作动画三、切角效果方法一:css渐变(1)切一个角(2)切两个角(3)切四个角(4)弧形切角(内凹圆角)方法二:内联SVG与border-image方案方法三:裁切路径方案(可使用任意类型的背景)三种方法的比较四、梯形标签页(1)普通梯形(2)标签页梯形五、饼图1、基于transform的方案(1)进度指示

2021-08-20 12:47:46 1331

原创 CSS进阶(一)背景与边框

CSS进阶(一)背景与边框文章目录CSS进阶(一)背景与边框一、浏览器前缀二、CSS编码技巧1、尽量减少代码重复(可复用性)(1)当某些值相互依赖时,应该把他们的相互关系用代码表示出来(2)有时,代码易维护和代码量少不可兼得(3)currentColor(4)继承2、相信你的眼睛,而不是数字3、响应式网页设计A、媒体查询三、边框1、HSLA颜色2、半透明边框3、多重边框(一)box-shadow方案(二)outline方案四、灵活的背景定位1、background-position的扩展语法方案2、bac

2021-08-18 17:39:03 1212

原创 d3.js学习笔记(七)-----饼图布局

饼图布局一、转换数据集转换后数据集变为:把数值数组转换成了对象的数组二、生成路径任何不是矩形、圆形或其他基本形状的图形都可以用path来绘制这里用 d3.arc() 生成路径三、准备分组为每个要绘制的扇形创建分组(g),把用于生成饼图的数据绑定到这些新元素,并把每个分组平移到图表中心每个g元素,都追加path元素。路径的相关属性的值都保存在元素d中,所以这里调用arc四、文本标签arc.centroid() 负责计算并返回任何弧线的中心点源代码:<!DOCTYPE

2021-02-08 17:05:00 346

原创 d3.js学习笔记(六)----- 条形图元素的删除

条形图元素的删除一、准备数据var dataset=[{ key:0,value:42},{ key:1,value:21}…]二、更新引用d --> d.value三、键函数四、从数据集中删除一个元素dataset.shift()五、退出过渡源代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpo

2021-02-05 13:59:16 432 1

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除