前端代码笔记（不断更新...）

ajax上传文件进度条（上传时后台完整接收显示进度100%）

$.ajax({
			    url: url,
                type: "POST",
                data: data,
                processData:false,    //必须
                contentType:false,    //必须
                xhr: function() {        //ajax进度条，直接拿过去就可以用
                    var xhr = $.ajaxSettings.xhr();
                    if (xhr.upload) {
                        xhr.upload.addEventListener("progress", function (e) {
                            var loaded = e.loaded; //已经上传大小情况
                            var tot = e.total; //附件总大小
                            var per = Math.floor(100 * loaded / tot); //已经上传的百分比
                            element.progress('demo', per);
                          //  console.log(per)
                           // $('.progress-bar').css('width',per+'%');   //这里指的是进度条的宽度等于完成的百分比
                            // $.fn.progressInit.draw(per + '%'); //绘制经度条
                        }, false);
                        return xhr;
                    }
                },
                success: function (json) {
                	if(json.status==1){
                		layer.msg(json.msg, {icon: 6});
                	}else{
                		layer.msg(json.msg, {icon: 5});
                	}
                	
                },
                error: function () {
                    
                }
										
			});

ajax上传文件显示加载图标（业务完整执行完后返回提示并关闭加载图标）

var url = "${ctx}/excel/indexrfgre.to";
		var data = new FormData($("#form-upload")[0]);
		console.log("data=" + data);
		layer.load();
		$.ajax({
			"url": url,
			"data": data,
			"type": "POST",
			"dataType": "json",
			"contentType": false,
			"processData": false,
			"success": function(json) {
				layer.closeAll('loading');
				if (json.status == 1) {
					layer.msg(json.msg, {icon: 6});
				} else {
					layer.msg(json.msg, {icon: 5});
				}
			},
			"error": function() {
				layer.closeAll('loading');
				layer.msg("接口异常", {icon: 5});
			}
		});

---

复选框数据拼接成字符串以“，”号隔开

代码用于多个form表单一键提交获取单选和复选值拼接

var size = ${infosize};
	var data = "";
	for(var i=1; i<=size;i++){
		var arr = [];
		 $("form[name='form"+i+"'] input[name='answer']:radio").each(function(index) {if ($(this).prop("checked") === true) {         
	          //  console.info($(this).val());
	           arr.push($(this).val());
	       }
	   });		 
			 $("form[name='form"+i+"'] input[name='answer']:checkbox").each(function(index) {if ($(this).prop("checked") === true) {         
		          //  console.info($(this).val());
		           arr.push($(this).val());
		       }
			 }); 
	//拼接为一个字符串，用逗号分隔：
	var arrs = arr.join().toString();
	//console.log("arrs=" + arrs);
data += "&arrs"+i+"="+arrs;		
	}

---

多个复选框随机选中100个

$("#buttsui100").click(function(){
				var ar=new Array()//存复选框val
				$("input[name='ltem_bank']:not(:checked)").each(function() { //获取未选中复选框
					
					ar.push($(this).val());//值存数组
					
					});
				var arr = [];//存放随机数的数组
				for(var i=0;i<100;i++){
					var radomNum =  random(0, ar.length);//自定义随机数方法
					if(arr.indexOf(radomNum) == -1){//防止重复
						 arr.push(radomNum);//随机数存数组
					}else{
							//如果有重复则增加循环次数
						i--
					}
					
					var a = ar[radomNum];
					//console.log(ar);
					//console.log(a);
						$(":checkbox[value='"+a+"']").prop("checked",true);//根据复选框的val值执行选中状态
						 form.render();
					
				}
			});

---

删除未选中的复选框

$("input[name='ltem_bank']:not(:checked)").each(function() { //获取未选中复选框遍历
						$(this).parent().remove();//.parent()选择上一级；.remove()删除元素
						});

---

删除与选中复选框值相等的未选中的复选框

 $("input[name='ltem_bank']:checked").each(function() {  //获取并遍历选中复选框
					       var s1=$(this).val();
					$("input[name='ltem_bank']:not(:checked)").each(function() { //获取并遍历未选中复选框
					var s2 =$(this).val();
					if(s1==s2){
						$(this).parent().remove();
					}
					//console.log(s1+":"+s2);
					});
					});

---

防止页面后退返回上一步

   <script language="javascript">
        //防止页面后退
        history.pushState(null, null, document.URL);
        window.addEventListener('popstate', function () {
            history.pushState(null, null, document.URL);
        });
    </script>

---

判断鼠标是否在元素内

 $(document).mousemove(function(e){ 
	    			if($.contains($(".videobutt")[0],e.target) || $(".videobutt")[0]==e.target){
	    				
	    				asjmjh(as);
	    			}else{
	    				
	    			}

---

关于ajax返回值不能正常用问题

json = JSON.parse(json);这个方法是把字符串转换为json对象这样就可以正常使用；

 function isJsonString(json) {
         try {
             if (typeof JSON.parse(json) == "object") {
                 return json;
             }
         } catch(e) {
         }
         return JSON.parse(json);
     }

---

鼠标经过和离开的两种事件及区别

mouseover()//鼠标经过事件；当鼠标经过子标签在返回此标签会重复触发
mouseenter()//鼠标经过事件；鼠标只要在当前标签上就不会重复触发（推荐）

mouseout()//鼠标离开事件；当鼠标经过子标签在返回此标签会重复触发
mouseleave()//鼠标离开事件；鼠标只要在当前标签上就不会重复触发（推荐）

---

元素根据鼠标移动

	var offsetX = 0;
	var offsetY = 0;
	//第一步：鼠标点下时获取鼠标落下的位置
	$("div").mousedown(function(ev){
		offsetX = ev.clientX - $(this).offset().left;
		offsetY = ev.clientY - $(this).offset().top;

		var _this = this;
		//第二步：在document下div跟随鼠标移动
		$(document).mousemove(function(ev){
			$(_this).css({
				left: ev.clientX - offsetX,
				top: ev.clientY - offsetY
			})
		})
	})
	//第三步：在document下 鼠标抬起，取消跟随事件
	$(document).mouseup(function(){
		$(document).off("mousemove");
	})

---

监听元素大小变化

$("div").resize(function(){
				 
		});

---

#批量拖拽文件上传并预览

//拖拽函数，imageid为需要拖拽的元素id,fileid为input id ，imgid为预览图片区域id
let touZhuai = (imageid,fileid,imgid)=>{

    // 拖拽上传
    $(imageid).on({
        //拖进触发的事件
        "dragenter": function (e) {
            //清除浏览器默认的功能
            e.preventDefault();
            console.log("有东西在拖动")
        },
        //在目标地点拖动触发的事件
        "dragover": function (e) {
            //清除浏览器默认的功能
            e.preventDefault();
            console.log("文件进来了")
        },
        //在目标地点放置后出发的事件
        "drop": function (e) {
            //清除浏览器默认的功能
            e.preventDefault();
            //获取文件的信息，可自行输出查看
            let file = e.originalEvent.dataTransfer.files;

            console.log(file);
            //将获取的文件信息替换到input的自带属性的files中
            $(fileid).prop("files",file);
            //预览图片批量显示
            for (let i = 0; i < file.length; i++) {

                var fr = new FileReader();
                fr.onload = function(e){
                    console.log(e);
                    var image = new Image();
                    image.src = e.target.result;
                    $(imgid).append(image)
                }
                fr.readAsDataURL(file[i]);//循环文件流

            			}


        }
    })

}

---