【杂记】（获取时间ajax查询、css瀑布流、js瀑布流、安卓视频滑动触发播放、循环判断回填ajax数据的对应值、判断手机号是不是纯数字、js随机颜色、css3进度条逐一加载动效 ）

1. 获取时间ajax查询
   
   

<button type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo">查询</button>
var grade;
var subject;
var teacherid;
//搜索
form.on('submit(formDemo)', function(data){
	adminquestionLists(1);
});
//答疑记录管理问题列表
function adminquestionLists(page) {
	adminquestionList({
		page:page,
		starttime: $("#starttime").val(),
		endtime: $("#endtime").val(),
		grade: grade,
		subject: subject,
		userid: teacherid
	}).then(res => {
		adminquestionListdata = res.data;
		total = res.total;
		renderPages(page);
		renderTable();
	})
};
adminquestionLists(1);

2. css3瀑布流布局 缺点是从左往右排列不是上下上下排列

-moz-column-count:2; 
-webkit-column-count:2; 
column-count:2;
-moz-column-gap:1%;
-webkit-column-gap: 1%;
column-gap: 1%;

3. js瀑布流 原理依次排列 下一个放在最小高度的后面

function voteboxload(){
	var len=$(".votebigbox .votebox").length;
	var obj=$(".votebigbox .votebox");
	var i=0;
	var ImgHeight={line1:[],line2:[]};
	for(i=0;i<len;i++){
		var objWidth = obj.eq(i).width();
		var realWidth = obj.eq(i).data('width');
		var realHeight = obj.eq(i).data('height');
		var objHeight = parseInt( realHeight * objWidth / realWidth + 50 );
		var leftHeight = getSum(ImgHeight.line1);
		var rightHeight = getSum(ImgHeight.line2);
		if(leftHeight > rightHeight ){
			obj.eq(i).css({top:rightHeight});
			obj.eq(i).css({right:"0px"});
			ImgHeight.line2.push(objHeight);
		}else{
			obj.eq(i).css({top:leftHeight});
			obj.eq(i).css({left:"0px"});
			ImgHeight.line1.push(objHeight);
		}
	}
}
function getSum(array){
	var sum = 0;
	for (var i = 0; i < array.length; i++){
		sum += parseInt(array[i]);
	}
	return sum;
}

4. 安卓视频滑动时触发播放
   H5移动端页面在安卓和IOS微信内置浏览器中呈现的形式不一样，所以我统一采用touch时间代替click事件
   1、touchstart事件触发的时候设置全局变量（名字随便取）flag = 1；
   2、touchmove事件触发的时候设置flag = 0；
   3、touchend事件触发的时候判断flag值，当flag = 1时触发touchend事件里的函数，触发完后在末尾设置flag = 1
   一下是代码

//开始触屏
$(document).on('touchstart','container',function(e){
	e.preventDefault();
	flag = 1;
})
//滑动触屏
$(document).on('touchmove','container',function(e){
	e.preventDefault();
	flag = 0;
})
//触屏结束
$(document).on('touchend','container',function(e){
	if(flag === 1){
		e.preventDefault();
		$('#img-code').attr('src',$(this).data('url'));
		flag = 1;
	}
})

5. 循环判断回填ajax数据的对应值
   

var _len = $('button');
var _grade = res.data.grade;
for(var i = 0;i<_len.length;i++){
	var _vall = $('button').eq(i).val();
	if(_grade == _vall){
		$('button').eq(i).addClass('active');
		return;
	}
}

6. 判断手机号是不是纯数字 if(!isNaN(MOBILE)){}
7. js随机颜色

function randomColor1(){
	var r = Math.floor(Math.random()*256);
	var g = Math.floor(Math.random()*256);
	var b = Math.floor(Math.random()*256);
	if(r+g+b > (256 - 80) * 3){
		return randomColor1();
	}
	if(r < 16){
		r = "0"+r.toString(16);
	}else{
		r = r.toString(16);
	}
	if(g < 16){
		g = "0"+g.toString(16);
	}else{
		g = g.toString(16);
	}
	if(b < 16){
		b = "0"+b.toString(16);
	}else{
		b = b.toString(16);
	}
	return "#"+r+g+b;
}
$(".showBookmarkcolor").last().css("background",randomColor1());

8. css3进度条逐一加载动效
   

.box{
	animation:animations is ease;
	-moz-animation:animations is ease;
	-webkit-animation:animations is ease;
}
@keyframes animations{
	0%{width:0px;}
	100%{width:400px;}
}
@-moz-keyframes animations{
	0%{width:0px;}
	100%{width:400px;}
}
@-webkit-keyframes animations{
	0%{width:0px;}
	100%{width:400px;}
}