- 博客(12)
- 收藏
- 关注
RSS订阅原创 前后端模板
前端模板目的：显示与数据分离用模板之前：在js中字符串拼接数据，每一部分都要进行逻辑的拼接以及元素的创建等，繁琐费时。 1.字符串模板引擎原理：利用正则表达式识别模板标识，利用数据替换其中的标识符。步骤： 利用正则分解出普通字符串和模板标识符将模板标识符转换成指定的数据生成待执行的语句将数据填入执行，生成最终的字符串将字符串写入页面2.Dom模板引擎Vue.js angular
2016-10-28 16:24:32
2023
原创 ES6学习笔记（三）
1.Set和Map数据结构a.Set结构b.WeakSetc.Map结构d.WeakMap2.Classa.类的定义b.类的继承c.getter和setterd.静态方法
2016-08-23 17:14:00
395
原创 ES6学习笔记（二）
1. 数组的扩展a.Array.from()b.Array.of()c.copyWithin()d.find()和findIndex()……2.函数的扩展a.函数参数的默认值b.rest参数c.扩展运算符d.箭头函数
2016-08-22 15:49:19
420
原创 JavaScript代理模式之图片预加载
代理模式是为其他对象提供一种代理以控制对这个对象的访问。需要实现图片的预加载是因为当页面中的图片较大或网络不佳时，图片的位置可能会是一片空白，可能还会影响页面布局，因此通常都是用一张loading图片占位，等图片加载完成立即填充到img节点里，最近学习到了使用JavaScript代理模式来实现图片预加载。在html的body中放置几个img： <img src=""> <img src
2016-05-10 15:40:22
828
原创 CSS实现特殊背景效果
CSS3的出现使得一些以前需要用图片的背景效果也可以直接用CSS实现，今天分享一下三个用CSS3做的特殊背景。这三个例子都使用到了CSS3的线性渐变。下面以webkit引擎下的线性gradient用法为例：-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新线性渐变写法-webkit-gra
2016-04-27 20:34:12
2351
1
原创 JS实现全屏页面切换
以前在网上看到过一些全屏切换的页面，网上也有一些JQuery的插件能够实现全屏切换的效果，今天用原生js简单的做了一下这个效果。1.实现原理其实要做出这个效果还是挺简单的，下面来分析一下： 1.首先设置每个页面的div，让每个div的高度设置为100vh，即让每个div高度为窗口高度，或者可以设置每个div的高度为100%，但100%是相对父元素而言的，所以还需要给HTML、body的高度都设置为
2016-04-25 22:50:13
3952
1
原创 CSS3选择器总结
CSS3的选择器以及浏览器的支持情况。1.基本选择器通配选择器： * { margin:0;padding:0; } 元素选择器： p { color:red; } ID选择器： #id { …… } 类选择器： .class { …… } （也可以用带元素的类选择器：p.class { …… }） 群组选择器： selector1,selector2,……,selectorN
2016-04-13 23:33:55
494
原创 JS实现滚动监听以及滑动到顶部
以前做滚动监听都是用jquery来实现这样的效果，虽然用jquery实现起来很方便，但是还是想用原生js来实现一下。HTML代码：<div class="uptop" id="uptop"> <img src="images/up.png" id="to-top">//这里用了一个向上的箭头图片，用于表明返回顶部</div>CSS代码：.uptop{ positio
2016-03-26 15:33:06
25945
原创 CSS中box-reflect特性以及火狐浏览器替代方案
CSS3中的box-reflect特性可以实现倒影的效果，但是这个特性仅仅支持webkit内核的浏览器，即使到现在，其他浏览器依旧不支持这一特性，但是在火狐浏览器中有替代的方案可以实现倒影的效果。 下面首先介绍一下这一特性：box-reflect：none | <direction> <offset>? <mask-box-image>?direction 定义方向，取值包括 above 、 b
2016-03-16 20:47:06
2345
原创 CSS中absolute和relative的区别
好久没更新了，最近想把之前学习到的知识都做一个整理，可能大家在用CSS排版时容易有一个困惑就是position:relative和position:absolute有什么区别，之前也在不断地练习和查资料中弄清楚了他们的差别。下面简单说一下。1.position:relativerelative是相对定位，设置position为relative的元素，其top、left、right、bottom值会相
2016-03-04 23:15:09
1125
4
原创 ECharts时间轴与颜色
最近在做两个网页，用到了ECharts和Highstock图表，确实比Chart.js更漂亮、更直观。 今天分享一下我用ECharts的一些心得。1.用一条时间轴控制多个饼图ECharts的官网给出的实例说到时间轴的基本上都是一条时间轴控制一个图表，例如下图 但是有些时候我们可能需要用一个时间轴控制多个图，例如下图 其实大家多看看ECharts实例的代码，会发现做出这样一个效果并不难首先直
2015-10-01 12:21:03
7411
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人