“电影选座”小案例

林初笔墨

已于 2022-07-10 17:39:59 修改

阅读量193

点赞数

分类专栏： # JavaScript小案例文章标签：前端 javascript html

于 2022-07-10 17:39:12 首次发布

本文链接：https://blog.csdn.net/weixin_44600183/article/details/125708478

版权

JavaScript小案例专栏收录该内容

2 篇文章 0 订阅

订阅专栏

功能展示：

在这里插入图片描述

代码区：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电影选座</title>

    <style>
        ul {
            padding: 0px;
            border: 1px solid gray;
            width: 540px;
            height: 550px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-around;
        }
        li {
            list-style: none;
            width: 50px;
            height: 40px;
            background-color: gray;
            text-align: center;
            line-height: 40px;
            color: white;
        }
        div {
            width: 300px;
            height: 100px;
            border: 1px solid gray;
            margin: 0 auto;
            text-align: center;
            line-height: 100px;
        }
        .click{
            background-color: hotpink;
            border: 1px solid red;
        }
    </style>

</head>
<body>
        <ul>
            <li></li><li></li><li></li><li></li><li></li>
            <li></li><li></li><li></li><li></li><li></li>
            <li></li><li></li><li></li><li></li><li></li>
            <li></li><li></li><li></li><li></li><li></li>
            <li></li><li></li><li></li><li></li><li></li>
            <li></li><li></li><li></li><li></li><li></li>
            <li></li><li></li><li></li><li></li><li></li>
            <li></li><li></li><li></li><li></li><li></li>
            <li></li><li></li><li></li><li></li><li></li>
            <li></li><li></li><li></li><li></li><li></li>
            <li></li><li></li><li></li><li></li><li></li>
            <li></li><li></li><li></li><li></li><li></li>
            <p class="display: bath;"></p>  
            <div>屏幕中央</div>
        </ul>  


        <script>
            const liNode = document.getElementsByTagName('li');
            // for (let i = 0; i < liNode.length; i++) {
            //     const item = liNode[i];
            //     item.onclick = function() {
            //         const res = this.getAttribute('class');
            //         if (res) {
            //             this.setAttribute('class', '');
            //             this.innerHTML = '';
            //         }else{
            //             this.setAttribute('class', 'click');
            //             this.innerHTML = '已选';
            //         }
            //     }
            // }

            // addEventListener 选择
            let bodyNode = document.querySelector('body');
            let ulNode = document.querySelector('ul');
            bodyNode.addEventListener('click',(event)=>{
                const target = event.target;
                if (target.nodeName === 'LI') {
                    const rusult = target.getAttribute('class');
                    if (rusult) {
                        target.removeAttribute('class');
                        target.innerText = ''
                    }else{
                        target.setAttribute('class','click');
                        target.innerText = '已选'
                    }
                    event.stopPropagation();
                }
            },false)
        </script>

</body>
</html>