js原生事件

一、遍历选中的多选框，获取值

$('input[name=ids]:checked').each(function (i, num) {
    let selectStr="";
	if (selectStr == "") {
		 selectStr = $(num).val();
	} else {
		selectStr += "," + $(num).val();
	}
	console.log("获取选中的id",selectStr)
});

二、点击复制文本

<input id="copytxt" value="要复制的内容"></input>
<button id="copy">复制</button>
 $("#copy").click(function () {  
	$("#copytxt").select();
    document.execCommand("copy");
    alert("复制成功");
 })	

document.execCommand(‘copy’)不生效，原因如下：
input框不能有disabled属性，input的width || height 不能为0；
input框不能有hidden、display:none属性；
解决方案：在不改变原需求的情况下，设置 opacity:0; 实现不可见，position:absolute; 脱离文档流解决占空间的问题

三、去掉字符串首尾空格，中间空格

去掉前后空格 str.trim();
去掉所有空格(前后以及中间) str.replace(/\s/g,“”);

四、数组转字符串，字符串转数组

//数组转字符串
let arr = [1,2,3,4,5];
console.log(arr.join(","));//1,2,3,4,5
console.log(arr.toString());//1,2,3,4,5
//字符串转数组
let str = "12345";
console.log(str.split(""));//["1","2","3","4","5"]

五、监听滚动

window.onscroll = function () {
  //获取当前滚动的高度
  document.documentElement.scrollTop
  //获取某元素的位置
  $("元素类名")[0].offsetTop
  //设置要滚动的位置
  $(document).scrollTop("距离");
}

六、自制提示弹框，样式可以自己定义

function txt(params) {
    if($("#mesTxt").length == 0){
       $("body").append("<p id='mesTxt'>"+params+"</p>");
    }
    let showTxt = setTimeout(function () {
       $("p").remove("#mesTxt");//删除节点
       clearInterval(showTxt);
    },1500)
}

七、获取图片的原本大小

function  getNaturalSize(img){
    var naturalSize ={};
    if(window.naturalWidth && window.naturalHeight){
        naturalSize.width = img.width;
        naturalSize.height = img.height;
    }else{
        var image = new Image();
		image.src = img.src;
        naturalSize.width = image.width;
        naturalSize.height = image.height;
    }
    return naturalSize;
}

八、没有disabled属性的元素可以添加样式pointer-events:none;禁止点击

九、点击空白处隐藏

$(document).mouseup(function(e){
   var con1 = $('.clickHide');//点击.clickHide以外的空白隐藏#shengval
   if(!con1.is(e.target) && con1.has(e.target).length === 0){
       $("#shengval").hide();
   }
   var con2 = $('.showBox');
   if(!con2.is(e.target) && con2.has(e.target).length === 0){
       $(".ppid-box .layui-form-select").removeClass("show");
       $("#ffidval").hide();
   }
   var con3 = $('.pid-box');
   if(!con3.is(e.target) && con3.has(e.target).length === 0){
       $(".pid-box .layui-form-select").removeClass("show");
       $("#fidval").hide();
   }
});

十、页面中自动滚动图片，当移入鼠标时停止滚动，移出鼠标时开始滚动

var scroll = document.getElementsByClassName("picList");//外层父元素
    var num = 0;
    var time = setInterval(function () {
        num--;
        scroll[0].style.marginLeft = num + "px";
        if (num <= -1800) {
            num = 0;
        }
    }, 50);
    scroll[0].addEventListener("mouseover", function () {
        clearInterval(time);
    });
    scroll[0].addEventListener("mouseout", function () {
        time = setInterval(function () {
            num--;
            scroll[0].style.marginLeft = num + "px";
            if (num <= -1800) {
                num = 0;
            }
        }, 50);
    })

十一、无缝隙一直滚动显示

//html
<div id="listvipp">
<ul class="clearfix scollbox1">
   <li><span class="clue__price">1万</span></li>
   <li><span class="clue__price">1万</span></li>
   <li><span class="clue__price">1万</span></li>          
   <li><span class="clue__price">1万</span></li>
   <li><span class="clue__price">1万</span></li>                       
</ul>
</div>
//css
#listvipp {
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}

#listvipp ul {
    display: flex;
}

#listvipp ul li {
    width: 500px;
    min-width: 500px;
    flex-shrink: 0;
}
//js
var scroll1 = document.getElementsByClassName("scollbox1");
var num1 = 0;
var time = setInterval(function () {
   num1--;
   scroll1[0].style.marginLeft = num1 + "px";
   if (num1 <= -1200) {
       num1 = 0;
   }
}, 10);