thymeleaf小知识

1、根据不同性别，显明不同的默认图片：th:if

th:src   图片路径

<img th:if="${gender=='男'}" id="admission_photo" th:src="@{/static/images/boy.jpg}" />
<img th:if="${gender=='女'}" id="admission_photo" th:src="@{/static/images/girl.jpg}" />

　

2、身份证号校验：

var regEx = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;

var idcard = $('#idcard').val();//获取用户输入的身份证号码

var result = regEx.test(idcard);

　

3、手机端H5，同一个页面，分多屏滑动，用swiper

1）引入样式 ：<link type="text/css" rel="stylesheet" th:href="@{/static/swiper-3.4.2.min.css}" />

2）定义swiper内容：

<div class="swiper-container swiper-no-swiping">
　　<div class="swiper-wrapper">
　　　　<div class="swiper-slide searchBox">
　　　　　　。。。。。。内容
　　　　</div>
　　　　<div class="swiper-slide white">
　　　　　　。。。。。。内容
　　　　</div>
　　　　<div class="swiper-slide">
　　　　　　。。。。。。内容
　　　　</div>
　　</div>
</div>

3）初始化swiper

var swiper;
swiper = new Swiper('.swiper-container', {
    simulateTouch : false,
    onSlideChangeStart: function(swiper){
        var currentIndex = swiper.clickedIndex
        var activeIndex = swiper.activeIndex;
        if(currentIndex==0 && activeIndex==1){//第一页，滑动到第二页，校验身份证号码
               var result = checkIdCard();
               if(!result){
                    layer.msg("请输入正确的身份证号码");
                    return;
               }else{
                    nextSwiper(activeIndex);
               }
         }
   }
});        　　

其中：　

1）simulateTouch : false,  禁止本身滑动动作，通过页面按钮点击来滑动。默认为true，Swiper接受鼠标点击、拖动。不记得是PC还是手机端，有一个无效，加上下面的swiper-no-swiping就都有效了。

　　swiper-no-swiping：不可拖动块的类名，当noSwiping设置为true时，并且在slide加上此类名，slide无法拖动。

swiper.slideTo(index);  滑动事件，指定滑动到哪一屏，index从0开始。

onSlideChangeStart：监听滑动事件  swiper.clickedIndex  当前屏下标            swiper.activeIndex;  要滑向下一屏的下标

4、人脸识别，打开手机摄像头

video : {
　　width : 400,
　　height : 400,
　　facingMode : "user"    //打开前置摄像头
}
video:{ 'facingMode': "user" }//调用前置摄像头 ，对IOS有效，安卓无效
video: { facingMode: { exact: "environment" } }//后置　

　

安卓、IOS都兼容的前置摄像头

const video = document.getElementById('webcam');
const button = document.getElementById('cameraBtn');
let currentStream;
button.addEventListener('click', event => {
　　nextSwiper(2);
　　var constraints = {
　　　　video: {'facingMode': "user"},
　　　　audio: false
　　};
　　navigator.mediaDevices.getUserMedia(constraints).then(stream => {
					  currentStream = stream;
					  video.srcObject = stream;
					  return navigator.mediaDevices.enumerateDevices();
					})
					.catch(error => {
					  console.error(error);
					});
});

　　

5、H5定位

var geolocation;
geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r) {
    if (this.getStatus() == BMAP_STATUS_SUCCESS) {
        var pt = r.point;
        gc.getLocation(pt, function(rs){
            var address = rs.addressComponents;
	    var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
           //map.panTo(r.point);//地图中心点移到当前位置
	   var latCurrent = r.point.lat;
	   var lngCurrent = r.point.lng;
	   //alert('我的位置：'+ latCurrent + ',' + lngCurrent);
	   var myPoint = new BMap.Point(lngCurrent, latCurrent);
	   //aDistance = map.getDistance(aPoint, myPoint);
	   bDistance = map.getDistance(bPoint, myPoint);
	   pos = {
		lat : latCurrent,
		lng : lngCurrent,
		nation : address.nation==undefined?null:address.nation,
		province : address.province==undefined?null:address.province,
		city : address.city==undefined?null:address.city,
		district : address.district==undefined?null:address.district,
		street : address.street==undefined?null:address.street,
		streetNumber : address.streetNumber==undefined?null:address.streetNumber,
		adcode : address.adcode==undefined?null:address.adcode,
		address : rs.address==undefined?null:rs.address,
		business : rs.business==undefined?null:rs.business,
	}
     });
   } else {
     switch (this.getStatus()) {
                case 2:
                    alert('位置结果未知 获取位置失败.');
                    break;
                case 3:
                    alert('导航结果未知 获取位置失败..');
                    break;
                case 4:
                    alert('非法密钥 获取位置失败.');
                    break;
                case 5:
                    alert('对不起,非法请求位置  获取位置失败.');
                    break;
                case 6:
                    alert('对不起,当前 没有权限 获取位置失败.');
                    break;
                case 7:
                    alert('对不起,服务不可用 获取位置失败.');
                    break;
                case 8:
                    alert('对不起,请求超时 获取位置失败.');
                    break;
            	}
	}
    }, {
			enableHighAccuracy: false,//是否要求高精度的地理位置信息
			timeout: 30000,//对地理位置信息的获取操作做超时限制，如果再该事件内未获取到地理位置信息，将返回错误
			maximumAge:10*1000//设置缓存有效时间，在该时间段内，获取的地理位置信息还是设置此时间段之前的那次获得的信息，超过这段时间缓存的位置信息会被废弃
    })
}

　　

6、手机上按钮禁用手机系统的菜单

window.oncontextmenu = function(){return false;}  适用于安卓，IOS10以下才行

　　

7、只选年的日期控件：WdatePicker

可以只选年，或只选月日，或只选时间

<input id="value" type="text" name="value" placeholder="" class="Wdate myFull" 
　　onFocus="WdatePicker({ isShowClear:false,readOnly:true , dateFmt:'yyyy',onpicked:function(){} })" 
　　value="${config.value}" style="height:32px;"/>

　　

只选小时分钟的时间控件  dateFmt:'HH:mm'

<div class="col-xs-4 nopadding"><label>开始时间</label></div>
<div class="col-xs-8 nopadding">
　　<input id="appoint_time_begin" type="text" name="appoint_time_begin" class="Wdate myFull timebox" 
　　　　onFocus="WdatePicker({ isShowClear:false,readOnly:true , dateFmt:'HH:mm',onpicked:function(){} })" 
　　　　value="${setting.appoint_time_begin}" style="height:32px;"/>
</div>