JS/ JQ 常用小特效【持续更新中】

js 下载二进制文件

       axios({
           method: 'GET',
           url:this.baseUrl + '/system/user/collect/export',
           headers: { 'Authorization': 'Bearer ' + storage.get(ACCESS_TOKEN) },
           params:obj, //params
           responseType: 'arraybuffer', // 必须带 不带报错
         }).then((res)=> {
           if(res.data !=''){
                 const data = res.data
                 const url = window.URL.createObjectURL(new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}))
                 const link = document.createElement('a')
                 link.style.display = 'none'
                 link.href = url
                 link.setAttribute('download', 'excel.xlsx')
                 document.body.appendChild(link)
                 link.click()
                 document.body.removeChild(link)
           }

         })

js a标签下载

 var alink = document.createElement("a");
 alink.href = res.data.data.fileUrl;
 alink.download = res.data.data.fileOldName; //图片名
 alink.click();

字符串截取

let myUrl = 'http://xxxxx.com/h5/?codeId=6#/';
let b = myUrl.substring(myUrl.lastIndexOf('=') + 1) // 截取等于号后面
b.substring(0, b.indexOf("#")) // 截取＃号前面

字符串转为数组

    let list='1111111,222222,3333333,4444444,5555555,6666666'
    let lists = list.split(',')
    let arr = [] // 必须是数组 push 才能用
    lists.forEach((items)=>{
        lists = 'QQQ' + items;
        arr.push(items)
    })
    console.log(arr) // 新数组

事件冒泡

function prevent() {
 window.event? window.event.cancelBubble = true : e.stopPropagation();
}

table 点击切换

<!-- 没有css 懒... -->

<!-- HTML -->
    <ul class="sideslip-head">
        <li class="active"><span>1111</span></li>
        <li><span>22222</span></li>
        <li><span>33333</span></li>
    </ul>
    
    <div class="sideslip-box">
        <ul class="sideslip-titles">
            <li>11111</li>
        </ul>
        <ul class="sideslip-titles">
            <li>222222</li>
        </ul>
        <ul class="sideslip-titles">
            <li>33333</li>
        </ul>  
    </div>

/* JQ */
$(".sideslip-head>li").click(function(){
        $(this).addClass("active").siblings().removeClass("active");
        $(".sideslip-titles").eq($(this).index()).css("display","block").siblings().css("display","none")
})

底部导航点击切换

<div class="footer clearfix">
    <a href="answer.html">
        <img class="footImg1" src="images/fang_img/word.png">
        <img class="footImg2" src="images/fang_img/word1.png">
        <p>测评</p>
    </a>
    <a href="friends.html">
        <img class="footImg1" src="images/fang_img/pyQuan.png">
        <img class="footImg2" src="images/fang_img/pyQuan1.png">
        <p>素材圈</p>
    </a>
    <a href="my.html">
        <img class="footImg1" src="images/fang_img/person.png">
        <img class="footImg2" src="images/fang_img/person1.png">
        <p>个人中心</p>
    </a>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $(".footer a").each(function() {
            if($(this)[0].href == String(window.location)) {
                $(this).addClass("active").siblings().removeClass('active');
            }
        });
    });
</script>
//----------------------------
//页面引用

/*<div class="footerpage"></div>*/

    $(function () {
        $(".footerpage").load("footer.html");
    });

---

导航 滚动到指定位置后 悬浮

/*  

没有css
没有html
懒...

*/

/* JQ */
$(window).scroll(function(){
    var bignav = $(".导航名字");
    if( $(this).scrollTop() >195){
        bignav.addClass('导航置顶后的改变样式 的名字'); // 导航css不改变 可以删掉该行
        bignav.css({
            width:"100%",
            position:"fixed",
            top:50,
            zIndex:10
        });
    }
    else{
        bignav.removeClass('导航置顶后的改变样式 的名字'); // 导航css不改变 可以删掉该行
        bignav.css("position","static");
    }
});

---

点击按钮显示/ 隐藏 点击别处隐藏 点击浮层不动

---

/* css */


.wrapper{
    position:relative;
    display:inline-block;
}
    .popover{
        display: none;
        border:1px solid red;
        position:absolute;
        left:50px;
        top:0;
        white-space:nowrap;
        padding:10px;
        margin-left:10px;
        background: white;
    }
    .popover::before{
        position:absolute;
        right:100%;
        top:0;
        border: 10px solid transparent;
        border-right-color:red;
        content:'';
    }
    .popover::after{
        position: absolute;
        right:100%;
        top:0;
        border:10px solid transparent;
        border-right-color: white;
    }

<!-- html -->

<div id="wrapper" class="wrapper">
    <button id="clickMe">点我</button>
    <div id="popover" class="popover"><input type="checkbox">浮层</div>
</div>

//jq 方法1：点击自身能隐藏 其余功能 和方法2 一样

$(clickMe).on('click',function (ev) {
    ev.stopPropagation();
    $(popover).slideToggle(); //slideToggle 这个可换
    
    var flag = true;
    $(document).bind("click",function(e){
        var target = $(e.target);
        if(target.closest($(clickMe)).length == 0 && flag == true){
            $(popover).slideUp();
            flag = false;
        }
    });
});

//jq 方法2：点击自身不不不不不不不能隐藏 其余功能 和方法1 一样

$(clickMe).on('click',function () {
    $(popover).show()
    $(document).one('click',function(){
        console.log('document')
        $(popover).hide()
    })
})
$(wrapper).on('click',function(e){
    e.stopPropagation()
})

图片上传

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
    body {background: #edf0f2;}
    img {width: 100%;display: block;border: none;vertical-align: bottom;border: none;}
    input[type="button"] {-webkit-appearance: none;}
    .productDrawingBox {background-color: #fcfcfc;color: #333333;font-size: 16px;padding-left: 11px;border-bottom: solid 1px #e5e5e5;}
    .productDescription {height: 44px;line-height: 44px;}
    .productImg {height: 96px;overflow: hidden;} 
    .imgBiMG{width: 78px;height: 81px;float: left;display: block;}
    .uploadDIv {width: 78px;height: 81px;background-color: #edf0f2;font-size: 28px;color: #bfbfbf;text-align: center;line-height: 81px;float: left;position: relative;}
    .uploadDIv input {width: 78px;height: 78px;opacity: 0;position: absolute;right: 0px;top: 0px;z-index: 4;padding: 0;}
</style>
</head>
<body>
<div class="productDrawingBox">
    <div class="productDescription">上传图片</div>
        <div class="productImg">
            <div id="uploadBox"></div> 
            <div class="uploadDIv">
                <span>+</span><input type="file" name="file" multiple id="inputs" accept="image/*" class='fileTest' multiple="multiple" />
            </div>
        </div>
    </div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(function() {
    var img = []; //创建一个空对象用来保存传入的图片
    var AllowImgFileSize = '101376'; //1兆
    $("#inputs").change(function() {
        var fil = this.files;
        for(var i = 0; i < fil.length; i++) {
        var curr = $('#inputs')[i].files[0].size;
        if(curr > AllowImgFileSize * 101376) { //当图片大于1兆提示
            layer.msg("图片文件大小超过限制 请上传小于99M的文件");
        } else {
            reads(fil[i]);
            img.push($('#inputs')[i].files[0]); //将传入的图片push到空对象中
        }
    }
    if(img.length >= 6) { //判断图片的数量，数量不能超过3张
        $('.uploadDIv').hide();
    } else {
        $('.uploadDIv').show();
    }
    console.log(img);
    });
    
    function reads(fil) {
        var reader = new FileReader();
        reader.readAsDataURL(fil);     
        reader.onload = function() {
            document.getElementById("uploadBox").innerHTML += "<div class='divImg' id='uploadImg'><img src='" + reader.result + "' class='imgBiMG'></div>";
        }
    }
})
</script>
</html>

input 点击鼠标自动后移

<!-- HTML -->
<div class="position-find" >
    <form action=""name=card>
        <input maxlength="1" name="t1" type="text">
        <input maxlength="1" name="t2" type="text">
        <input maxlength="1" name="t3" type="text">
        <i>-</i>
        <input maxlength="1" name="t4" type="text">
        <input maxlength="1" name="t5" type="text">
        <input maxlength="1" name="t6" type="text">
        <input maxlength="1" name="t7" type="text">
        <i>-</i>
        <input maxlength="1" name="t8" type="text">
        <input maxlength="1" name="t9" type="text">
        <input maxlength="1" name="t10" type="text">
        <input maxlength="1" name="t11" type="text">
    </form>
</div>

/* JS */
$('.position-find input').bind('keyup',function(){
         if ($(this).attr('name') == 't11')
            $("input[type='tel']").focus()
            $(this).nextAll('input').first().focus(); 
})

字符串截取并添加和替换颜色

/* JS */
$('需要替换的').each(function(){
        var str = $(this).text();
        var h3Html = str.substring(0, 3)+"<span class='需要添加的颜色'>"+str.substring(3, 7)+"</span>"+str.substring(7, 11);
        $(this).html(h3Html);
    })
    

HTML公共样式引用

document.write('<!-----------  公共js和css ----------->');
document.write('' +
    '<link rel="stylesheet" href="./../css/public.css?vid1=0521">\n' +
    '<script src="../js/jquery.min.js" charset="utf-8"></script>\n' +
    '');

js 判断屏幕宽度（判断是否为手机）

    //定义变量获取屏幕视口宽度
    var windowWidth = $(window).width();
    if(windowWidth < 640){
        // 内容
    }
    if(windowWidth >= 640){
        // 内容
    }

点击按钮 文字复制

【vue】
copyFont:function(val) {
                var input = document.createElement('input');
                input.setAttribute('id','copyId');
                input.value= val
                document.querySelector('body').appendChild(input)
                const range = document.createRange();
                range.selectNode(document.getElementById('copyId'));
                const selection = window.getSelection();
                if(selection.rangeCount> 0)selection.removeAllRanges();
                selection.addRange(range);
                document.execCommand('copy');
                document.getElementById('copyId').remove()
                alert("复制成功！");
            },

---

页面禁止滑动 （兼容：安卓/iOS）

document.body.addEventListener('touchmove', function(e){
   e.preventDefault();
}, { passive: false });

时间格式转换 yyyy-mm-dd

var d = new Date('Thu May 12 2016 08:00:00 GMT+0800 (中国标准时间)');  
var  resDate = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();