跳到主要内容

· 阅读需 4 分钟
Array和String对象都有
在Array中  slice(i,[j])
i为开始截取的索引值,负数代表从末尾算起的索引值，-1为倒数第一个元素
j为结束的索引值，缺省时则获取从i到末尾的所有元素
参数返回：
返回索引值从i到j的数组，原数组不改变
在String中 slice(i,[j])
参数说明：
i为开始截取的索引值，负数代表从末尾算起的索引值，-1为倒数第一个字符
j为结束的索引值，缺省时则获取从i到末尾的所有字符

splice()

存在Array中     
方法向/从数组中添加/删除项目，然后返回被删除的项目。 该方法会改变原始数组
splice(index,howmany,item1,itemx )
index : 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany: 必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1...itemX : 可选。向数组添加的新项目。
返回值  Array  包含被删除项目的新数组，如果有的话。

substring()

在String中  substring(start,stop)
start：表示子字符串的开始位置，
stop：表示结束结果。
注意：第二个参数应该大于第一个参数。如果出现第一个参数大于第二个参数的情况，substring方法会自动更换两个参数的位置。 

substr()

在String中，substr（start，length）；
start：子字符串的开始位置，
length：子字符串的长度。

split() 字符串转数组

在String中 split（separator，howmany）
separator：必需。字符串或正则表达式，从该参数指定的地方分割 stringObject。
howmany： 可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。
返回值
一个字符串数组。该数组是通过在separator指定的边界处将字符串StringObject分割成子串创建的。返回的数组的字符串不包含separator自身
但是，如果 separator 是包含子表达式的正则表达式，那么返回的数组中包括与这些子表达式匹配的字串（但不包括与整个正则表达式匹配的文本）
与jion（）函数相反效果
var str = 'ab+c+de';
var a = str.split('+'); // [ab, c, de]
var b = str.split(''); //[a, b, +, c, +, d, e]

join() 数组转字符串

var a, b,c; 
a = new Array(a,b,c,d,e); 
b = a.join('-'); //a-b-c-d-e  使用-拼接数组元素
c = a.join(''); //abcde

多多记录，方便以后查看。

· 阅读需 1 分钟
在被选元素（里）的结尾插入内容
表达式：$(selector).append(content);
<p>Hello</p>
$('p').append('<b>Zyw</b>');
<p>
    Hello
    <b>Zyw</b>
</p>

appendTo()

在被选元素（里）的结尾插入内容
表达式：$(content).appendTo(selector);
<p>Hello</p>
$('<b>Zyw</b>').appendTo($('p'));
<p>
    Hello
    <b>Zyw</b>
</p>

prepend()

在被选元素（里）的开头插入内容
表达式：$(selector).prepend(content);
<p>Hello</p>
$('p').prepend('<b>Zyw</b>');
<p>
    <b>Zyw</b>
    Hello
</p>

prependTo()

在被选元素（里）的开头插入内容
表达式：$(content).prependTo(selector);
<p>Hello</p>
$('<b>Zyw</b>').prependTo($('p'));
<p>
    <b>Zyw</b>
    Hello
</p>

after()

在被选元素（外）之后插入内容
表达式：$(selector).after(content);
<p>Hello</p>
$('p').after('<b>Zyw</b>');
<p>Hello</p>
<b>Zyw</b>

before()

在被选元素（外）之前插入内容
表达式：$(selector).before(content);
<p>Hello</p>
$('p').before('<b>Zyw</b>');
<b>Zyw</b>
<p>Hello</p>

多多记录，方便以后查看。

· 阅读需 3 分钟

感觉过了人生过了好久，哪怕在没有时间也要抽出时间陪陪家人，不要失去了才知道珍惜。好久没有写博客了，因为个人原因在加上换了电脑不想在用jekyll写了，觉得太麻烦，这几天工作不是很忙就像在把博客弄回来，选择了Hexo,还是比较方便的。

下面只记录一下常用的Hexo命令，方便以后回看。

hexo new

新建一篇标题为 My New Post 的文章，因为标题里有空格，所以加上了引号。文章标题可以在对应 md 文件里改，新建时标题可以写的简单些。

$ hexo new "My New Post"

hexo server/hexo s

启动本地服务器，用于预览主题。默认地址： http://localhost:4000/hexo s 是 hexo server 的缩写，命令效果一致；预览的同时可以修改文章内容或主题代码，保存后刷新页面即可；对 Hexo 根目录 _config.yml 的修改，需要重启本地服务器后才能预览效果。 

$ hexo server/hexo s

hexo generate/hexo g

生成网站静态文件到默认设置的 public 文件夹。便于查看网站生成的静态文件或者手动部署网站；如果使用自动部署，不需要先执行该命令；hexo g 是 hexo generate 的缩写，命令效果一致。

$ hexo generate/hexo g

hexo deploy/hexo d

自动生成网站静态文件，并部署到设定的仓库。hexo d 是 hexo deploy 的缩写，命令效果一致。

$ hexo deploy/hexo d

hexo clean

清除缓存文件 db.json 和已生成的静态文件 public 。网站显示异常时可以执行这条命令试试。

$ hexo clean

· 阅读需 16 分钟

本文介绍的是将百度地图和echarts3版本进行结合使用，首先你需要有百度的AK，没有的话去百度地图开放平台http://lbsyun.baidu.com/,用百度账号（没有的申请一个）,让后去申请一个ak吧，具体怎么做，可以去度娘一下，好多的，进去找到JavaScript API里面也会有申请方法的，很简单的。

然后去echarts3官网去下载echarts3吧http://echarts.baidu.com/download.html

然后我们还需要一个bmap.js，大家可以点击这里 下载bmap.js 在自己电脑中新建一个bmap.js的文件，把他们复制进去

先看一下效果吧 点击查看

头部引入

<head>
    <meta charset="UTF-8">
    <title>百度地图+echarts3</title>
    <script src="echarts.min.js"></script>//引入echarts
    <script src="bmap.js"></script>//引入bmap
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=F28AEuS9TLiQeFkEPrktcpk44toP1D0e"></script>//引入你申请的ak
</head>

js部分代码

在这里就把有用的拿出来说一下，下面会给大家所有的代码。

   bmap: {//这里就是写百度地图的一些场景
           center: [104.114129, 37.550339],//中心显示位置，经纬度
           zoom: 5,//放大倍数
           roam: true,//允许放大
           mapStyle: {
               styleJson: [{//水的颜色
                   'featureType': 'water',
                   'elementType': 'all',
                   'stylers': {
                       'color': '#d1d1d1'
                   }
               }, {//土地颜色
                   'featureType': 'land',
                   'elementType': 'all',
                   'stylers': {
                       'color': '#f3f3f3'
                   }
               }, {//下面这些标签都是调整地图的，大家可以自行研究
                   'featureType': 'railway',
                   'elementType': 'all',
                   'stylers': {
                       'visibility': 'off'
                   }
               }, {
                   'featureType': 'highway',
                   'elementType': 'all',
                   'stylers': {
                       'color': '#fdfdfd'
                   }
               }, {
                   'featureType': 'highway',
                   'elementType': 'labels',
                   'stylers': {
                       'visibility': 'off'
                   }
               }, {
                   'featureType': 'arterial',
                   'elementType': 'geometry',
                   'stylers': {
                       'color': '#fefefe'
                   }
               }, {
                   'featureType': 'arterial',
                   'elementType': 'geometry.fill',
                   'stylers': {
                       'color': '#fefefe'
                   }
               }, {
                   'featureType': 'poi',
                   'elementType': 'all',
                   'stylers': {
                       'visibility': 'off'
                   }
               }, {
                   'featureType': 'green',
                   'elementType': 'all',
                   'stylers': {
                       'visibility': 'off'
                   }
               }, {
                   'featureType': 'subway',
                   'elementType': 'all',
                   'stylers': {
                       'visibility': 'off'
                   }
               }, {
                   'featureType': 'manmade',
                   'elementType': 'all',
                   'stylers': {
                       'color': '#d1d1d1'
                   }
               }, {
                   'featureType': 'local',
                   'elementType': 'all',
                   'stylers': {
                       'color': '#d1d1d1'
                   }
               }, {
                   'featureType': 'arterial',
                   'elementType': 'labels',
                   'stylers': {
                       'visibility': 'off'
                   }
               }, {
                   'featureType': 'boundary',
                   'elementType': 'all',
                   'stylers': {
                       'color': '#fefefe'
                   }
               }, {
                   'featureType': 'building',
                   'elementType': 'all',
                   'stylers': {
                       'color': '#d1d1d1'
                   }
               }, {
                   'featureType': 'label',
                   'elementType': 'labels.text.fill',
                   'stylers': {
                       'color': '#999999'
                   }
               }]
           }
       },
       series : [//下面的就是echarts的参数设置
           {
               name: '名称',
               type: 'scatter',//散点（气泡）图
               coordinateSystem: 'bmap',
               data: convertData(data),
               symbolSize: 6,
               label: {
                   normal: {
                       formatter: '{b}',
                       position: 'right',
                       show: false
                   },
                   emphasis: {
                       show: true
                   }
               },
               itemStyle: {
                   normal: {
                       color: 'purple'
                   }
               }
           },
            {
               name: 'Top 5',
               type: 'effectScatter',//带有涟漪特效动画的散点（气泡）图
               coordinateSystem: 'bmap',
               data: convertData(data.sort(function (a, b) {
                   return b.value - a.value;
               }).slice(0, 6)),
               symbolSize: function (val) {
                   return val[2] / 10;
               },
               showEffectOn: 'render',
               rippleEffect: {
                   brushType: 'stroke'
               },
               hoverAnimation: true,
               label: {
                   normal: {
                       formatter: '{b}',
                       position: 'right',
                       show: true
                   }
               },
               itemStyle: {
                   normal: {
                       color: 'purple',
                       shadowBlur: 10,
                       shadowColor: '#333'
                   }
               },
               zlevel: 1
           }
       ]

all代码

所有的代码都在这了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度地图+echarts3</title>
    <script src="echarts.min.js"></script>
    <script src="bmap.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=F28AEuS9TLiQeFkEPrktcpk44toP1D0e"></script>
</head>
<body>
    <div id="map" style="width: 800px;height: 600px;"></div>
</body>
<script>
    var myChart = echarts.init(document.getElementById('map'));
    var data = [
        {name: '海门', value: 9},
        {name: '鄂尔多斯', value: 12},
        {name: '招远', value: 12},
        {name: '舟山', value: 12},
        {name: '齐齐哈尔', value: 14},
        {name: '盐城', value: 15},
        {name: '赤峰', value: 16},
        {name: '青岛', value: 18},
        {name: '乳山', value: 18},
        {name: '金昌', value: 19},
        {name: '泉州', value: 21},
        {name: '莱西', value: 21},
        {name: '日照', value: 21},
        {name: '胶南', value: 22},
        {name: '南通', value: 23},
        {name: '拉萨', value: 24},
        {name: '云浮', value: 24},
        {name: '梅州', value: 25},
        {name: '文登', value: 25},
        {name: '上海', value: 25},
        {name: '攀枝花', value: 25},
        {name: '威海', value: 25},
        {name: '承德', value: 25},
        {name: '厦门', value: 26},
        {name: '汕尾', value: 26},
        {name: '潮州', value: 26},
        {name: '丹东', value: 27},
        {name: '太仓', value: 27},
        {name: '曲靖', value: 27},
        {name: '烟台', value: 28},
        {name: '福州', value: 29},
        {name: '瓦房店', value: 30},
        {name: '即墨', value: 30},
        {name: '抚顺', value: 31},
        {name: '玉溪', value: 31},
        {name: '张家口', value: 31},
        {name: '阳泉', value: 31},
        {name: '莱州', value: 32},
        {name: '湖州', value: 32},
        {name: '汕头', value: 32},
        {name: '昆山', value: 33},
        {name: '宁波', value: 33},
        {name: '湛江', value: 33},
        {name: '揭阳', value: 34},
        {name: '荣成', value: 34},
        {name: '连云港', value: 35},
        {name: '葫芦岛', value: 35},
        {name: '常熟', value: 36},
        {name: '东莞', value: 36},
        {name: '河源', value: 36},
        {name: '淮安', value: 36},
        {name: '泰州', value: 36},
        {name: '南宁', value: 37},
        {name: '营口', value: 37},
        {name: '惠州', value: 37},
        {name: '江阴', value: 37},
        {name: '蓬莱', value: 37},
        {name: '韶关', value: 38},
        {name: '嘉峪关', value: 38},
        {name: '广州', value: 38},
        {name: '延安', value: 38},
        {name: '太原', value: 39},
        {name: '清远', value: 39},
        {name: '中山', value: 39},
        {name: '昆明', value: 39},
        {name: '寿光', value: 40},
        {name: '盘锦', value: 40},
        {name: '长治', value: 41},
        {name: '深圳', value: 41},
        {name: '珠海', value: 42},
        {name: '宿迁', value: 43},
        {name: '咸阳', value: 43},
        {name: '铜川', value: 44},
        {name: '平度', value: 44},
        {name: '佛山', value: 44},
        {name: '海口', value: 44},
        {name: '江门', value: 45},
        {name: '章丘', value: 45},
        {name: '肇庆', value: 46},
        {name: '大连', value: 47},
        {name: '临汾', value: 47},
        {name: '吴江', value: 47},
        {name: '石嘴山', value: 49},
        {name: '沈阳', value: 50},
        {name: '苏州', value: 50},
        {name: '茂名', value: 50},
        {name: '嘉兴', value: 51},
        {name: '长春', value: 51},
        {name: '胶州', value: 52},
        {name: '银川', value: 52},
        {name: '张家港', value: 52},
        {name: '三门峡', value: 53},
        {name: '锦州', value: 54},
        {name: '南昌', value: 54},
        {name: '柳州', value: 54},
        {name: '三亚', value: 54},
        {name: '自贡', value: 56},
        {name: '吉林', value: 56},
        {name: '阳江', value: 57},
        {name: '泸州', value: 57},
        {name: '西宁', value: 57},
        {name: '宜宾', value: 58},
        {name: '呼和浩特', value: 58},
        {name: '成都', value: 58},
        {name: '大同', value: 58},
        {name: '镇江', value: 59},
        {name: '桂林', value: 59},
        {name: '张家界', value: 59},
        {name: '宜兴', value: 59},
        {name: '北海', value: 60},
        {name: '西安', value: 61},
        {name: '金坛', value: 62},
        {name: '东营', value: 62},
        {name: '牡丹江', value: 63},
        {name: '遵义', value: 63},
        {name: '绍兴', value: 63},
        {name: '扬州', value: 64},
        {name: '常州', value: 64},
        {name: '潍坊', value: 65},
        {name: '重庆', value: 66},
        {name: '台州', value: 67},
        {name: '南京', value: 67},
        {name: '滨州', value: 70},
        {name: '贵阳', value: 71},
        {name: '无锡', value: 71},
        {name: '本溪', value: 71},
        {name: '克拉玛依', value: 72},
        {name: '渭南', value: 72},
        {name: '马鞍山', value: 72},
        {name: '宝鸡', value: 72},
        {name: '焦作', value: 75},
        {name: '句容', value: 75},
        {name: '北京', value: 79},
        {name: '徐州', value: 79},
        {name: '衡水', value: 80},
        {name: '包头', value: 80},
        {name: '绵阳', value: 80},
        {name: '乌鲁木齐', value: 84},
        {name: '枣庄', value: 84},
        {name: '杭州', value: 84},
        {name: '淄博', value: 85},
        {name: '鞍山', value: 86},
        {name: '溧阳', value: 86},
        {name: '库尔勒', value: 86},
        {name: '安阳', value: 90},
        {name: '开封', value: 90},
        {name: '济南', value: 92},
        {name: '德阳', value: 93},
        {name: '温州', value: 95},
        {name: '九江', value: 96},
        {name: '邯郸', value: 98},
        {name: '临安', value: 99},
        {name: '兰州', value: 99},
        {name: '沧州', value: 100},
        {name: '临沂', value: 103},
        {name: '南充', value: 104},
        {name: '天津', value: 105},
        {name: '富阳', value: 106},
        {name: '泰安', value: 112},
        {name: '诸暨', value: 112},
        {name: '郑州', value: 113},
        {name: '哈尔滨', value: 114},
        {name: '聊城', value: 116},
        {name: '芜湖', value: 117},
        {name: '唐山', value: 119},
        {name: '平顶山', value: 119},
        {name: '邢台', value: 119},
        {name: '德州', value: 120},
        {name: '济宁', value: 120},
        {name: '荆州', value: 127},
        {name: '宜昌', value: 130},
        {name: '义乌', value: 132},
        {name: '丽水', value: 133},
        {name: '洛阳', value: 134},
        {name: '秦皇岛', value: 136},
        {name: '株洲', value: 143},
        {name: '石家庄', value: 147},
        {name: '莱芜', value: 148},
        {name: '常德', value: 152},
        {name: '保定', value: 153},
        {name: '湘潭', value: 154},
        {name: '金华', value: 157},
        {name: '岳阳', value: 169},
        {name: '长沙', value: 175},
        {name: '衢州', value: 177},
        {name: '廊坊', value: 193},
        {name: '菏泽', value: 194},
        {name: '合肥', value: 229},
        {name: '武汉', value: 273},
        {name: '大庆', value: 279}
    ];
    var geoCoordMap = {
        '海门':[121.15,31.89],
        '鄂尔多斯':[109.781327,39.608266],
        '招远':[120.38,37.35],
        '舟山':[122.207216,29.985295],
        '齐齐哈尔':[123.97,47.33],
        '盐城':[120.13,33.38],
        '赤峰':[118.87,42.28],
        '青岛':[120.33,36.07],
        '乳山':[121.52,36.89],
        '金昌':[102.188043,38.520089],
        '泉州':[118.58,24.93],
        '莱西':[120.53,36.86],
        '日照':[119.46,35.42],
        '胶南':[119.97,35.88],
        '南通':[121.05,32.08],
        '拉萨':[91.11,29.97],
        '云浮':[112.02,22.93],
        '梅州':[116.1,24.55],
        '文登':[122.05,37.2],
        '上海':[121.48,31.22],
        '攀枝花':[101.718637,26.582347],
        '威海':[122.1,37.5],
        '承德':[117.93,40.97],
        '厦门':[118.1,24.46],
        '汕尾':[115.375279,22.786211],
        '潮州':[116.63,23.68],
        '丹东':[124.37,40.13],
        '太仓':[121.1,31.45],
        '曲靖':[103.79,25.51],
        '烟台':[121.39,37.52],
        '福州':[119.3,26.08],
        '瓦房店':[121.979603,39.627114],
        '即墨':[120.45,36.38],
        '抚顺':[123.97,41.97],
        '玉溪':[102.52,24.35],
        '张家口':[114.87,40.82],
        '阳泉':[113.57,37.85],
        '莱州':[119.942327,37.177017],
        '湖州':[120.1,30.86],
        '汕头':[116.69,23.39],
        '昆山':[120.95,31.39],
        '宁波':[121.56,29.86],
        '湛江':[110.359377,21.270708],
        '揭阳':[116.35,23.55],
        '荣成':[122.41,37.16],
        '连云港':[119.16,34.59],
        '葫芦岛':[120.836932,40.711052],
        '常熟':[120.74,31.64],
        '东莞':[113.75,23.04],
        '河源':[114.68,23.73],
        '淮安':[119.15,33.5],
        '泰州':[119.9,32.49],
        '南宁':[108.33,22.84],
        '营口':[122.18,40.65],
        '惠州':[114.4,23.09],
        '江阴':[120.26,31.91],
        '蓬莱':[120.75,37.8],
        '韶关':[113.62,24.84],
        '嘉峪关':[98.289152,39.77313],
        '广州':[113.23,23.16],
        '延安':[109.47,36.6],
        '太原':[112.53,37.87],
        '清远':[113.01,23.7],
        '中山':[113.38,22.52],
        '昆明':[102.73,25.04],
        '寿光':[118.73,36.86],
        '盘锦':[122.070714,41.119997],
        '长治':[113.08,36.18],
        '深圳':[114.07,22.62],
        '珠海':[113.52,22.3],
        '宿迁':[118.3,33.96],
        '咸阳':[108.72,34.36],
        '铜川':[109.11,35.09],
        '平度':[119.97,36.77],
        '佛山':[113.11,23.05],
        '海口':[110.35,20.02],
        '江门':[113.06,22.61],
        '章丘':[117.53,36.72],
        '肇庆':[112.44,23.05],
        '大连':[121.62,38.92],
        '临汾':[111.5,36.08],
        '吴江':[120.63,31.16],
        '石嘴山':[106.39,39.04],
        '沈阳':[123.38,41.8],
        '苏州':[120.62,31.32],
        '茂名':[110.88,21.68],
        '嘉兴':[120.76,30.77],
        '长春':[125.35,43.88],
        '胶州':[120.03336,36.264622],
        '银川':[106.27,38.47],
        '张家港':[120.555821,31.875428],
        '三门峡':[111.19,34.76],
        '锦州':[121.15,41.13],
        '南昌':[115.89,28.68],
        '柳州':[109.4,24.33],
        '三亚':[109.511909,18.252847],
        '自贡':[104.778442,29.33903],
        '吉林':[126.57,43.87],
        '阳江':[111.95,21.85],
        '泸州':[105.39,28.91],
        '西宁':[101.74,36.56],
        '宜宾':[104.56,29.77],
        '呼和浩特':[111.65,40.82],
        '成都':[104.06,30.67],
        '大同':[113.3,40.12],
        '镇江':[119.44,32.2],
        '桂林':[110.28,25.29],
        '张家界':[110.479191,29.117096],
        '宜兴':[119.82,31.36],
        '北海':[109.12,21.49],
        '西安':[108.95,34.27],
        '金坛':[119.56,31.74],
        '东营':[118.49,37.46],
        '牡丹江':[129.58,44.6],
        '遵义':[106.9,27.7],
        '绍兴':[120.58,30.01],
        '扬州':[119.42,32.39],
        '常州':[119.95,31.79],
        '潍坊':[119.1,36.62],
        '重庆':[106.54,29.59],
        '台州':[121.420757,28.656386],
        '南京':[118.78,32.04],
        '滨州':[118.03,37.36],
        '贵阳':[106.71,26.57],
        '无锡':[120.29,31.59],
        '本溪':[123.73,41.3],
        '克拉玛依':[84.77,45.59],
        '渭南':[109.5,34.52],
        '马鞍山':[118.48,31.56],
        '宝鸡':[107.15,34.38],
        '焦作':[113.21,35.24],
        '句容':[119.16,31.95],
        '北京':[116.46,39.92],
        '徐州':[117.2,34.26],
        '衡水':[115.72,37.72],
        '包头':[110,40.58],
        '绵阳':[104.73,31.48],
        '乌鲁木齐':[87.68,43.77],
        '枣庄':[117.57,34.86],
        '杭州':[120.19,30.26],
        '淄博':[118.05,36.78],
        '鞍山':[122.85,41.12],
        '溧阳':[119.48,31.43],
        '库尔勒':[86.06,41.68],
        '安阳':[114.35,36.1],
        '开封':[114.35,34.79],
        '济南':[117,36.65],
        '德阳':[104.37,31.13],
        '温州':[120.65,28.01],
        '九江':[115.97,29.71],
        '邯郸':[114.47,36.6],
        '临安':[119.72,30.23],
        '兰州':[103.73,36.03],
        '沧州':[116.83,38.33],
        '临沂':[118.35,35.05],
        '南充':[106.110698,30.837793],
        '天津':[117.2,39.13],
        '富阳':[119.95,30.07],
        '泰安':[117.13,36.18],
        '诸暨':[120.23,29.71],
        '郑州':[113.65,34.76],
        '哈尔滨':[126.63,45.75],
        '聊城':[115.97,36.45],
        '芜湖':[118.38,31.33],
        '唐山':[118.02,39.63],
        '平顶山':[113.29,33.75],
        '邢台':[114.48,37.05],
        '德州':[116.29,37.45],
        '济宁':[116.59,35.38],
        '荆州':[112.239741,30.335165],
        '宜昌':[111.3,30.7],
        '义乌':[120.06,29.32],
        '丽水':[119.92,28.45],
        '洛阳':[112.44,34.7],
        '秦皇岛':[119.57,39.95],
        '株洲':[113.16,27.83],
        '石家庄':[114.48,38.03],
        '莱芜':[117.67,36.19],
        '常德':[111.69,29.05],
        '保定':[115.48,38.85],
        '湘潭':[112.91,27.87],
        '金华':[119.64,29.12],
        '岳阳':[113.09,29.37],
        '长沙':[113,28.21],
        '衢州':[118.88,28.97],
        '廊坊':[116.7,39.53],
        '菏泽':[115.480656,35.23375],
        '合肥':[117.27,31.86],
        '武汉':[114.31,30.52],
        '大庆':[125.03,46.58]
    };

    var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value)
                });
            }
        }
        return res;
    };

    option = {
        title: {
            text: '全国主要城市空气质量 - 百度地图',
            subtext: 'data from PM25.in',
            sublink: 'http://www.pm25.in',
            left: 'center'
        },
        tooltip : {
            trigger: 'item'
        },
        bmap: {
            center: [104.114129, 37.550339],
            zoom: 5,
            roam: true,
            mapStyle: {
                styleJson: [{
                    'featureType': 'water',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#d1d1d1'
                    }
                }, {
                    'featureType': 'land',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#f3f3f3'
                    }
                }, {
                    'featureType': 'railway',
                    'elementType': 'all',
                    'stylers': {
                        'visibility': 'off'
                    }
                }, {
                    'featureType': 'highway',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#fdfdfd'
                    }
                }, {
                    'featureType': 'highway',
                    'elementType': 'labels',
                    'stylers': {
                        'visibility': 'off'
                    }
                }, {
                    'featureType': 'arterial',
                    'elementType': 'geometry',
                    'stylers': {
                        'color': '#fefefe'
                    }
                }, {
                    'featureType': 'arterial',
                    'elementType': 'geometry.fill',
                    'stylers': {
                        'color': '#fefefe'
                    }
                }, {
                    'featureType': 'poi',
                    'elementType': 'all',
                    'stylers': {
                        'visibility': 'off'
                    }
                }, {
                    'featureType': 'green',
                    'elementType': 'all',
                    'stylers': {
                        'visibility': 'off'
                    }
                }, {
                    'featureType': 'subway',
                    'elementType': 'all',
                    'stylers': {
                        'visibility': 'off'
                    }
                }, {
                    'featureType': 'manmade',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#d1d1d1'
                    }
                }, {
                    'featureType': 'local',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#d1d1d1'
                    }
                }, {
                    'featureType': 'arterial',
                    'elementType': 'labels',
                    'stylers': {
                        'visibility': 'off'
                    }
                }, {
                    'featureType': 'boundary',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#fefefe'
                    }
                }, {
                    'featureType': 'building',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#d1d1d1'
                    }
                }, {
                    'featureType': 'label',
                    'elementType': 'labels.text.fill',
                    'stylers': {
                        'color': '#999999'
                    }
                }]
            }
        },
        series : [
            {
                name: 'pm2.5',
                type: 'scatter',
                coordinateSystem: 'bmap',
                data: convertData(data),
                symbolSize: function (val) {
                    return val[2] / 10;
                },
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: false
                    },
                    emphasis: {
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        color: 'purple'
                    }
                }
            },
            {
                name: 'Top 5',
                type: 'effectScatter',
                coordinateSystem: 'bmap',
                data: convertData(data.sort(function (a, b) {
                    return b.value - a.value;
                }).slice(0, 6)),
                symbolSize: function (val) {
                    return val[2] / 10;
                },
                showEffectOn: 'render',
                rippleEffect: {
                    brushType: 'stroke'
                },
                hoverAnimation: true,
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        color: 'purple',
                        shadowBlur: 10,
                        shadowColor: '#333'
                    }
                },
                zlevel: 1
            }
        ]
    };
    myChart.setOption(option);
</script>
</html>

今天就写到这里了，欢迎大家交流讨论，指错。

· 阅读需 5 分钟

上来先磨叨两句，用这个选择器已经很久了，但是一直用的都是:nth-of-type这个，:nth-child只是记得，几乎没有用过，最开始知道这两个选择器的时候，肯定两个都用过，但最后一直就用:nth-of-type了，原因我也忘记了，前几天用到:nth-of-type这个选择器，突然忘了他和:nth-child的具体区别是什么了，所以在这里，在回顾一下。

child和of-type 家族

child 家族
:first-child        p:first-child       选择属于父元素的第一个子元素的每个 <p> 元素。
:nth-child(n)       p:nth-child(2)      选择属于其父元素的第二个子元素的每个 <p> 元素。
:nth-last-child(n)  p:nth-last-child(2) 同上，从最后一个子元素开始计数。
:last-child         p:last-child        选择属于其父元素最后一个子元素每个 <p> 元素。
:only-child         p:only-child        选择属于其父元素的唯一子元素的每个 <p> 元素。
of-type 家族
:first-of-type          p:first-of-type         选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
:nth-of-type(n)         p:nth-of-type(2)        选择属于其父元素第二个 <p> 元素的每个 <p> 元素。
:nth-last-of-type(n)    p:nth-last-of-type(2)   同上，但是从最后一个子元素开始计数。
:last-of-type           p:last-of-type          选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
:only-of-type           p:only-of-type          选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

:nth-of-type(n)和:nth-child(n)对比

这两个家族别的选择器还好说，就:nth-of-type(n)和:nth-child(n)他们俩用的时候还会有一些问题，下面用具体例子来体会一下。

<body>
<style>
p:nth-child(2){
    background: red;
}
p:nth-of-type(2){
    background: red;
}
</style>
<div>
    <p>我是p1</p>
    <p>我是p2</p>
</div>
</body>

此时分别使用这两个css选择器进行渲染时，页面显示的效果是一样的，look

然后我们稍稍改一下再看一下效果

<body>
<style>
p:nth-child(2){
    background: red;
}
p:nth-of-type(2){
    background: red;
}
</style>
<div>
    <div>我是div1</div>
    <p>我是p1</p>
    <p>我是p2</p>
</div>
</body>

这一下就不友好了，字面理解一下啊，child儿子嘛，第二个儿子，还是个p标签，正好给你变个色吧。而p:nth-of-type(2)他就会去找p标签的第二个，这样我的心里感觉才是我想要的结果 我们在加一个div看看啊

<body>
<style>
p:nth-child(2){
    background: red;
}
/*p:nth-of-type(2){
    background: red;
}*/
</style>
<div>
    <div>我是div1</div>
    <div>我是div2</div>
    <p>我是p1</p>
    <p>我是p2</p>
</div>
</body>

看吧，第二个儿子，没有p标签啊，那算了吧，谁也不给上色了。

个人建议找元素，还是用:nth-of-type()，毕竟不用太费脑子，而且照的还快、准、稳。

浏览器兼容情况：所有主流浏览器均支持，除了 IE8 及更早的版本。毕竟是css3新添加的嘛。

上面详细的对比了一组，下面在简单对比一下别的

p:first-child和p:first-of-type

p:nth-last-child(n)和p:nth-last-of-type(n)

注意哦：last是从后往前数楼！！

p:last-child和p:last-of-type

p:only-child和p:only-of-type

因为他是only了，这里div和p都是两个所以不成立，就都不上色了。改成这样在看看，

<body>
<style>
p:only-child{background: red;}
p:only-of-type{background: red;}
</style>
<div>
    <div>我是唯一的div</div>
    <p>我是唯一的p</p>
</div>

总结一下

是不是有点感觉了，小小的总结一下 child家的成员在进行选择的时候不仅要选择元素，而且还要选择当前位置对不对，only的话那就只能有p(拿p举一下例子啊)，div哥哥来了就不高兴了，就不给你显示。

of-type家的成员在进行选择的时候不管你里面有哪个哥哥弟弟p、div、span，选择器元素写好了，他就会按照当前的元素进行查找。

个人还是倾向于of-type家的。快、准、稳，哈哈，今天就到这了，忙了好久，终于有点时间了，上来晃一圈。

如有错误之处，欢迎指正。

· 阅读需 5 分钟

像 calc() var() 这样的，乍一看还以为是函数呢，其实他们都是属于CSS的，calc()做自适应布局还是很好用的，其实用box-sizing也是可以的，但是calc()强大到，可以用公式做计算，+、-、*、/，如果你在你点电脑打开win+r输入calc回车，你会发现，系统会自动调出计算器来。 其实calc()是css3的一个新功能，可以用来做响应式布局，响应式布局宽度是变化的，这样用calc()就可以实现宽度的动态加载。

css calc() 语法

calc()语法非常简单，就像我们小时候学加 （+）、减（-）、乘（*）、除（/）一样，使用数学表达式来表示：

.ele {
  width: calc(expression);
}

其中"expression"是一个表达式，用来计算长度的表达式。

calc()的运算规则

calc()使用通用的数学运算规则，但是也提供更智能的功能：

使用“+”、“-”、“*” 和 “/”四则运算；
1.可以使用百分比、px、em、rem等单位；
2.可以混合使用各种单位进行计算；
3.表达式中有“+”和“-”时，其前后必须要有空格，没有空格的写法是错误的；
4.表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。

calc()实战小例子

<style>
    *{
        margin:0;
        padding:0;
    }
    body{
        width:100%;
        background-color: #333;
    }
    div{
        width:100%;
        height:200px;
        padding: 20px;
        background-color: #666;
    }
</style>
<body>
    <div></div>
</body>

此时就会发现div把body的身体挤破了，出现横向滚动条了，解决方法可以用 box-sizing: border-box;要是用calc()就可以这样写

<style>
    *{
        margin:0;
        padding:0;
    }
    body{
        width:100%;
        background-color: #333;
    }
    div{
        `width:calc(100% - 20px * 2);`
        height:200px;
        padding: 20px;
        background-color: #666;
    }
</style>
<body>
    <div></div>
</body>

这样也是可以解决的，calc()做响应式开发是很不错的。

calc()响应式开发例子

做响应式开啊还需要使用到上一章所说道的变量var(),这两个相结合可以很便捷的进行响应式开发，直接上代码吧。

你也可以点击这里然后变化浏览器窗口大小进行预览
<style>
    :root{
        --columns: 3;
    }
    .box{
        width:80%;
        min-width: 300px;
        margin: auto;
        border: 2px solid #333;
        overflow: hidden;
    }
    .calc{
        width: calc(100% / var(--columns) - 10px * 2);
        background: #aaa;
        margin: 10px;
        float: left;
    }
    *{
        margin:0;
        padding:0;
    }
   h5{
       width:100%;
       height:60px;
       text-align: center;
       line-height:60px;
       font-size: 26px;
       color: #fff;
   }
   p{
       padding-top:60px;
       height: 140px;
   }
    img{
        display: block;
        margin: auto;
    }
    @media screen and ( max-width: 992px) {
        :root{
            --columns: 2;
        }
    }
   @media screen and ( max-width: 768px) {
       :root{
           --columns: 1;
       }
   }
</style>
<body style="background: #666">
    <div class="box">
        <div class="calc">
            <h5>子鼠</h5>
            <p><img src="img/shu.png" alt=""></p>
        </div>
        <div class="calc">
            <h5>丑牛</h5>
            <p><img src="img/niu.png" alt=""></p>
        </div>
        <div class="calc">
            <h5>寅虎</h5>
            <p><img src="img/hu.png" alt=""></p>
        </div>
        <div class="calc">
            <h5>卯兔</h5>
            <p><img src="img/tu.png" alt=""></p>
        </div>
        <div class="calc">
            <h5>辰龙</h5>
            <p><img src="img/long.png" alt=""></p>
        </div>
        <div class="calc">
            <h5>巳蛇</h5>
            <p><img src="img/she.png" alt=""></p>
        </div>
        <div class="calc">
            <h5>午马</h5>
            <p><img src="img/ma.png" alt=""></p>
        </div>
        <div class="calc">
            <h5>未羊</h5>
            <p><img src="img/yang.png" alt=""></p>
        </div>
        <div class="calc">
            <h5>申猴</h5>
            <p><img src="img/hou.png" alt=""></p>
        </div>
        <div class="calc">
            <h5>酉鸡</h5>
            <p><img src="img/ji.png" alt=""></p>
        </div>
        <div class="calc">
            <h5>戌狗</h5>
            <p><img src="img/gou.png" alt=""></p>
        </div>
        <div class="calc">
            <h5>亥猪</h5>
            <p><img src="img/zhu.png" alt=""></p>
        </div>
</body>

感觉很厉害，就是变量var()对浏览器的兼容还不是很好，要是决绝了IE那就太厉害了。

calc()兼容性

这个的兼容性还是很好的，不考虑ie8以下的还是可以放心用的，有人说在使用的时候需要加浏览器前缀，像这样的

    .ele {
        /*Firefox*/
        -moz-calc(expression);
        /*chrome safari*/
        -webkit-calc(expression);
        /*Standard */
        calc();
     }

我实际测试了以下，不加前缀也可以用的。

如有错误之处，欢迎指正。

· 阅读需 7 分钟

随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行，CSS工作组迅速跟进CSS变量的规范制定，并且，很多浏览器已经跟进，目前，在部分项目中已经可以直接使用了。 变量的好处就是可以降低维护成本，附带还有更高性能。

css变量使用语法

CSS中原生的变量定义语法是：--，变量使用语法是：var(--)，其中*表示我们的变量名称。

关于命名这个东西，各种语言都有些显示，例如CSS选择器不能是数字开头，JS中的变量是不能直接数值的，但是，在CSS变量中，这些限制通通没有，还可以是中文，但是不能包含$，[，^，(，%等字符，普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合。

 :root {
  --666: #666;
 }
 body {
   background-color: var(--666);
 }

或者这样，有了中文还怕啥！

 :root {
  --灰色: #666;
 }
 body {
   background-color: var(--灰色);
 }

无论是变量的定义和使用只能在声明块{}里面，例如，下面这样是无效的：

--灰色: #666;
body {
  background-color: var(--灰色);
}
:root{
    background-color: var(--灰色);/*:root代表根元素html,所以在这里面定义的变量属于全局变量。*/
}
div {
    --background-color: #333;/*此时定义的变量只适用于div元素下，属于局部变量*/
    background-color: var(--background-color);
}

变量的属性使用也是有权重的，其实可以把CSS的原生变量理解为一种CSS属性。这样，你就对其权重和变量应用规则要容易理解地多。使用起来也就更加方便了，来看一个例子。

<style>
    :root {
        --color: purple;
    }
    div {
        --color: green;
    }
    #alert {
        --color: red;
    }
    * {
        color: var(--color);
    }
</style>
`body`
    <p>我的紫色继承于根元素</p>
    <div>我的绿色来自直接设置</div>
    <div id='alert'>
        ID选择器权重更高，因此我是红色！
        <p>我也是红色，占了继承的光</p>
    </div>
</body>

变量也是跟着CSS选择器走的，如果变量所在的选择器和使用变量的元素没有交集，是没有效果的。例如#alert定义的变量，只有id为alert的元素才能享有。如果你想变量全局使用，则你可以设置在:root选择器上；

当存在多个同样名称的变量时候，变量的覆盖规则由CSS选择器的权重决定的，但并无!important这种用法，因为没有必要，!important设计初衷是干掉JS的style设置，但对于变量的定义则没有这样的需求。

注意 CSS属性名不可以走变量、CSS变量不支持同时多个声明

CSS变量使用完整语法

CSS变量使用的完整语法为：var( [, ]? )，用中文表示就是：var( <自定义属性名> [, <默认值 ]? )，

意思就是，如果我们使用的变量没有定义（注意，仅限于没有定义），则使用后面的值作为元素的属性值。举个例子：

.box {
  --background-color: #666;
}
body {
  background-color: var(--background-color, #f60);
}

则此时的背景色是#f60

CSS变量不合法的缺省特性

请看下面这个例子：

body {
  --color: 20px;
  background-color: #369;
  background-color: var(--color, #cd0000);
}

请问，此时 body 的背景色是？

A. transparent    B. 20px     C. #369      D. #cd0000

答案是…………………………A. transparent

这是CSS变量非常有意思的一个点，对于CSS变量，只要语法是正确的，就算变量里面的值是个乱七八糟的东西，也是会作为正常的声明解析，如果发现变量值是不合法的，例如上面背景色显然不能是20px，则使用背景色的缺省值，也就是默认值代替，于是，上面CSS等同于：

body {
    --color: 20px;
    background-color: #369;
    background-color: transparent;
}

千万不能想当然得认为等同于background-color:20px，这也是为什么上面要强调CSS默认值的使用仅限于变量未定义的情况，并不包括变量不合法。

CSS变量的空格尾随特性

请看下面这个例子：

body {
  --size: 20;   
  font-size: var(--size)px;
}

如果你以为body的font-size是20px就太天真了，实际上，此处font-size:var(--size)px等同于font-size:20 px，注意，20后面有个空格，所以，这里的font-size使用的是body元素默认的大小。因此，就不要妄图取消就使用一个数值来贯穿全场，还是使用稳妥的做法：

body {
  --size: 20px;   
  font-size: var(--size);
}

或者使用CSS3 calc()计算：下一章在介绍CSS calc() 

body {
  --size: 20;   
  font-size: calc(var(--size) * 1px);
}

此时，body的font-size大小才是20px，

CSS变量的相互传递特性

就是说，我们在CSS变量定义的时候可以直接引入其他变量给自己使用，例如：

body {
  --green: #4CAF50;   
  --backgroundColor: var(--green);
}

CSS变量兼容性

ie全家都被pass了，感觉很不好。

如有错误之处，欢迎指正。

参考网址：http://www.zhangxinxu.com/wordpress/?p=5804

· 阅读需 8 分钟

有的时候我们需要把web页面进行打印出来，并且要在a4纸上完美呈现，开始的时候我笨打算把网页转换为分页的pdf，这样在本地就可以打印了。

我使用了html2canvas+jspdf这两个神器结合起来来达到我要的效果。

html2canvas是对整个或局部页面进行‘截图’。但这并不是真的截图，而是通过遍历页面DOM结构，收集所有元素信息及相应样式，渲染出canvas image。 简单理解为就是把你想要打印的页面进行渲染成为一张图片了，

使用

使用的API也很简洁，下面代码可以将某个元素渲染成canvas：

html2canvas(element, {
    onrendered: function(canvas) {
        // canvas is the final rendered <canvas> element
    }
});
通过onrendered方法，可以将生成的canvas进行回调，比如插入到页面中：

html2canvas(element, {
    onrendered: function(canvas) {
       document.body.appendChild(canvas);
    }
});
想了解更多关于html2canvas的请移步这里

jspdf是一个客户端解决方案生成pdf文件，可以将字体，图片生成pdf,还是很实用的。

文字生成PDF，使用方法如下：

// 默认a4大小，竖直方向，mm单位的PDF
var doc = new jsPDF();

// 添加文本‘Download PDF’
doc.text('Download PDF!', 10, 10);
doc.save('a4.pdf');

图片生成PDF，使用方法如下：

// 三个参数，第一个方向，第二个单位，第三个尺寸格式
var doc = new jsPDF('landscape','pt',[205, 115])

// 将图片转化为dataUrl
var imageData = ‘data:image/png;base64,iVBORw0KGgo...’;

doc.addImage(imageData, 'PNG', 0, 0, 205, 115);
doc.save('a4.pdf');

文字与图片生成PDF，使用方法如下：

// 三个参数，第一个方向，第二个尺寸，第三个尺寸格式
var doc = new jsPDF('landscape','pt',[205, 155])

// 将图片转化为dataUrl
var imageData = ‘data:image/png;base64,iVBORw0KGgo...’;

//设置字体大小
doc.setFontSize(20);

//10,20这两参数控制文字距离左边，与上边的距离
doc.text('Stone', 10, 20);

// 0, 40, 控制文字距离左边，与上边的距离
doc.addImage(imageData, 'PNG', 0, 40, 205, 115);
doc.save('a4.pdf')
想了解更多关于jspdf的请移步这里

html2canvas + jsPDF，使用方法如下：

<script type="text/javascript" src="./js/jsPdf.debug.js"></script>
<script type="text/javascript">
      var downPdf = document.getElementById("renderPdf");
      downPdf.onclick = function() {
          html2canvas(document.body, {
              onrendered:function(canvas) {

                  //返回图片dataURL，参数：图片格式和清晰度(0-1)
                  var pageData = canvas.toDataURL('image/jpeg', 1.0);

                  //方向默认竖直，尺寸ponits，格式a4[595.28,841.89]
                  var pdf = new jsPDF('', 'pt', 'a4');

                  //addImage后两个参数控制添加图片的尺寸，此处将页面高度按照a4纸宽高比列进行压缩
                  pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28/canvas.width * canvas.height );

                  pdf.save('stone.pdf');

              }
          })
      }
</script>

html2canvas + jsPDF，加上分页效果，使用方法如下：

html2canvas(document.body, {
  onrendered:function(canvas) {

      var contentWidth = canvas.width;
      var contentHeight = canvas.height;

      //一页pdf显示html页面生成的canvas高度;
      var pageHeight = contentWidth / 592.28 * 841.89;
      //未生成pdf的html页面高度
      var leftHeight = contentHeight;
      //页面偏移
      var position = 0;
      //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
      var imgWidth = 595.28;
      var imgHeight = 592.28/contentWidth * contentHeight;

      var pageData = canvas.toDataURL('image/jpeg', 1.0);

      var pdf = new jsPDF('', 'pt', 'a4');

      //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
      //当内容未超过pdf一页显示的范围，无需分页
      if (leftHeight < pageHeight) {
      pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight );
      } else {
          while(leftHeight > 0) {
              pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
              leftHeight -= pageHeight;
              position -= 841.89;
              //避免添加空白页
              if(leftHeight > 0) {
                pdf.addPage();
              }
          }
      }

      pdf.save('content.pdf');
  }
})
以上内容参考地址

这两个前端空间单用起来兼容性都是很好的，但是和在一起就出现一些问题了。使用后在谷歌浏览器下开始是没有问题的但是页面太多就会出现黑页面情况（毕竟我的页面有40多页A4纸大小），在火狐下会出现某一页出现黑页面的现象，在ie下就报错了。 这个方案就被我pass掉了。

后来发现浏览器自带的打印功能，print() 方法用于打印当前窗口的内容。

首先在介绍这个方法之前要要先介绍一个css3的标签，就是@media 查询，一般使用它都是在调整浏览器大小的时候改变样式什么的，看一下他的媒体类型

值                    描述
all                 用于所有设备
print               用于打印机和打印预览
screen              用于电脑屏幕，平板电脑，智能手机等。
speech              应用于屏幕阅读器等发声设备

通过这个标签就可以控制打印的时候的纸张大小

@media print {
    .bg_page{
        width: 297mm;
        height: 210mm;
    }
}

还要介绍一个属性page-break-after 设置在元素之后进行分页的分页行为

值            描述
auto        默认。如果必要则在元素后插入分页符。
always      在元素后插入分页符。
avoid       避免在元素后插入分页符。
left        在元素之后足够的分页符，一直到一张空白的左页为止。
right       在元素之后足够的分页符，一直到一张空白的右页为止。
inherit     规定应该从父元素继承 page-break-after 属性的设置。

在加上这个属性后就可以调用打印机进行打印了。

@media print {
    .bg_page{
        width: 297mm;
        height: 210mm;
        page-break-after:always;
    }
}

需要注意的是：如果页面太长，要打印的很多，要是还有一些动画，或者canvas一系列的，需要当页面全部加载完之后，在调用window.print()方法or(Ctrl+p)，否则答应出来的页面显示不全，最好是先用可以预览的浏览器进行预览像谷歌这样的，比较好。

· 阅读需 3 分钟

在前端页面开发过程中，经常会碰到向nav导航的布局，一张图片加上字体说明（现在实现这种效果用iconfont也是很不错的），别的地方也有很多需要用到这种组合的形式，默认的样式是这样的。 一般都是需要图片居中显示的，以前我的做法都是将图片进行浮动让后再调整图片位置，偶然间发现css有一个这一个属性vertical-align，感觉很实用，发现新大陆了。看一下w3school对他的解释。

浏览器支持
    所有浏览器都支持 vertical-align 属性。
    注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
定义和用法
    vertical-align 属性设置元素的垂直对齐方式。
说明
    该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。
    这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
        默认值：            baseline
        继承性：            no
        版本：             CSS1
        JavaScript 语法：  object.style.verticalAlign="bottom"
可能的值
    值               描述
    baseline        默认。元素放置在父元素的基线上。
    sub             垂直对齐文本的下标。
    super           垂直对齐文本的上标
    top             把元素的顶端与行中最高元素的顶端对齐
    text-top        把元素的顶端与父元素字体的顶端对齐
    middle          把此元素放置在父元素的中部。
    bottom          把元素的顶端与行中最低的元素的顶端对齐。
    text-bottom     把元素的底端与父元素字体的底端对齐。
    length   
    %               使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
    inherit         规定应该从父元素继承 vertical-align 属性的值。

给我刚才的例子添加上vertical-align:middle属性，看一下效果 一下子就达到了我想要的效果，感觉很不错吧

其他的属性值也很好理解，多多记忆一下就好了。

· 阅读需 10 分钟

什么是面向对象？–>一切皆对象！！！

什么是对象，不知道这个东西里面长得什么样子，但是知道这个东西有什么功能和方法会用就行了，这就是对象，就像js里面的那些个对象，date呀，数组呀，咱们不知道内部是个什么原理，但是咱们知道它的属性和方法，其实对象就是一个整体，对外提供一些功能和操作，面向对象其实是一种通用思想，可以在编程中用，也可以在生活中用，在编程中呢，如何在使用某些功能来实现效果的过程中可以只关注功能，不关注内部细节的编程思想，就是面向对象就像jq，咱们知道jq可以用$(“.a”)来获取一个jq的dom对象，咱们学习jq不需要去学习jq是怎么去获取dom对象的，只需要学习用jq获取对象的那个操作就ok了，那么jq就是用面向对象编程思想来编写的一个类库。

面向对象的特点

抽象：抽指把核心的东西抽出来，把与我们要解决的问题有关的东西拿出来摆在面前
封装：让使用对象的人不考虑内部实现，只考虑功能使用  把内部的代码保护起来，只留出一些个api接口供用户使用
继承：就是为了代码的复用，从父类上继承出一些方法和属性，子类也有自己的一些属性，多重继承继承多种方法和属性
多态，对于咱们的js这种弱类型语言来说其实意义不大

对象的组成

属性   变量：状态、静态的
方法   函数：过程、动态的

创建对象-基础创建

最简单的方法就是基础创建

var obj=new Object();
obj.name = 'wei';
obj.age = 6;
obj.height = 180
obj.showName = function() {
   alert(this.name)
}
console.log(obj)//Object {name: "wei", age: 6, height: 180, showName: function}

基础创建缺点：创建一次写一回，如果创建一百次呢，那样就太复杂了，产生了很多重复的代码。

创建对象-工厂模式

工厂模式抽象了创建具体对象的过程，使用函数封装以特定接口创建对象

function creatPerson (name,age,height){
    var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.height = height;
    obj.showName = function () {
        alert(this.name)
    }
    return obj;
}
var person1 = creatPerson("wei",6,"180");
var person2 = creatPerson("kuo",8,"160");
console.log(person1)//Object {name: "wei", age: 6, height: "180", showName: function}
console.log(person2)//Object {name: "kuo", age: 8, height: "160", showName: function}

console.log(person1.showName)//function () { alert(this.name) }
console.log(person2.showName)//function () { alert(this.name) }

上面都没有问题，在看下面这个
console.log(person1.showName==person2.showName)//false
这里是不一样的，这样的话创建一百个对象就会出现一百种方法岂不是很浪费内存。

工厂模式的缺点：方法不一样浪费内存，也不知道对象的类型，还有就是感觉创建对象没有使用new感觉很不爽啊。

创建对象-构造函数模式

构造函数与其他函数的区别就是调用方式不同，单是构造函数也是函数，不存在其他语法。

任何函数只要通过new操作符来调用，那就可以作为构造函数

function Person (name,age,height){
    this.name = name;
    this.age = age;
    this.height = height;
    this.showName = function () {
        alert(this.name)
    }
}
var person1 = new Person("wei",6,"180");
var person2 = new Person("kuo",8,"160");
console.log(person1)//Person {name: "wei", age: 6, height: "180", showName: function}
console.log(person2)//Person {name: "kuo", age: 8, height: "160", showName: function}
但是
console.log(person1.showName==person2.showName)false
还是false,说明这个问题和上面的一样了，但是代码变少了。

我们来比较一下工厂模式和构造函数的不同之处。

1.没有明确的创建对象；
2.直接将属性和方法赋值给了this对象；
3.没有return语句了；
*在这里要主意一点：构造函数应该以一个大写字母开头可以和其他函数区分开

要创建Person的心实例，必须使用new操作符。这种方式调用构造函数会经历以下4步。

1.创建一个新对象；
2.将构造函数的作用域赋给新对象（this就指向了这个对象）；
3.执行构造函数中的代码（为这个性对象添加属性）；
4.返回新对象；

person1和person2分别保存着Person的一个不同的实例，这两个对象都有一个constructor(构造属性)

console.log(person1.constructor == Person)//true
console.log(person2.constructor == Person)//true

再用instanceof检测一下类型

console.log(person1 instanceof Object)//true
console.log(person1 instanceof Person)//true
console.log(person2 instanceof Object)//true
console.log(person2 instanceof Person)//true

例子中创建的所有对象即是Obect的实例，也是Person的实例。

构造函数的缺点：每个方法都要在每个实例上重新创建一遍，浪费内存。

创建对象-原型模式

我们创建的每个函数都有一个prototype(原型)属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有势力共享的属性和方法。是不是很深奥

简化一下propotype就是通过调用构造函数而创建的那个对象实例的原型对象，使用原型对象好处是可以让所有对象实例共享他所包含的属性和方法。

在简单点比如一个页面有10个div，我想把他们背景都变成红色，怎么办，给每一个div都加上内联样式style=”background:red;”,麻烦不麻烦，这样我们起一个class名.red{ background:red;}给每一个div都加上.red的class名就好了，原型就相当于类名，这样理解起来就好理解了。

function Person(){
}
Person.prototype.name = "wei";
Person.prototype.age = 6;
Person.prototype.height = 180;
Person.prototype.showName = function () {
    alert(this.name);
}
var person1 = new Person();
person1.showName();//wei
var person2 = new Person();
person2.showName();//wei
console.log(person1.showName == person2.showName)//true

也可以简化为这样

function Person(){
}
Person.prototype = {
    name : "wei",
    age : 6,
    height : 180,
    showName : function () {
        alert(this.name);
    }
}
var person1 = new Person();
person1.showName();//wei
var person2 = new Person();
person2.showName();//wei
console.log(person1.showName == person2.showName)//true

再来看一个例子

function Person(){
}
Person.prototype = {
    name : "wei",
    age : 6,
    height : 180,
    friends : ["xiao","zhang"],
    showName : function () {
        alert(this.name);
    }
}
var person1 = new Person();
var person2 = new Person();
person1.friends.push("meng")
console.log(person1.friends)//["xiao", "zhang", "meng"]
console.log(person2.friends)//["xiao", "zhang", "meng"]
console.log(person1.showName === person2.showName)//true

一下就看出问题来了吧，我想改的改了，不想改的也给我改了。

原型模式的缺点：太共享了，没有自己的隐私。

创建对象-混合模式

混合模式就是将构造函数模式和原型模式组合起来一起使用，这种自定义类型是ECMAscript中使用最广泛的、认同度最高的。

构造函数模式用于定义实例属性，原型模式用于定义方法和公共的属性。 再来看一个例子

function Person (name, age, height) {
    this.name = name;
    this.age = age;
    this.height = height;
    this.friends = ["xiao", "zhang"];
}
Person.prototype = {
    showName : function () {
        alert(this.name)
    }
}
var person1 = new Person("wei", 6, 180)
var person2 = new Person("kuo", 8, 160)

person1.friends.push("meng")
console.log(person1.friends)//["xiao", "zhang", "meng"]
console.log(person2.friends)//["xiao", "zhang"]
console.log(person1.friends === person2.friends)//false
console.log(person1.showName === person2.showName)//true

混合模式每个实例都会有自己的一份实例属性的副本，但同时游共享着对方的引用，最大限度的节省了内存，混合模式还支持向构造函数传递参数，集合了两种模式的优点。