前端 - JavaScript 练习 - 模拟添加标签&清除标签&鼠标禁用

一只小网虫

已于 2022-04-26 00:14:39 修改

阅读量212

点赞数 2

分类专栏： ECMAScript 练习

于 2021-09-12 11:23:57 首次发布

本文链接：https://blog.youkuaiyun.com/m0_48407729/article/details/120248428

版权

javascript html html5

ECMAScript 练习专栏收录该内容

12 篇文章

订阅专栏

这是一个关于JavaScript实现标签添加、移除、清空及禁用功能的代码示例。通过点击按钮，可以从列表中选择姓名添加到展示区域，并能删除已添加的标签。此外，还提供了全选删除和禁用按钮功能。代码使用了事件监听和元素操作，展示了前端基础交互逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

标签添加、清除、清空、禁用鼠标

<!--
 * @Date: 2021-09-10 20:56:22
 * @LastEditTime: 2021-09-12 11:19:31
-->
<!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>00-标签添加&移除</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            background: rgb(205, 133, 50);
        }
        
		//清除浮动
        .claer::before,
        .claer::after {
            content: '';
            display: table;
        }

        .claer::after {
            clear: both;
        }
	
	
        .content {
            width: 800px;
            margin: 0 auto;
        }

        .box {
            width: 100%;
            height: 320px;
            border-radius: 10px;
            margin: 20px 0 20px 0;
            background-color: white;
        }

        .btns,
        .delAll,
        .prohibit {
            width: 60px;
            height: 25px;
            outline: none;
            border: none;
        }

        .delAll,
        .prohibit {
            float: right;
            margin-right: 30px;
        }

        .prohibit {
            background-color: palegreen;
        }

        ul {
            width: 106px;
            margin-left: 30px;
            color: white;

        }

        ul li {
            padding: 5px 0;
            margin-top: 10px;
            background-color: yellowgreen;
            border-radius: 3px;
        }

        .texts {
            margin-left: 5px;
        }

        /* 修改样式 */
        .itme {
            width: 65px;
            height: 25px;
            text-align: center;
            line-height: 25px;
            background-color: rgb(153, 205, 50);
            border-radius: 5px;
            border: 1px solid rgb(154, 205, 50);
            padding: 5px;
            margin: 5px;
            color: white;
            display: inline-block;
        }

        .itme span:nth-child(2) {
            margin-left: 15px;
            cursor: pointer;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <div class="content claer">
        <div class="box" id="box">

        </div>

        <button class="delAll" id="dleAll">全部删除</button>
        <button class="prohibit" id="prohibit">禁用按钮</button>

        <ul>
            <li>
                <span class="texts">张三</span>
                <button class="btns" type="button">添加</button>
            </li>
            <li>
                <span class="texts">李四</span>
                <button class="btns" type="button">添加</button>
            </li>
            <li>
                <span class="texts">王五</span>
                <button class="btns" type="button">添加</button>
            </li>
            <li>
                <span class="texts">赵六</span>
                <button class="btns" type="button">添加</button>
            </li>
            <li>
                <span class="texts">周日</span>
                <button class="btns" type="button">添加</button>
            </li>
        </ul>
    </div>


    <script>
        var box = document.getElementById('box');
        var dleAll = document.getElementById('dleAll');
        var prohibit = document.getElementById('prohibit');

        var texts = document.getElementsByClassName('texts'); //通过使用 ByClassName 获取的标签 返回值是一个集合
        var btns = document.getElementsByClassName('btns');

        prohibit.onclick = func;
        var steat = false;

        for (var i = 0; i < btns.length; i++) {

            //将循环遍历获得的下标, 通过对象的使用方法,将下标缓存在 btns 对象中.
            btns[i].index = i; //缓存

            // console.log(btns[i].index);
            // console.log(this.index);

            //当点击的时候,执行函数
            btns[i].onclick = function () {

                //通过缓存的 下标 将对应的 TXT 文本取出,并赋值给新变量;
                var txts = texts[this.index].innerText;

                //主要结构
                /* 
                    <div class='box' id='box'>
                        <span class='itme'>
                            <span>李四</span>
                            <span>x</span>
                        </span>
                    </div>
                */

                //创建 itme 标签
                var itme = document.createElement('span');
                itme.className = 'itme';

                //创建文本标签
                var txtSpan = document.createElement('span'); //
                txtSpan.innerText = txts;

                //创建 x 删除 span 标签
                var delSpan = document.createElement('span');
                var dletxt = document.createTextNode('x');

                //设置 delSpan 的点击事件 当点击时,将 对应的 itme 从 box 中移除.
                delSpan.onclick = function () {
                    box.removeChild(itme);
                }

                //将删除标志 x 追加在 x span 标签中
                delSpan.appendChild(dletxt);

                //将获取的 TXT 文本追加在 itme 标签中
                itme.appendChild(txtSpan);

                //将删除标志所在的 span 标签追加在 itme 标签中
                itme.appendChild(delSpan);

                //将 itme 追加在准备好的 box 盒子中
                box.appendChild(itme);


                //生成随机数,随机数的计算公式: Math.floor(Math.random() * (max - min + 1) + min)
                var r = parseInt(Math.random() * 256);
                var g = parseInt(Math.random() * 256);
                var b = parseInt(Math.random() * 256);

                itme.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')';
                itme.style.border = '1px solid rgb(' + r + ',' + g + ',' + b + ')';

            }

        }

        //清空按钮 点击事件
        dleAll.onclick = function () {

            //直接将 box 盒子中的 内容清空
            box.innerHTML = '';
        }

        function func() {
            if (!steat) {

                for (var j = 0; j < btns.length; j++) {
                    btns[j].index2 = j

                    btns[j].disabled = true;
                    btns[j].style.cursor = 'not-allowed';

                    // console.log(btns[j].index);
                }
                prohibit.innerText = '启用按钮'
                prohibit.style.backgroundColor = 'red'

                dleAll.disabled = true;
                dleAll.style.cursor = 'not-allowed';

                // btns.disabled = true;
                // btns.style.cursor = 'not-allowed'

            } else {
                
                
                for (var j = 0; j < btns.length; j++) {
                    btns[j].index2 = j

                    btns[j].disabled = false;
                    btns[j].style.cursor = '';

                    console.log(btns[j].index);
                }

                prohibit.innerText = '禁用按钮'
                prohibit.style.backgroundColor = 'palegreen'

                dleAll.disabled = false;
                dleAll.style.cursor = '';

            }
            steat = !steat;
        }
    </script>
</body>

</html>

改后版本

<!--
 * @Date: 2021-09-10 20:56:22
 * @LastEditTime: 2021-09-12 11:19:31
-->
<!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>00-标签添加&移除</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            background: rgb(205, 133, 50);
        }

        .claer::before,
        .claer::after {
            content: '';
            display: table;
        }

        .claer::after {
            clear: both;
        }


        .content {
            width: 800px;
            margin: 0 auto;
        }

        .box {
            width: 100%;
            height: 320px;
            border-radius: 10px;
            margin: 20px 0 20px 0;
            background-color: white;
        }

        .btns,
        .delAll,
        .prohibit {
            width: 60px;
            height: 25px;
            outline: none;
            border: none;
        }

        .delAll,
        .prohibit {
            float: right;
            margin-right: 30px;
        }

        .prohibit {
            background-color: palegreen;
        }

        ul {
            width: 106px;
            margin-left: 30px;
            color: white;

        }

        ul li {
            padding: 5px 0;
            margin-top: 10px;
            background-color: yellowgreen;
            border-radius: 3px;
        }

        .texts {
            margin-left: 5px;
        }

        /* 修改样式 */
        .itme {
            width: 65px;
            height: 25px;
            text-align: center;
            line-height: 25px;
            background-color: rgb(153, 205, 50);
            border-radius: 5px;
            border: 1px solid rgb(154, 205, 50);
            padding: 5px;
            margin: 5px;
            color: white;
            display: inline-block;
        }

        .itme span:nth-child(2) {
            margin-left: 15px;
            cursor: pointer;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <div class="content claer">
        <div class="box" id="box">

        </div>

        <button class="delAll" id="dleAll">全部删除</button>
        <button class="prohibit" id="prohibit">禁用按钮</button>

        <ul>
            <li>
                <span class="texts">张三</span>
                <button class="btns" type="button">添加</button>
            </li>
            <li>
                <span class="texts">李四</span>
                <button class="btns" type="button">添加</button>
            </li>
            <li>
                <span class="texts">王五</span>
                <button class="btns" type="button">添加</button>
            </li>
            <li>
                <span class="texts">赵六</span>
                <button class="btns" type="button">添加</button>
            </li>
            <li>
                <span class="texts">周日</span>
                <button class="btns" type="button">添加</button>
            </li>
        </ul>
    </div>


    <script>
        const box = document.getElementById('box');
        const dleAllBtn = document.getElementById('dleAll');
        const prohibitBtn = document.getElementById('prohibit');

        const texts = document.getElementsByClassName('texts'); //通过使用 ByClassName 获取的标签 返回值是一个集合
        const btns = document.getElementsByClassName('btns');

        var state = false;

        prohibitBtn.addEventListener('click', switchBtn, false)

        //清空按钮 点击事件
        dleAllBtn.addEventListener('click', clearBox, false)


        for (var i = 0; i < btns.length; i++) {

            //将循环遍历获得的下标, 通过对象的使用方法,将下标缓存在 btns 对象中.
            btns[i].index = i; //缓存

            //当点击的时候,执行函数
            btns[i].addEventListener('click', addLabel, false)
        }


        function clearBox() {
            //直接将 box 盒子中的 内容清空
            box.innerHTML = '';
        }

        function switchBtn() {
            for (var j = 0; j < btns.length; j++) {
                btns[j].index2 = j

                btns[j].disabled = !state;
                btns[j].style.cursor = state ? '' : 'not-allowed';
            }

            prohibitBtn.innerText = state ? '禁用按钮' : '启用按钮'
            prohibitBtn.style.backgroundColor = state ? 'palegreen' : 'red'

            dleAllBtn.disabled = !state;
            dleAllBtn.style.cursor = state ? '' : 'not-allowed';

            state = !state
        }

        function addLabel() {

            //通过缓存的 下标 将对应的 TXT 文本取出,并赋值给新变量;
            var txts = texts[this.index].innerText;

            //主要结构
            /* 
                <div class='box' id='box'>
                    <span class='itme'>
                        <span>李四</span>
                        <span>x</span>
                    </span>
                </div>
            */

            //创建 itme 标签
            var itme = document.createElement('span');
            itme.className = 'itme';

            //创建文本标签
            var txtSpan = document.createElement('span'); //
            txtSpan.innerText = txts;

            //创建 x 删除 span 标签
            var delSpan = document.createElement('span');
            var dletxt = document.createTextNode('x');

            //设置 delSpan 的点击事件 当点击时,将 对应的 itme 从 box 中移除.
            delSpan.onclick = function () {
                box.removeChild(itme);
            }

            //将删除标志 x 追加在 x span 标签中
            delSpan.appendChild(dletxt);

            //将获取的 TXT 文本追加在 itme 标签中
            itme.appendChild(txtSpan);

            //将删除标志所在的 span 标签追加在 itme 标签中
            itme.appendChild(delSpan);

            //将 itme 追加在准备好的 box 盒子中
            box.appendChild(itme);


            //生成随机数,随机数的计算公式: Math.floor(Math.random() * (max - min + 1) + min)
            var r = parseInt(Math.random() * 256);
            var g = parseInt(Math.random() * 256);
            var b = parseInt(Math.random() * 256);

            itme.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')';
            itme.style.border = '1px solid rgb(' + r + ',' + g + ',' + b + ')';

        }
    </script>
</body>

</html>