- 博客(129)
- 收藏
- 关注
RSS订阅原创 Chart.js 堆叠柱状图点击更换背景色以及加虚线边框
这篇文章本应该昨天写出来的，只是昨天但是本地demo测试的时候发现一个bug，当时差点要到Chart.js的github上添加issue了。Demo需求：在柱状体click之后，当前堆叠柱状体更换背景颜色，以及添加虚线边框。然后点击其他的堆叠柱状图或者空白区域，原先的堆叠柱状图还要更新到原先的背景颜色。解决方案：更换背景颜色需要将datasets内当前点击的index的所有bar进行背景替换。同时...
2018-07-05 21:48:44
3234
原创 Chart.js 堆叠柱状图添加flag
本文章是因为项目中之前遇到一个问题，需要在堆叠柱状图加上一个月份的flag，但是flag不能覆盖到柱状图。所以当时自己写了demo去查看相关的内容。初始想法是参照官方文档扩展chart<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> ...
2018-07-04 20:55:41
3380
原创 CSS - flex
CSS2.1定义了四种布局方式，由一个盒与其兄弟，祖先盒的关系决定其尺寸与位置的算法。块布局：呈现文档的布局模式。行内布局：呈现文本的布局模式。表格布局：用表格呈现2D数据的布局模式。定位布局：能够直接地定位元素的布局模式，定位元素奴基本与其他元素没有任何关系。CSS3引入的flex布局，主要思想是让容器有能力控制子项目的高度，宽度（设置顺序）。以最佳方式填充可用空间（主要是为了适应所有类型的显示...
2018-06-24 19:00:01
1282
原创 CSS - 定位
基本概念利用定位，可以准确的定义元素框相对于其正常位置，相对于父元素或者相对于浏览器的相对位置。position：static | relative | absolute | fixed static：对象遵循常规流。此时4个定位偏移属性不会被应用。relative：对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流...
2018-06-19 22:51:35
1369
原创 CSS - less
LESS 做为 CSS 的一种形式的扩展，它并没有阉割 CSS 的功能，而是在现有的 CSS 语法上，添加了很多额外的功能。我的less的测试是基于angular-cli基础学习的。首先明确，本地静态测试不了，必须依赖于服务器。npm install less@latest --save-devangular-cli.json修改如下："defaults": { "styleExt": "...
2018-06-13 17:20:07
651
原创 CSS边框应用 - 多重边框
当背景与边框还在草案阶段时，CSS 工作组内部有过很多讨论，关于是否应该允许多重边框，就像多重背景那样。不幸的是，当时一致认为这个特性并没有足够多的使用场景，而且网页开发者还可以使用border-image 来达到相同的效果。然而工作组忽略了一点：我们通常希望在CSS 代码层面以更灵活的方式来调整边框样式。可能会使用多个元素来模拟多重边框。box-shadowbox-shadow：none | &...
2018-06-08 14:05:43
779
原创 CSS边框应用 - 半透明边框
相信你以前肯定尝试过 CSS 中的半透明颜色， 比如 rgba() 和 hsla()。半透明颜色是 2009 年发生的一场重大变革。 从那以后， 我们终于可以在网页设计中使用它们了， 但是为了尝鲜还需要付出额外的代价。 .parent { background-color: teal; padding: 50px; height: 500px; width: 800...
2018-06-07 22:35:03
9353
原创 CSS - 文本属性
缩进文本将Web页面上一个段落的第一行缩进，这是一种最常用的文本格式化效果。text-indent：[ <length> | <percentage> ] && hanging? && each-line?适用于：块容器<length>：用长度值指定文本的缩进。可以为负值。<percentage>：用百分比指定文本的缩...
2018-06-06 23:59:33
1543
原创 CSS - 基本视觉格式化
CSS有一种基础的设计模式是盒模型，定义了Web页面中的元素是如何看作盒子来解析的。在CSS中主要有这几种盒模型：inline, inline-block，block, table, absolute position, float。每一个盒模型是由以下几个属性组合所决定的：display, position, float, width, height, margin, padding, bord...
2018-06-04 16:46:32
651
原创 JavaScript - Retry函数引起的思考
今天领导提了一个问题，需要创建一个retry函数，目的是为了执行某一个函数，当函数执行成功则返回正确的结果，如果执行失败则需要在1000ms内执行当前函数4次直到返回正确结果，如果1000ms内还没有返回结果，则需要返回错误提示信息。 第一版拿到这个问题之后，一顿操作猛如虎，其实没有什么用。var executeFunction = function() { var timespan = ...
2018-05-31 11:01:18
2365
原创 CSS - 字体
本文学习CSS字体的相关知识。CSS 字体系列，字体风格，使用字体，中文字体，字体加粗，字体大小，字体风格，字体变形，字体拉伸和调整（了解，几乎所有的浏览器不支持），复合属性font，@font-face。
2018-05-30 00:37:00
1204
原创 CSS - 值和单位应用（灵活的背景定位）
灵活的背景定位主要是为了应用之前学习值和单位引用中说的background-position，以及em。本篇文章中涉及到background-position, background-origin, calc()函数
2018-05-29 12:11:43
609
原创 CSS - 样式基本关键字
因为接下来就要开始学习具体的样式了，但是在学习样式之前，还是要将几个可能出现的样式关键字说明一下。样式关键字先看一个例子：先对下面的例子做一个简单的说明，首先可以查看文章确定下面的属性值的可继承性。下面例子中的可继承和不可继承的属性用来进行测试的，对于自定义的知识简单的将不同div展示出来。<!DOCTYPE html> <html lang="en"> &...
2018-05-28 19:02:49
3457
原创 CSS - 值和单位
CSS的所有工作中，基础都是单位。本章介绍数值，单位，颜色的相关知识。数字cssz中有两类数字：整数和实数。这些数字主要作为其他值类型的基础。html { width: 2000px;}百分数百分数值是一个计算得出的实数。其后跟一个百分比。百分数值几乎总是相对于另一个值。可能是同一个元素另一个属性的值，也可以是从父元素继承的一个值，或者是祖先元素的一个值。(1) 参照父元素宽度的元素ma...
2018-05-28 16:10:07
814
原创 CSS - 选择器优先级介绍
特殊性从CSS选择器文章中我们知道，与多种不同的方法选择元素。所以当我们使用多种规则的时候，我们必须要明确其中的优先级。但是在CSS选择器的规则中，称之为特殊性，特殊性越高，自然优先级越高。此时我们会先得到一个特殊性说明：！important 特殊性最高，详情访问重要性对于内联样式，加1000对于选中器中给定的ID属性值，加0100对于选择器中给定的类属性值，属性选择或伪类，加0010对于选择器中...
2018-05-27 15:54:10
15872
2
原创 CSS - 选择器应用（开关式按钮）
开关式按钮与复选框的行为十分相似，可以用来切换某个选项的开关状态：启用时，它是被按下的状态；停用时，它就是浮起的状态。在语义上，开关式按钮和复选框并没有本质上的差别，因此可以放心地使用这个技巧，不用担心语义上有问题。<!DOCTYPE html> <html lang="en"> <head> <meta charset...
2018-05-25 14:28:34
1430
原创 CSS - 选择器应用（自定义复选框 & 单选框）
当CSS 最初出现时，它对表单元素的样式控制力是极为有限的，而且现在仍然没有哪个CSS 规范明确定义了这方面的行为。不过这些年来，各种浏览器已经在逐步放开CSS 属性对表单控件的作用范围，从而允许我们设置大多数表单控件的样式。不幸的是，复选框和单选框不在此列。直到今天，这两种控件在绝大多数浏览器中仍然是几乎或完全无法设置样式的。<!DOCTYPE html> <html la...
2018-05-25 14:08:20
2708
原创 CSS - 选择器
CSS 的一个主要优势——尤其对设计者而言——是它能够轻松地把一组样式应用到同一类型的所有元素。印象不够深刻？想象这样的场景：通过编辑单行 CSS，你可以修改所有标题的颜色。不喜欢正在使用的蓝色？修改一行代码，把它们都变成紫色、黄色、栗色等等任何想要的颜色。这可以让你，设计师，专注于设计而不是繁琐的工作。下次会议中，有人想看绿色标题，你只需要编辑样式然而点击重新加载。瞧!几秒钟就完成了，每个人都可以看到。
2018-05-24 23:17:48
633
原创 CSS - 引入CSS
W3C标准定义WEB包含三个层- 结构层（HTML）- 表现层（CSS）- 行为层（Javascript）提倡“结构、表现、行为，三者分离，互不干涉”的WEB页面- 内容：让访问者浏览的信息- 结构：使内容具有逻辑性和易用性- 表现：修饰内容的外在表现使之看起来美观- 行为：与内容的交互操作CSS 概述CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML...
2018-05-24 00:06:12
1295
原创 React-Redux （部分源码解析以及图示）
Redux 是 JavaScript 状态容器，提供可预测化的状态管理。Redux 试图让 state 的变化变得可预测。本章文章初步学习React-Redux，包括基本介绍，部分源码解析，图示。
2018-05-22 09:56:07
1477
原创 React 组件生命周期
本文使用的是最新版本的react(16.3.2)， 以及react-router(4.2.0)React Router被拆分成三个包：react-router, react-router-dom, react-router-native先了解一个简单的东西，组件在ES6和ES5的不同写法：//ES6class Greeting extends React.Component { render...
2018-05-18 00:15:13
2317
原创 React 脚手架介绍以及路由基本信息
create-react-app创建项目npm install -g create-react-appcreate-react-app react-cli目录结构介绍图中红色框是我后来加的，暂时可以不考虑。public：里面包含了我们项目中的启动页面，react比较适合单页面项目应用开发。favico.ico: 这是用来表示：快捷方式 小图标。详情可以访问文章index.html: 初始页面。m...
2018-05-16 18:59:49
4367
原创 React 快速入门
声明式React 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图，在数据改变时 React 也可以高效地更新渲染界面。以声明式编写UI，可以让你的代码更加可靠，且方便调试。组件化创建好拥有各自状态的组件，再由组件构成更加复杂的界面。无需再用模版代码，通过使用JavaScript编写的组件你可以更好地传递数据，将应用状态和DOM拆分开来。一次学习，随处编写无论你现在正在使用什么技术栈，你都可以随时引入 React 开发新特性。
2018-05-14 15:02:04
1375
原创 C#学Java - Java web 基础
写在开头：本人以前做过ASP MVC，目前主要是前端，对于JAVA一直想去了解（因为目前项目是Angular 4 + Spring Boot），所以我还是想以c#的基础来尽快的了解到JAVA的开发。当然想短时间内去将JAVA全面了解很难，除非天资过人。我目前的计划如下：Java 语言基础 (这个需要自行去了解了)Java web 基础HibernateSpringSpring MVCSpring ...
2018-05-06 16:31:19
853
原创 JSON
Accept & Content-TypeAccept 请求头用来告知客户端可以处理的内容类型，这种内容类型用MIME类型来表示。借助内容协商机制, 服务器可以从诸多备选项中选择一项进行应用，并使用 Content-Type 应答头通知客户端它的选择。浏览器会基于请求的上下文来为这个请求头设置合适的值，比如获取一个CSS层叠样式表时值与获取图片、视频或脚本文件时的值是不同的。具体内容可以访...
2018-05-03 23:46:38
515
原创 Ajax
Ajax简介AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。XMLHttp...
2018-05-02 22:51:56
583
原创 HTTP BASIC认证和DIGEST认证 （案例）
BASIC认证BASIC 认证（基本认证）是从 HTTP/1.0 就定义的认证方式。即便是现在仍有一部分的网站会使用这种认证方式。是 Web 服务器与通信客户端之间进行的认证方式。核心步骤：步骤 1：当请求的资源需要BASIC认证时，服务器会随状态码401Authorization Required，返回带WWW-Authenticate首部字段的响应。该字段内包含认证的方式（BA
2018-04-25 14:16:43
6247
原创 HTTP Header
1. HTTP报文结构用于 HTTP 协议交互的信息被称为 HTTP 报文。请求端（客户端）的HTTP 报文叫做请求报文，响应端（服务器端）的叫做响应报文。HTTP 报文本身是由多行（用 CR+LF 作换行符）数据构成的字符串文本。HTTP 报文大致可分为报文首部和报文主体两块。两者由最初出现的空行（CR+LF）来划分。通常，并不一定要有报文主体。闲篇：\r是回车符,\n是
2018-04-23 15:24:12
3099
原创 HTTP协议及TCP分析
1. Http是无状态协议HTTP是一种不保存状态，即无状态（stateless）协议。HTTP协议自身不对请求和响应之间的通信状态进行保存。也就是说在HTTP这个级别，协议对于发送过的请求或响应都不做持久化处理。使用HTTP协议，每当有新的请求发送时，就会有对应的新响应产生。协议本身并不保留之前一切的请求或响应报文的信息。这是为了更快地处理大量事务，确保协议的可伸缩性，而特意把HTTP协议设计成...
2018-04-16 23:14:10
1719
原创 HTTP基础与DNS分析
1. http协议基础(1) HTTP名词解释Web 使用一种名为 HTTP（HyperText Transfer Protocol， 超文本传输协议）的协议作为规范， 完成从客户端到服务器端等一系列运作流程。 而协议是指规则的约定。可以说，Web是建立在HTTP 协议上通信的。*HTTP 通常被译为超文本传输协议，但这种译法并不严谨。严谨的译名应该为“超文本转移协议”。(2) 网络基础 TCP/...
2018-04-14 16:09:21
3532
原创 浏览器的多线程与js引擎的单线程
1. 浏览器的线程与进程(1) 进程与线程进程学术上说，进程是一个具有一定独立功能的程序在一个数据集上的一次动态执行的过程，是操作系统进行资源分配和调度的一个独立单位，是应用程序运行的载体。我们这里将进程比喻为工厂的车间，它代表CPU所能处理的单个任务。任一时刻，CPU总是运行一个进程，其他进程处于非运行状态。线程在早期的操作系统中并没有线程的概念，进程是能拥有资源和独立运
2018-04-10 14:53:43
6189
2
原创 JavaScript之正则表达式
正则表达式的意义在于通过开发人员编写匹配模式，然后可以通过这个匹配模式去校验用户的输入是否符合开发人员编写的模式。1. 创建正则表达式以及正则表达式的规则(1) 创建正则表达式a. 直接量语法/pattern/attributes这里的pattern是一个正则表达式而不是一个字符串，attributes 是一个可选的字符，包含属性 "g"、"i" 和 "m"，分别用于指定全局匹
2018-04-08 10:53:55
2103
原创 Angular4 - http
1. http(1) 简单示例http使用之前需要在当前导入HttpModel。然后看一个例子：//httml:Angular Orgs Members ID：{{member.id}} Name: {{member.login}} //JS:import {Component, OnInit} from '@
2018-04-03 23:50:31
3197
原创 前端性能优化 - 外部js和css加载对页面渲染首屏的影响
写在开头，本文中的内容均为自己测试得到的结果，如有不正之处，还望指出！开始今天的学习之前，先看一个概念。“页面渲染首屏”指的是什么？首先我们要明确这个概念。首先给大家看一个图片（百度搜索引擎的页面的加载过程）：火焰图模块可以看到三条竖的虚线蓝线代表DOM生成完毕，对应DOMContentLoaded event，绿线代表第一次绘制的时间，红色代表加载完成，对应load事件。那么我们所说的是什么呢？...
2018-03-26 23:10:40
2024
原创 前端性能优化 - chrome performance看浏览器渲染过程
最近一直想看看浏览器渲染以及前端性能优化的内容，可是在网上找到的都是文字描述，所以想通过网上的知识去对应到chrome performance看到的过程。先看一个非常简单的页面代码： Test dom load.
2018-03-24 17:33:51
14837
2
原创 Angular4 - 表单
1. 纯html5 表单纯HTML5表单提供功能如下显示表单项校验用户输入提交表单数据先看一个纯html5表单的例子： UserName: TelePhone: Password: datetime: ConfimrPassword: Register对于一个SPA应用来说，一般我们会需要我们的表单具有以下的几个功能：a.
2018-03-18 23:18:41
2466
原创 Angular4 - Rxjs基础
1. 下面这段话先看，留个印象就好（摘抄与中文文档）RxJS 是一个库，它通过使用 observable 序列来编写异步和基于事件的程序。它提供了一个核心类型 Observable，附属类型 (Observer、 Schedulers、 Subjects) 和受 [Array#extras] 启发的操作符 (map、filter、reduce、every, 等等)，这些数组操作符可以把异步事件
2018-03-14 23:22:24
2634
原创 JS设计模式 - 观察者模式与发布/订阅模式
观察者模式本质上是一种对象行为模式，而 发布/订阅模式本质上是一种架构模式，强调组件的作用。1. 观察者模式观察者模式是一种设计模式，其中一个对象（称为主体）根据对象（观察者）维护一个对象列表，自动通知他们对状态的任何更改。意图：定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。动机：将一个系统分割成一系列相互协作的类有一个副作用：需要维护相关...
2018-03-11 16:10:45
3490
原创 Angular4 - 指令
1. 指令分类组件(Component directive)：用于构建UI组件，继承于 Directive 类属性指令(Attribute directive): 用于改变组件的外观或行为结构指令(Structural directive): 用于动态添加或删除DOM元素来改变DOM布局组件相关的内容就不多说了，可以查看文章组件(1) 内置属性指令属性型指令会监
2018-03-03 23:59:41
13509
6
原创 Angular4 - 模板语法
Angular4 - 模板语法1. 模板语法的介绍HTML 是 Angular 模板的语言。几乎所有的HTML语法都是有效的模板语法。 但值得注意的例外是元素，它被禁用了，以阻止脚本注入攻击的风险。（实际上，只是被忽略了。）有些合法的 HTML 被用在模板中是没有意义的。、和元素这个舞台上中并没有扮演有用的角色。剩下的所有元素基本上就都一样用了。这些元素存在于index.html中
2018-03-03 12:56:35
3996
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人