JS核心08：JS应用练习

极乐码农

已于 2022-10-25 00:35:27 修改

阅读量755

点赞数

分类专栏： JavaScript 文章标签： javascript css 前端

于 2022-10-22 15:50:35 首次发布

本文链接：https://blog.csdn.net/weixin_43216437/article/details/127462096

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

JS应用练习

类的操作
拼图小游戏
签名

类的操作

背景： 通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面，这样执行的性能是比较差的，而且这种形式(通过style的形式进行修改)当我们要修改多个样式时，也不太方便
希望可以一行代码修改多个样式

我们可以通过修改元素的class属性来间接的修改样式：这样一来,我们只需修改一次，即可同事修改多个样式，浏览器只重新渲染页面一次，性能比较好，并且这种方式，可以使表现(css)和行为(js)分离代码低耦合

拼图小游戏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拼图</title>
    <style id="style1">
        .map {
            display: flex;
            flex-wrap: wrap;
        }

        .map-item {
            box-sizing: border-box;
            background: url("a.jpeg") no-repeat;
        }

        .hide {
            opacity: 0;
            pointer-events: none;
        }
    </style>
</head>
<body>
<div class="map"></div>
<script>
    const map = document.querySelector('.map');
    const rows = 3;
    const cols = 3;
    const size = 120;
    const itemEls = [];
    const posStyle = [];
    const posClassName = [];
    for (let i = 0; i < rows; i++) {
        for (let j = 0; j < cols; j++) {
            itemEls.push(`<div class="map-item" data-v="${i}-${j}" style="width: ${size}px;height: ${size}px"></div>`);
            posStyle.push(`.s${i}-${j}{background-position:${-j * size}px ${-i * size}px}`);
            posClassName.push(`s${i}-${j}`);
        }
    }
    map.innerHTML = itemEls.join('');
    map.style.width = `${size * cols}px`;
    const list = [...map.childNodes];
    list.forEach(el => {
        el.classList.add(posClassName.shift());
        el.onclick = () => {
            const indexs = el.getAttribute('data-v').split('-').map(v => Number(v));
            [
                `${indexs[0] - 1}-${indexs[1]}`,
                `${indexs[0] + 1}-${indexs[1]}`,
                `${indexs[0]}-${indexs[1] - 1}`,
                `${indexs[0]}-${indexs[1] + 1}`
            ].forEach(v=>{
                const makeEl = document.querySelector(`[data-v="${v}"]`);
                if (makeEl && makeEl.className.indexOf('hide') >= 0) {
                    //交换两个class
                    const sCls = makeEl.classList[1];
                    makeEl.className = `map-item ${el.classList[1]}`;
                    el.className = `map-item ${sCls} hide`;
                }
            })
        }
    })
    document.querySelector(`.s${rows - 1}-${cols - 1}`).classList.add('hide');
    document.getElementById(`style1`).append(posStyle.join(''));
</script>
</body>
</html>

签名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload=function () {
            let cvs = document.getElementById('cvs');
            let ctx=cvs.getContext('2d');
            let isDraw=false;
            cvs.addEventListener('mousedown',ev => {
                isDraw=true;
                ctx.moveTo(ev.clientX,ev.clientY);
            });

            cvs.addEventListener('mouseup',ev => {
                isDraw=false;
            });

            cvs.addEventListener('mousemove',ev =>{
                if (isDraw){
                    ctx.lineTo(ev.clientX,ev.clientY);
                    ctx.stroke();
                }
            })
        }
    </script>
</head>
<body>
<canvas id="cvs" width="500" height="300"></canvas>
</body>
</html>