首页

记录点滴,修炼自己。
0

智慧交通数据可视化展现Demo

简介demo基于csv等格式的数据处理结果文件,对数据进行可视化展现。 模块划分 目标区域驻留人数统计 高铁到发站人流量统计 地铁到发站人流量统计 行政区客流量分析 城市职住分布 交互方式及效果呈现 demo源码托管于github,详见Github gcidea/data-visualization 下载完整的文件目录,浏览器(推荐Chrome)打开根目录下index.html即可。五个模块

0

HTTP协议的持久连接-"keep-alive"与"persistent"

前言 “keep-alive”概述  HTTP协议采用“请求-应答”模式,当使用普通模式,即非KeepAlive模式时,每个请求/应答客户和服务器都要新建一个连接,完成之后立即断开连接(HTTP协议为无连接的协议);当使用Keep-Alive模式(又称持久连接、连接重用)时,Keep-Alive功能使客户端到服务器端的连接持续有效,当出现对服务器的后继请求时,Keep-Alive功能避免了建立

0

浏览器的文档模式-“标准模式”和“怪异模式”

前言  所谓的标准模式是指,浏览器按W3C标准解析执行代码;怪异模式则是使用浏览器自己的方式解析执行代码,因为不同浏览器解析执行的方式不一样,所以我们称之为怪异模式。浏览器解析时到底使用标准模式还是怪异模式,与你网页中的DTD声明直接相关,DTD声明定义了标准文档的类型(标准模式解析)文档类型,会使浏览器使用相应的方式加载网页并显示,忽略DTD声明,将使网页进入怪异模式(quirks mode)

0

JavaScript中的事件传播机制

前言  javascript与html的交互是通过事件实现的。在DOM2级模型中,为DOM元素绑定的事件有一套完整的事件传播机制,主要有3个阶段,本文进行小结。 ##

0

git pull 与 git fetch 的区别

概述引用网上的一张图来说明 对比git fetch1.git fetch这将更新git remote 中所有的远程repo 所包含分支的最新commit-id, 将其记录到.git/FETCH_HEAD文件中。 2.git fetch remote_repo这将更新名称为remote_repo 的远程repo上的所有branch的最新commit-id,将其记录。 3.git fetch r

0

$(document).ready与window.onload的区别

document.ready执行时机  只要页面DOM结构绘制完毕就执行,不必等到外部资源(图片,css等)加载完毕。 并且,在jquery中,$(function(){}) 和$(document).ready(function(){})两种写法是等价的。 特点  在同一个页面中可以写多次,会顺序执行,见下面测试。 window.onload执行时机  必须等到页面内包括图片的所有元素加载完

0

JavaScript异步编程案例

【转载】阮一峰 Javascript异步编程的4种方法 前言你可能知道,Javascript语言的执行环境是”单线程”(single thread)。 所谓”单线程”,就是指一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推。 这种模式的好处是实现起来比较简单,执行环境相对单纯;坏处是只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执

0

前端常用的几种图片格式及使用场景

基本概念矢量图与位图  矢量图是通过组成图形的一些基本元素,如点、线、面,边框,填充色等信息通过计算的方式来显示图形的。一般来说矢量图表示的是几何图形,文件相对较小,并且放大缩小不会失真。  位图又叫像素图或栅格图,它是通过记录图像中每一个点的颜色、深度、透明度等信息来存储和显示图像。一张位图就好比一幅大的拼图,只不过每个拼块都是一个纯色的像素点。位图的优点是利于显示色彩层次丰富的写实图像。缺点

0

可视化HTML5页面拖拽构建工具demo

简介  demo,在web端通过拖拽编排的方式快速定制活动H5页面,初步阶段完成。 交互方式及效果呈现 demo源码托管于github,详见Github gcidea/html5-draggable 使用流程1.拖拽页面布局至手机预览区2.根据不同类型的布局,点击可以编辑不同参数3.布局定制完成后可以向布局中拖拽添加素材4.页面定制完成后可以分享页面(TODO) 改进作为demo,目前还有

0

CSS3媒体查询@media功能使用总结

前言  媒体查询包含一个可选的媒体类型和零或多个表达式来限制使用媒体特性的样式表范围,这些表达式会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示文档所使用的设备的类型以及所有的表达式的值都是true,那么该媒体查询的结果就是true。例如width,height,color。CSS3中的Media queries让内容的呈现可以只针对特定范围的输出设备而不必去改变内容本身。

0

CSS中a:link、a:visited、a:hover、a:active的使用总结

前言伪类 伪元素 区别  可以理解为:伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到。伪类用一个冒号来表示,而伪元素则用两个冒号来表示。 概述:link 选择器对指向未被访问页面的链接设置样式,即页面初始化加载完成的时候。:visited 选择器用于选取已被访问的链接,即已经访问过的链接。:hover 选择器用于设置鼠标指针浮动到链接上时的样式,即鼠

0

使用原生js实现元素拖拽功能

前言  本篇仅对拖拽过程中核心几个事件监听的写法进行小结,不涉及页面样式效果的展现。 实现1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818

0

DOM级别

DOM目标  DOM标准的目标是让“任何一种程序设计语言”能操控使用“任何一种标记语言”编写出的“任何一份文档”。“操控”具体含义为能通过DOM提供的API对文档的内容、结构、样式进行访问和修改。 DOM分类 DOM核心:针对任何结构化文档的标准模型 DOM XML :只针对XML文档的标准模型 DOM HTML:只针对HTML文档的标准模型 DOM级别DOM Level 0  实际上没有

0

使用IntelliJ IDEA构建并运行Java Web的maven项目

前言  相比于eclipse,IntelliJ IDEA的功能更加丰富,稳定。本文对使用IntelliJ IDEA构建运行一个基于maven管理的Java Web项目的过程进行记录。 项目代码导出 菜单栏选择VCS -> Checkout from Version Control -> Subversion 新建关联的SVN仓库,一般是填写内网部署的代码管理服务器地址 根据实际情

0

CSS3的pointer-events属性及典型应用

概念  pointer-events是CSS3中的属性,最常用的有以下两个取值:1pointer-events:none|auto   设置“pointer-events:none”后元素永远不会成为鼠标事件的target。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。 应用1  当已经

0

JavaScript的call()、apply()、bind()方法对比总结

前言  JavaScript中的函数其实就是一种对象。函数对象也有自己的很多方法。其中,call()方法和apply()方法就是两个用来间接调用函数的方法。两个方法都允许显式地指明调用时的上下文环境(即this的值)。也就是说,这给我们提供了一种自由—任何函数可以作为任何对象的方法来进行调用。并且,两个方法也都允许显式地指明调用时需要用到的实参。函数经call()或apply()调用后会立即执行

0

使用HTML5的FileAPI完成图片预览上传

前言  html5提供了File API,可以很好用于图片上传和本地预览的使用场景。 html结构以下html片段表示了图片上传组件的文档结构,依赖Amaze UI样式框架。123456789101112131415161718192021222324252627282930313233343536<div class="am-g"> <div class="am-for

0

jQuery中$.when()方法和deferred对象相关总结

概述jQuery.when( deferreds )1.提供一种方法来执行零个或多个对象的回调函数, Deferred(延迟)对象通常表示异步事件。 2.如果没有参数传递给 jQuery.when(),它会返回一个resolved状态的Promise。 3.如果传递一个非Deferred或Promise对象给jQuery.when(),那么它会被当作是一个被解决(resolved)的延迟对象,并

0

使用JavaScript实现三级联动和实时搜索

前言  本篇仅对三级联动和实时搜索的核心给出说明,对于页面设计、整个工程结构等不做说明。 三级联动根据交互操作异步触发获取第一列数据12345678910111213141516171819202122232425262728293031323334353637383940//异步请求第一列数据-可选指标名称 $.ajax({ type: "POST", async:

0

CSS的颜色空间-Color Name、HEX、RGB、RGBA、HSL、HSLA

前言  通过CSS指定元素颜色是经常遇到的操作。在CSS中有多种表示颜色的方式。其中,RGBA、HSL、HSLA这三个是CSS3中新增的颜色表示方法。CSS提供了很多和color相关的属性,常用的主要有color、background-color、border-color、text-decoration-color等。下面的说明,均以对background-color的赋值为例。 Color