代码

经常使用的代码段，方便查找。或者一些常用的工具类。

swiper

swiper 9 焦点在第三张

let isClickEvent = false;
// const swiper = new Swiper('.swiper-container');
// Optional parameters
const swiper = new Swiper('.swiper-container', {
    slidesPerView: 'auto',
    // slideToClickedSlide:true,
    spaceBetween: 12,

});
swiper.on('slideChange', function () {
    if (isClickEvent) {
        return;
    }
    isClickEvent = true;
    const previousIndex = swiper.previousIndex;
    const realIndex = swiper.realIndex;
    console.log(previousIndex, realIndex);
    const activeIndex = Array.from(swiper.slides).findIndex(el => el.classList.contains('active'));
    const prevIndex = parseInt(activeIndex) - 1;
    let nextIndex = parseInt(activeIndex) + 1;
    if (previousIndex > realIndex) {
        // 向前
        swiper.slides[activeIndex].classList.remove('active');
        swiper.slides[prevIndex].classList.add('active');
        swiper.slideTo(prevIndex > 2 ? prevIndex - 2 : 0);
    } else if (previousIndex < realIndex) {
        if (nextIndex < 3) {
            nextIndex = 3
        }
        // 向后
        swiper.slides[activeIndex].classList.remove('active');
        swiper.slides[nextIndex].classList.add('active');
        swiper.slideTo(nextIndex > 2 ? nextIndex - 2 : 0);
    }
    setTimeout(() => {
        isClickEvent = false;
    }, 0);
});
// 点击切换slide
swiper.on('click', function () {
    isClickEvent = true;
    const clickedSlide = swiper.slides[swiper.clickedIndex];
    if (!clickedSlide.classList.contains('active')) {
        // document.querySelector('.swiper-slide.active')?.classList.remove('active');
        swiper.wrapperEl.querySelector('.swiper-slide.active')?.classList.remove('active');
        clickedSlide.classList.add('active');
    }
    swiper.slideTo(swiper.clickedIndex > 2 ? swiper.clickedIndex - 2 : 0);
    // 重置标志变量为false
    setTimeout(() => {
        isClickEvent = false;
    }, 0);
});

js blobToBase64

blob 转 base64

const reader = new FileReader();
reader.onload = function() {
    const base64 = reader.result.split(',')[1];
    console.log(base64);
};
reader.readAsDataURL(blob);

base64 转 blob

function base64ToBlob(base64) {
    const arr = base64.split(',');
    const mime = arr[0].match(/:(.*?);/)[1];
    const bstr = atob(arr[1]);
    let n = bstr.length;
    const u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
}

页面自动滚动

10分钟滚动到页面底部

function smoothScrollToBottom(duration) {
    const startTime = performance.now();
    const startScrollY = window.scrollY;
    const distanceToScroll = document.body.offsetHeight - window.innerHeight - startScrollY;
    const framesPerSecond = 60;
    const totalFrames = (duration / 1000) * framesPerSecond;

    function scroll() {
        const currentTime = performance.now();
        const timeElapsed = currentTime - startTime;
        const progress = Math.min(timeElapsed / duration, 1);

        window.scrollTo(0, startScrollY + distanceToScroll * progress);

        if (timeElapsed < duration) {
        requestAnimationFrame(scroll);
        }
    }

    requestAnimationFrame(scroll);
}
                        
// 调用函数，10分钟滚动到底部
smoothScrollToBottom(10 * 60 * 1000);

json编辑

<link href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.9.2/jsoneditor.min.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.9.2/jsoneditor.min.js"></script>
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 20px;
        background-color: #f0f0f0;
    }
    h1 {
        color: #333;
    }
    #schema-container {
        max-width: 800px;
        margin: 20px auto;
        background-color: white;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
</style>
<body>
    <div id="schema-container"></div>
    <script>
        const schema = {
            "title": "Person",
            "type": "object",
        }
        const container = document.getElementById('schema-container');
        const options = {
            language: 'en',
            mode: 'view',
            modes: ['code', 'form', 'text', 'tree', 'view'],
            onError: function (err) {
                console.error(err);
            }
        };
        const editor = new JSONEditor(container, options, schema);
    </script>
</body>

网站推荐

收藏