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

已于 2022-04-26 00:14:39 修改
阅读量180 收藏
点赞数 2
分类专栏： ECMAScript 练习
于 2021-09-12 11:23:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_48407729/article/details/120248428
版权

javascript html html5

目录

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

<!--
 * @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>

往期文章

在这里插入图片描述

一只 小网虫
关注
专栏目录
JavaScript学习笔记--进阶之路
JackieDYH的博客
03-16 1527
了解js特性&事件使用 20200316 1、JavaScript简介 历史： 第一个浏览器 就是文本和图片 网景公司 增强用户的使用体验 急需一门语言 实现用户和网页之间的交互 诞生：为了实现用户和网页的交互而出现 1、开发一门新语言 2、使用已经成熟的语言（java<sun> python c ------） ​ 这个时候使用的是java ---...
04-WebApl
人俗话不多
03-08 622
Web Apis 和 JS基础关联性 JS 的组成 API 和 Web api ​ MDN 详细 API : https://developer.mozilla.org/zh-CN/docs/Web/API API 是为我们程序提供的一个接口 , 帮助我们实现某种功能 Web API 主要针对 于浏览器提供的接口 , 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM ) . 主要针对于浏览器做交互效果 Web API 一般都有输入和输出 ( 函数的传参和返回值...
js jQuery 右键菜单 清屏
weixin_33901843的博客
10-17 108
主要用到了oncontextmenu事件，在oncontextmenu事件中使用return false 屏蔽掉原生右键菜单，再使用event获取鼠标的坐标位置，设置自定义菜单的位置。http://swisnl.github.io/jQuery-contextMenu/demo.htmlhttps://swisnl.github.io/jQuery-contextMenu/docs.htmlhtt...
web前端，标签切换总结4removeClass() 去除元素的类
翟浩浩Android专栏
10-02 680
html> html> head> meta charset="UTF-8"> script src="jquery-2.1.4.min.js">script> script> $(document).ready(function(){ $("button").click(function(){ $
原生JS实现删除<li>标签一行内容
weixin_30505751的博客
08-23 332
利用面向对象思想完成买家信息删除功能，每一条信息包含： 姓名（name）性别（sex）电话号码（number）省份（province） 实现以下要求： 不能借用任何第三方库，需要使用原生代码实现。结合给出的基本代码结构，在下方2处code here补充代码，完成买家信息的删除功能，注意此页面要在手机上清晰显示。js代码可以任意调整，例如和使用es6代码完成。 &lt...
鼠标禁用样式(cursor: not-allowed)&鼠标禁用事件(pointer-events: none)
最新发布
m0_46639734的博客
04-27 1856
当一个按钮禁用的时候，我们需要展示禁用样式，使用cursor: not-allowed，同时我们需要在禁用状态下点击按钮，是不应该触发事件的，但是我们知道只使用cursor: not-allowed，实际上我们点击按钮时还是触发了事件。接下来我们就来讨论如何实现禁用样式且无法触发事件的实现以上就是今天要讲的内容，本文介绍了两种禁用事件方法的使用。
javascript之dom详细笔记加练习
weixin_49213878的博客
09-13 1136
javascript-dom的详细笔记+小练习
小白IT:如何快速写出一个前端页面（网页），Python中如何使用前端语言什么是？JavaScript？BOM&DOM？Bootstrap？？
yidianyidei的博客
05-19 3944
JavaScript前端语言 1.什么是JavaScript语言 JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。用来给HTML页面增加动态功能 2.ECMAScript和JavaScript的关系 1996年11月，JavaScript的创造者–Netscape公司，将JavaScript提交给国际标准化组织ECMA。 次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是
黑马JavaScript核心操作BOM与DOM课程笔记1-DOM
weixin_42413901的博客
04-25 710
一、Web APIs 简介 此部分的目标：能够说出 Web APIs 阶段与 JavaScript 语法阶段的关联性； 能够说出什么是 API； 能够说出什么是 Web API. 1. Web APIs 和 JS 基础关联性 1.1 JS 的组成 1.2 JS 基础阶段以及 Web APIs 阶段 2. API 和 Web API 2.1 API API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软
前端标签样式清除大全
jolinoy的博客
12-03 680
前端标签样式清除大全下面是代码：
前端js创建标签和插入标签
个人笔记
03-19 7407
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="box"></div> <div class="root"></div> </body> </html> <script
前端去除html标签,使用正则表达式去除html标签
weixin_39754915的博客
06-11 701
不知道大家遇到这话总情况没有,从数据库读取数据,数据参杂着html标记等,在显式的时候控制字符个数,这个时候就会出现页面样式串行,使用正则表达式去除html标记就不会有还这个问题./// /// 去除HTML标记/// /// 包括HTML的源码 /// 已经去除后的文字public static string NoHTML(string Htmlstring){//删除脚本Htmlstring ...
js去除文本中的html标签
风的专栏
12-17 2万+
引入:考虑到文本是从富编辑器中取到的数据，有时候我们可能不需要显示格式，这时候需要去除html标签，而只需要其中的文本即可。 方式一：利用innerText,jQuery利用text() innerText会自动剔除html标签
javascript 去掉html标签,js怎么去掉html标签
weixin_26886855的博客
06-15 7556
js去掉html标签的方法：首先新建一个html文件；然后使用p标签创建多段文字；接着使用button标签创建一个“删除html”的按钮；最后创建delhtml()函数，并在函数内实现对指定的p标签进行删除即可。本文操作环境：Windows7系统、javascript1.8.5&&html5版，DELL G3电脑新建一个html文件，命名为test.html，用于讲解如何使用js删...
调用js 清除前端标签属性
m0_47375625的博客
01-29 1291
selenium删除前端标签属性
html标签移除,移除HTML标签_html
weixin_31487917的博客
06-19 2489
方法一 : 禁用html最简单的方法是直接禁用html标签而不用移除它们. 可以使用Replace()函数. 例如:strText = Replace(strText, “或者直接禁用所有的html:strText = Replace(strText, “”RegEx.Global = TrueRemoveHTML = RegEx.Replace(strText, “”)End Function若...
html.div禁用点击事件
热门推荐
程序员养成计划
07-14 6万+
style="pointer-events: none;" 可以这样封装： css：  .disable { pointer-events: none; } javascript：  //禁用 $.fn.disable = function () { $(this).addClass("disable"); }; //启用 $.fn.enable = function...
css实现鼠标禁用（鼠标滑过显示红色禁止符号）
XSL_HR的博客
12-21 1万+
从本文开始，将会用三篇文章来一步一步实现vue+antd+ts实战后台管理系统中table表格的不可控操作。中间会补充两篇css知识文章，方便后续功能的实现。 实现表格的不可控有两种实现方案，一种是 通过css的禁用操作来实现，另一种是 通过ant design vue自带的api属性来实现。本期文章将开门见山，给出css的实现方法以及最终效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一只 小网虫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值