js 一些奇怪用法

 

防抖延迟刷新

function debounce(fn, delay) {
    let timerId = null;
    return function () {
        let self = this;
        let args = arguments;
        timerId && clearTimeout(timerId);
        timerId = setTimeout(function () {
            fn.apply(self, args);
        }, delay || 1000);
    }
}

window.onresize = debounce(function () {
    location.reload();
}, 500);

兼容多个函数事件

function debounce(fn, delay) {
    let timerId = null;
    return function () {
        let self = this;
        let args = arguments;
        timerId && clearTimeout(timerId);
        timerId = setTimeout(function () {
            fn.apply(self, args);
        }, delay || 1000);
    }
}

window.onresize = function(){
    debounce(function () {
        myChart.resize()
    }, 500)();
};

 

滑动效果

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            position: fixed;
            left: 50%;
            bottom: 2vh;
            width: 44.5vw;
            padding: 3vh 3vw 0;
            box-sizing: border-box;
            margin-top: 5vh;
            transform: translate(-50%, calc(100% + 2vh));
            transition: transform 0.5s ease-out;
            background-color: rgba(8, 55, 126, 0.3);
            height: 100px;
        }
    </style>
</head>
<body>

<div>Hello World</div>
<script>
    window.onload = function(){
        document.querySelector("div").style.transform = "translate(-50%, 0)";
    }
</script>


</body>
</html>

 

js 图片base64转换

<script>
    function getBase64Image(img) {
        let canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        let ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, img.width, img.height);
        return canvas.toDataURL("image/png");
    }
    function setBackgroundImg() {
            let img = document.createElement('img');
            img.onload =function() {
                let data = getBase64Image(img);
                localStorage.setItem("background-img",data);
            };
            img.src = '/static/management/layouts/img/background-img.png';
        }
    setBackgroundImg()
</script>

 

字符串时间格式

//获取当前时间
let date = new Date();
//格式化为本地时间格式
date.toLocaleString('chinese', {hour12: false});
//将时间写入div
div1.innerHTML = date.toLocaleString('chinese', {hour12: false});



// 每秒更新一次时间
const showDate =()=>{
    let div1 = document.getElementById("times");
    setInterval(function getDate() {
        //获取当前时间
        let date = new Date();
        //格式化为本地时间格式
        //将时间写入div
        console.log(date)
        div1.innerHTML = date.toLocaleString('chinese', {hour12: false});
    }, 1000);
};

 

向上轮播效果

function rightDown() {
    let tag = document.querySelector(".community-policing-contrast");
    let contentTag = tag.querySelector("ul");

    function mainContrast(){

        let scrollY = 0;
        let time = null;

        function startRoll(){
            time = setInterval(function () {
                scrollY = scrollY + 1;
                tag.scrollTop = scrollY;
                if((tag.scrollHeight) /2 < scrollY){
                    scrollY=0;
                }
            },50)
        }
        startRoll();

        contentTag.onmouseenter = () => {
            clearInterval(time);
        };
        contentTag.onmouseleave = () => {
            startRoll()
        };

    }

    HomeApis.getCommunityPolicingContrast().then(res => {
        let liTag = '';
        res.data.map(item=>{
            liTag += `<li>hello， Irving! </li>`;

        });
        contentTag.innerHTML=liTag+liTag;
        if (res.data.length>7) mainContrast();
    }).catch(err=>{});

}

 

posted @ 2021-12-04 14:18  陨落&新生  阅读(69)  评论(0)    收藏  举报