参考来源：https://segmentfault.com/a/1190000002632530

hexo

npm install hexo -g  安装
npm update hexo -g 升级
hexo init  初始化

more >>

百度地图的引入

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ir7jFwBM0tPkLebXl3ScT9cB">
  </script>

  <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
  <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />

1. 创建地图实例：BMap.Map(“container”)

创建一个地图实例，container指容器id，之后调用Map.centerAndZoom()方法对地图进行初始化。未进行初始化的地图将不能进行任何操作。

1. 地图经纬度：BMap.Point

2. 以指定的经度和纬度创建一个地理点坐标。

3. 初始化地图：map.centerAndZoom(center:Point,Zoom:Number)

初始化地图，他有种设置参数方式，一是center类型为Point时，zoom必须赋值，范围3-19级，还有就是如果center类型为字符串时，比如“北京”，zoom可以忽略，地图将自动根据center适配最佳zoom级别。

window.onload = function(){
    var map = new BMap.Map("container");
    var point = new BMap.Point(116.404, 39.915);
    map.centerAndZoom(point, 15); //map.centerAndZoom("北京");
}

为地图批量添加标注(baidumap.html)

• 原理：通过for循环的方式为地图批量添加标注
• 设置点的新图标：
  • 构造出Icon对象：Icon（url:String,size:Size[,opts:IconOptions]）
  • 改变图标大小：setImageSize（offset：Size）；
  • 加载图标到地图上：setIcon（icon：Icon）

    more >>

移动ios端有很多默认样式，可在全局样式中添加如下样式：

移动端

ios手机号识别样式覆盖

通过添加Safari私有属性解决
<meta name="format-detection" content="telephone=no" />

ios按钮默认为灰色

-webkit-appearance: none;

more >>

ios手机号码识别样式覆盖

<meta name="format-detection" content="telephone=no" />

)
//强制让文档的宽度与设备的宽度保持1:1，
//文档初始化缩放比例是1:1，
//不允许用户点击屏幕放大浏览，
//允许用户缩放到的最大比例，
//尤其要注意的是content里多个属性的设置一定要用逗号+空格来隔开，如果不规范将不会起作用。其他属性有：width;height; initial-scale; minimum-scale; maximum-scale; user-scalable;
2)
//iPhone私有标签，它表示：允许全屏模式浏览
3)
//iPhone私有标签，它指定的iPhone中safari顶端的状态条的样式
4) //不识别邮件和不把数字识别为电话号码

input[type="radio"] {
  display: inline-block;
  background: url(../input.png) no-repeat left -115px;
  width: 20px;
  height: 21px;
  background-size: 20px auto;
  -webkit-appearance: none;
  outline:none;
  border:none;
}
input[type="radio"]:checked {
  background: url(../input.png) no-repeat left -168px;
  background-size: 20px auto;
  outline:none;
  border:none;
}

图片素材链接：http://oibijaovc.bkt.clouddn.com/input.png

效果展示

页面中比较常用的尺寸

iphone4,5

页面中比较常用的尺寸

iphone4,5(w:320px)

@media all and (min-width:320px) and(max-width: 360px){
    body {  font-size: 12px;  }
}

iphone6(w:375px)

@media all and (min-width:360px) and(max-width: 400px){
    body {  font-size: 13px;  }
}

iphon6plus(w:414px)

@media all and (min-width:400px) and(max-width: 560px){
    body {  font-size: 14px;  }
}

ipad(w:768px)

@media all and (min-width:560px) and(max-width: 640px){
    body {  font-size: 15px;  }
}

@media all and (min-width:640px) and(max-width: 750px) {
    body {  font-size: 16px;  }
}
@media all and (min-width:750px) {
    body {  font-size: 17px;  }
}

移动端在点击按钮瞬间

document.body.addEventListener('touchstart', function(){ 
document.getElementsByClassName('searBtn')[0].style.background='#fff';
});

移开按钮的瞬间

document.body.addEventListener('touchend', function(){ 
document.getElementsByClassName('searBtn')[0].style.background='#0089de';
});

简单认识对象

创建对象

使用new构造函数

var obj = new Object(); 
obj.name = "MangGuo"; 
obj.age = 25;

使用对象字面量表示法

var obj = {
    name : "MangGuo", //name是属性名，"MangGuo"是值
    age : 25
}

more >>

弹出框介绍

警告框（alert）

alert("hello")

警告窗口有一个确定按钮，点击确定会继续执行后面的代码。

确认选择（confirm）

if(confirm("请选择？")==true){
    document.write("您选了确定");
}else{
    document.write("您选了取消");
}

more >>

autofocus属性

给文本框、选择框或按钮控件加上该属性，当画面打开时，该控制自动获得光标焦点。
javascript方法：

control.focus()

css方法：

more >>