js简化判断是否为手机访问

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

var ua = navigator.userAgent;
var ipad = ua.match(/(iPad).*OS\s([\d_]+)/),
    isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),
    isAndroid = ua.match(/(Android)\s+([\d.]+)/),
    isMobile = isIphone || isAndroid;
    if(isMobile) {
        location.href = 'http://m.domain.com';
    }else{
        location.href = 'http://www.domain.com';
    ｝
    //或者单独判断iphone或android
    if(isIphone){
        //code
    else if(isAndroid){
        //code
    }else{
        //code
    }

anglar JS使用两层ng-repeat嵌套使用，分辨$index

• 使用ng-init给首层的每个元素赋值一个独立的值。

  1	ng-init="outerIndex = $index;"

HTML:

1
2
3
4
5
6
7
8
9
10
11
12

<div class="category-nav">
  <div class="category-nav-header">资源分类</div>
  <div class="category-nav-cell" ng-repeat="firstItem in firstCategorys track by $index" ng-init="outerIndex = $index;">
    <div class="category-nav-cell-header">
      <h4 class="category-nav-firstTitle" ng-click="clickFirstCategory($index)">{{firstItem}}</h4>
      <img src="" alt="" class="category-nav-expand" ng-click="showOrHiden($index)">
    </div>
    <div class="category-nav-secondContain" ng-if="categoryStatus[$index]">
      <div  class="category-nav-second" ng-repeat="secondItem in secondCategory[$index]" ng-click="clickNavSecondCategory(outerIndex,$index)">{{secondItem}}</div>
    </div>
  </div>
</div>

JS

1
2
3
4
5

$scope.clickNavSecondCategory = function (outerIndex,innerIndex) {
  console.log('点击了导航栏的分类页码'+outerIndex+innerIndex);
  $scope.showMainContentSecondCategory = false;
  $scope.routes.splice(1,2,$scope.firstCategorys[outerIndex],$scope.secondCategory[outerIndex][innerIndex]);
};

• 一般的窗口关闭的JS如下写法：

  1	window.close()

• 但是呢，chrome，firefox等中有时候会不起作用。改为下面的写法：

  1 2 3

  window.open("about:blank","_self").close() window.open("about:blank","_self").close() //2选一即可

• javascript图形验证码大全

javascript图形验证码大全

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1

$ hexo new "My New Post"

More info: Writing

Run server

1

$ hexo server

More info: Server

Generate static files

1

$ hexo generate

More info: Generating

Deploy to remote sites

1

$ hexo deploy

More info: Deployment

CSS实现单行、多行文本溢出显示省略号

1
2
3
4

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;//数组填写1则一行超出省略号
overflow: hidden;

• CSS常用div阴影效果

  1	box-shadow: 0 1px 5px 0 rgba(0,0,0,.5);

• CSS常用文字阴影效果

  1	text-shadow: 0 0 0.1em #666, 0 0 0.3em #666,0 0 0.1em #666

• Safari消除CSS点击A出现短暂半透明效果

  1 2 3

  a,img { -webkit-tap-highlight-color:transparent; }

css 不能选中文字

1
2
3
4
5
6
7
8
9
10
11
12

-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Chrome/Safari/Opera */
-khtml-user-select: none;
/* Konqueror */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently

css设置各种中文字体如雅黑、黑体、宋体、楷体等等

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

在css中推荐使用中文字体的英文表示法，以下附常见中文字体的英文名： 
Mac OS的一些： 

华文细黑：STHeiti Light [STXihei] 
华文黑体：STHeiti 
华文楷体：STKaiti 
华文宋体：STSong 
华文仿宋：STFangsong 
儷黑 Pro：LiHei Pro Medium 
儷宋 Pro：LiSong Pro Light 
標楷體：BiauKai 
蘋果儷中黑：Apple LiGothic Medium 
蘋果儷細宋：Apple LiSung Light 
Windows的一些： 
新細明體：PMingLiU 
細明體：MingLiU 
標楷體：DFKai-SB 
黑体：SimHei 
宋体：SimSun 
新宋体：NSimSun 
仿宋：FangSong 
楷体：KaiTi 
仿宋_GB2312：FangSong_GB2312 
楷体_GB2312：KaiTi_GB2312 
微軟正黑體：Microsoft JhengHei 
微软雅黑体：Microsoft YaHei 
装Office会生出来的一些： 

隶书：LiSu 
幼圆：YouYuan 
华文细黑：STXihei 
华文楷体：STKaiti 
华文宋体：STSong 
华文中宋：STZhongsong 
华文仿宋：STFangsong 
方正舒体：FZShuTi 
方正姚体：FZYaoti 
华文彩云：STCaiyun 
华文琥珀：STHupo 
华文隶书：STLiti 
华文行楷：STXingkai 
华文新魏：STXinwei

• ul 中li在一行显示

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

  &_ul { height: 50px; display: block; white-space:nowrap;//重点 overflow-x: auto; overflow-y: hidden; li { display: inline-block;//重点 width: 80px; list-style: none; text-align: center; font-size: 10px; color: @offactive; overflow: hidden; } }

angular路由中Ueditor第二次无法初始化

1
2
3
4
5
6
7
8

var um = UM.getEditor('myEditor',{
        initialFrameWidth:'100%',
        initialFrameHeight:300
});

$scope.$on('$destroy', function() {
    um.destroy();
});

项目近期开发加入百度地图的需求，初次使用遇到一些基础问题，总结如下：
百度地图的KEY申请地址http://lbsyun.baidu.com/，基础使用直接看百度地图API就可以，有Demo。
百度地图显示的时候全是网格没有地图，基本肯定就是KEY的问题。

1、BaiduMapOptions

1
2
3
4
5
6
7
8
9

BaiduMapOptions compassEnabled(boolean enabled)//设置是否允许指南针，默认允许。
BaiduMapOptions mapStatus(MapStatus status)//设置地图初始化时的地图状态， 默认地图中心点为北京天安门，缩放级别为 12.0f
BaiduMapOptions mapType(int mapType)//设置地图模式，默认普通地图
BaiduMapOptions overlookingGesturesEnabled(boolean enabled) //设置是否允许俯视手势，默认允许
BaiduMapOptions rotateGesturesEnabled(boolean enabled)//设置是否允许旋转手势，默认允许
BaiduMapOptions scaleControlEnabled(boolean enabled)//设置是否显示比例尺控件
BaiduMapOptions scrollGesturesEnabled(boolean enabled)//设置是否允许拖拽手势，默认允许
BaiduMapOptions zoomControlsEnabled(boolean enabled)//设置是否显示缩放控件
BaiduMapOptions zoomGesturesEnabled(boolean enabled)//设置是否允许缩放手势

2、UiSettings

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

MapView mMapView = (MapView)findViewById(R.id.mapview);
BaiduMap mBaiduMap = mMapView.getMap();
UiSettings uiSettings = mBaiduMap.getUiSettings();
//设置是否允许旋转手势
uiSettings.setRotateGesturesEnabled(false);
//设置是否允许指南针
uiSettings.setCompassEnabled(false);
//设置是否允许俯视手势
uiSettings.setOverlookingGesturesEnabled(false);
//设置是否允许拖拽手势
uiSettings.setScrollGesturesEnabled(true);
//设置是否允许缩放手势
uiSettings.setZoomGesturesEnabled(true);
//隐藏地图上百度地图logo图标
mMapView.removeViewAt(1);
//隐藏地图上比例尺
mMapView.showScaleControl(true);
//隐藏缩放按钮
mMapView.showZoomControls(false);

3、根据坐标和级别缩放地图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

//地图级别3-2000km
//地图级别4-1000km
//地图级别5-500km
//地图级别6-200km
//地图级别7-100km
//地图级别8-50km
//地图级别9-25km
//地图级别10-20km
//地图级别11-10km
//地图级别12-5km
//地图级别13-2km
//地图级别14-1km
//地图级别15-500m
//地图级别16-200m
//地图级别17-100m
//地图级别18-50m
//地图级别19-20m
//地图级别20-10m
private void scalePosition(LatLng position,int level){
   MapStatus.Builder builder = new MapStatus.Builder();
   if (level != 0) {
      builder.zoom(level);
   }
   if (position != null) {
      builder.target(position);
   }
   MapStatus mapStatus = builder.build();
       MapStatusUpdate statusUpdate = MapStatusUpdateFactory.newMapStatus(mapStatus);
   if (mBaiduMap!=null) {
      mBaiduMap.animateMapStatus(statusUpdate);//动画缩放，不用动画会直接刷新界面
   }
}

4、根据城市名称获取城市中心坐标或根据坐标反编码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

**
 * 地理编码查询接口
 */
private GeoCoder geoCoder = GeoCoder.newInstance();

String	City = "北京";
geoCoder.geocode(new GeoCodeOption().city(City).address(City));//编码城市获取坐标

Activity实现OnGetGeoCoderResultListener接口有如下方法：

@Override
public void onGetGeoCodeResult(GeoCodeResult arg0) {
   LatLng lng = arg0.getLocation();//获取编码城市坐标;
}

@Override
public void onGetReverseGeoCodeResult(ReverseGeoCodeResult arg0) {
   // 反编码
}

5、在地图上构建标志

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

BitmapDescriptor bitmap = BitmapDescriptorFactory
      .fromResource(R.drawable.worksite_map_feidianshang);
MarkerOptions option = new MarkerOptions().position(point)
      .icon(bitmap).zIndex(9).extraInfo(bundle);//bundle可以携带一些区分标志的信息等
try {
   mBaiduMap.addOverlay(option);
} catch (Exception e) {
   e.printStackTrace();
}
if (bitmap != null) {
   bitmap.recycle();
   bitmap = null;
}

//构建自定义布局标志

这个用的时候小心，有个bug
//在4.4以下版本，空指针异常 
View view = LayoutInflater.from(mContext).inflate(R.layout.worksite_marker_quxian, null);
BitmapDescriptor bitmap = BitmapDescriptorFactory.fromView(view);//view不为空但报空指针异常
//解决办法：
//1、最外层要使用LinearLayout包住，才会不报错，我在第一次使用的RelativeLayout包住报错.
//2、view.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT);


View view = LayoutInflater.from(mContext).inflate(
      R.layout.worksite_marker_quxian, null);
params = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT);
view.setLayoutParams(params);

TextView markerNum = (TextView) view
      .findViewById(R.id.worksiteNum);
TextView cityName = (TextView) view
      .findViewById(R.id.cityName);
cityName.setVisibility(View.VISIBLE);
cityName.setText(info.get(i).RegionName);
markerNum.setText(count + "");
BitmapDescriptor bitmap = BitmapDescriptorFactory
      .fromView(view);
option = new MarkerOptions().position(point)
      .icon(bitmap).zIndex(9).extraInfo(bundle);
try {
   mBaiduMap.addOverlay(option);
} catch (Exception e) {
   e.printStackTrace();
}
if (bitmap != null) {
   bitmap.recycle();
   bitmap = null;
}

百度地图在合适视野范围内显示所有的点

• 通常地图会显示出多个点，如像行驶轨迹等，往往在屏幕上一次性就全部显示出来，那要怎么设置地图的显示宽高，才能将所有的点合理的显示出来呢。看看以下的代码实现：

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

  private void setMyLocation() { list = new ArrayList<>(); LatLng ll = new LatLng(24.475982, 118.093132); LatLng ll1 = new LatLng(24.477382, 118.093232); LatLng ll2 = new LatLng(24.478382, 118.093832); LatLng ll3 = new LatLng(24.487382, 118.094232); LatLng ll4 = new LatLng(24.497982, 118.099562); list.add(ll); list.add(ll1); list.add(ll2); list.add(ll3); list.add(ll4); MapStatus.Builder builder = new MapStatus.Builder(); builder.target(ll).zoom(18.0f); // mBaiduMap.animateMapStatus(MapStatusUpdateFactory.newMapStatus(builder.build())); for (LatLng latLng : list) { mBaiduMap.addOverlay(new BaiduMapUtil().setMarker(latLng)); } mBaiduMap.addOverlay(new BaiduMapUtil().Polyline(list)); //将所有的坐标显示出来的合理视图 if (isFrist) { mBaiduMap.setOnMapLoadedCallback(new BaiduMap.OnMapLoadedCallback() { @Override public void onMapLoaded() { isFrist=false; mBaiduMap.animateMapStatus(new BaiduMapUtil().setLatLngBounds(list, mMapView)); } }); }else{ mBaiduMap.animateMapStatus(new BaiduMapUtil().setLatLngBounds(list, mMapView)); } }

• 以下为工具类BaiduMapUtil的具体实现

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

  public class BaiduMapUtil { /** * 绘制Marker，地图上常见的类似气球形状的图层 */ public MarkerOptions setMarker(LatLng latLng) { return setMarker(latLng, R.drawable.icon_defult_marker); } public MarkerOptions setMarker(LatLng latLng, int drawableId) { MarkerOptions markerOptions = new MarkerOptions();//参数设置类 markerOptions.position(latLng);//marker坐标位置 markerOptions.icon(BitmapDescriptorFactory .fromResource(drawableId));//marker图标，可以自定义 markerOptions.draggable(false);//是否可拖拽，默认不可拖拽 markerOptions.anchor(0.5f, 1.0f);//设置 marker覆盖物与位置点的位置关系，默认（0.5f, 1.0f）水平居中，垂直下对齐 markerOptions.alpha(0.8f);//marker图标透明度，0~1.0，默认为1.0 markerOptions.animateType(MarkerOptions.MarkerAnimateType.none);//marker出现的方式，从天上掉下 markerOptions.flat(false);//marker突变是否平贴地面 markerOptions.zIndex(1);//index return markerOptions; } /** * 绘制折线 */ public PolylineOptions Polyline(List<LatLng> points) { PolylineOptions polylineOptions = new PolylineOptions();//参数设置类 polylineOptions.width(10);//宽度,单位：像素 polylineOptions.color(0xAAFF0000);//设置折线颜色 polylineOptions.points(points);//折线顶点坐标集 return polylineOptions; } /** * 多个点，在Android里面显示合理的缩放级 */ public MapStatusUpdate setLatLngBounds(List<LatLng> points, MapView mMapView) { LatLngBounds.Builder builder2 = new LatLngBounds.Builder(); for (LatLng p : points) { builder2 = builder2.include(p); } LatLngBounds latlngBounds = builder2.build(); MapStatusUpdate u = MapStatusUpdateFactory.newLatLngBounds(latlngBounds, mMapView.getWidth(), mMapView.getHeight()); return u; } }

1
2
3
4
5
6
7
8
9
10
11
12

if (isFrist) {  
           mBaiduMap.setOnMapLoadedCallback(new BaiduMap.OnMapLoadedCallback() {  
 
               @Override  
               public void onMapLoaded() {  
                   isFrist=false;  
                   mBaiduMap.animateMapStatus(new BaiduMapUtil().setLatLngBounds(list, mMapView));  
               }  
           });  
       }else{  
           mBaiduMap.animateMapStatus(new BaiduMapUtil().setLatLngBounds(list, mMapView));  
       }

• 这段代码为显示合理范围的核心代码，加入是否为首次的判断，因为要在OnMapLoadedCallback中实现是关键，否则mapview的with和height取得是0，如果在其他视觉范围内，想恢复到这个合理的范围则经过首次加载后，就不会再执行OnMapLoadedCallback方法，所以要判断是否为第一次加载的状态。

• 安卓布局技巧收藏

  隐藏Activity的头部默认导航

  1 2 3 4

  ActionBar actionBar=getSupportActionBar(); if(actionBar!=null){ actionBar.hide(); }

ListView的setOnItemClickListener点击无效问题

• 如果ListView中的单个Item的view中存在checkbox，button等view，会导致ListView.setOnItemClickListener无效，事件会被子View捕获到，ListView无法捕获处理该事件.

####解决方法：

• 在checkbox、button对应的view处加:

1
2
3
4

android:focusable="false"
android:clickable="false"
android:focusableInTouchMode="false"

android使用Service在后台运行

public void useForeground(CharSequence tickerText, String currSong) {
Intent notificationIntent = new Intent(getApplicationContext(), MainActivity.class);
PendingIntent pendingIntent = PendingIntent.getActivity(getApplicationContext(), 0, notificationIntent, 0);
/* Method 01

 * this method must SET SMALLICON! 
 * otherwise it can't do what we want in Android 4.4 KitKat, 
 * it can only show the application info page which contains the 'Force Close' button.*/  
NotificationCompat.Builder mNotifyBuilder = new NotificationCompat.Builder(PlayService.this)  
        .setSmallIcon(R.drawable.ic_launcher)  
        .setTicker(tickerText)  
        .setWhen(System.currentTimeMillis())  
        .setContentTitle(getString(R.string.app_name))  
        .setContentText(currSong)  
        .setContentIntent(pendingIntent);  
Notification notification = mNotifyBuilder.build();  

/* Method 02  
Notification notification = new Notification(R.drawable.ic_launcher, tickerText, 
        System.currentTimeMillis()); 
notification.setLatestEventInfo(PlayService.this, getText(R.string.app_name), 
        currSong, pendingIntent); 
*/  

startForeground(NOTIFY_ID, notification);  

}

1
2
3
4
5
6
7
8
9

## android黑屏后保持Service运行

```java
   private PowerManager.WakeLock wakeLock = null;
   PowerManager pm = (PowerManager) getSystemService(Context.POWER_SERVICE);
   wakeLock = pm.newWakeLock(PowerManager.PARTIAL_WAKE_LOCK, MyService.class.getName());
   wakeLock.acquire();
   //需要权限
   <uses-permission android:name="android.permission.WAKE_LOCK" />