zoukankan      html  css  js  c++  java
  • 添加标签

    上先上干货,以下是源码,

    刚刚学习JS。搞了半天才搞出来,不知道有什么BUG,

    主要功能是:添加标签,添加个数限制,排除重复,

    遇到的坑,

    indexof()的不兼容IE6-IE8不兼容

    JS获取文字的方法

    通过保存文字到数组,来判断是否有文字重复,

    通过数组长度来判断,添加的个数,做个数限制!

    总的来说总算写完了。真是东拼西凑啊!!!!!!!!!!!

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>创建元素</title>
        <script>
        window.onload = function() {
            var ainput = document.getElementById('Input');
            var aBtn = document.getElementById('Btn');
            var Oul = document.getElementById('Oul');
            var arrs = [];
    
            aBtn.onclick = function() {
                var newLi = document.createElement('li');
                var aLi = Oul.getElementsByTagName('li'); //选中所有LI
                newLi.innerHTML = '<span>' + ainput.value + '</span>' + '<a href="javascript:;" class="del">删除</a>';
                newLi.className = "classname";
    
                var btnA = Oul.getElementsByTagName("a");
                //删除标签方法
                function delLi(e) {
                    for (var i = 0; i < btnA.length; i++) {
                        e[i].onclick = function() {
    
                            var x = arrs.indexOf(text(this.previousSibling)); //获取兄弟节点的值
    
                            Oul.removeChild(this.parentNode);
    
                            arrs.splice(x, 1);
                        }
                    }
                };
                //indexof()兼容写法
                if (!Array.prototype.indexOf) {
                    Array.prototype.indexOf = function(ele) {
                        // 获取数组长度
                        var len = this.length;
                        // 检查值为数字的第二个参数是否存在,默认值为0
                        var fromIndex = Number(arguments[1]) || 0;
                        // 当第二个参数小于0时,为倒序查找,相当于查找索引值为该索引加上数组长度后的值
                        if (fromIndex < 0) {
                            fromIndex += len;
                        }
                        // 从fromIndex起循环数组
                        while (fromIndex < len) {
                            // 检查fromIndex是否存在且对应的数组元素是否等于ele
                            if (fromIndex in this && this[fromIndex] === ele) {
                                return fromIndex;
                            }
                            fromIndex++;
                        }
                        // 当数组长度为0时返回不存在的信号:-1
                        if (len === 0) {
                            return -1;
                        }
                    }
                }
                //兼容浏览器获取节点文本的方法
                function text(e) {
                    var t = "";
                    //如果传入的是元素,则继续遍历其子元素
                    //否则假定它是一个数组
                    e = e.childNodes || e;
    
                    //遍历所有子节点
                    for (var j = 0; j < e.length; j++) {
                        //如果不是元素,追加其文本值
                        //否则,递归遍历所有元素的子节点
                        t += e[j].nodeType != 1 ?
                            e[j].nodeValue : text(e[j].childNodes);
                    }
                    //返回区配的文本
                    return t;
                }
    
                //判断数组中是否存在的方法
                Array.prototype.S = String.fromCharCode(2);
                Array.prototype.in_array = function(e) {
                    var r = new RegExp(this.S + e + this.S);
                    return (r.test(this.S + this.join(this.S) + this.S));
                };
                //先判断是否存在,再进行操作
                if (arrs.in_array(ainput.value) /*有重复返回ture*/ ) {
                    alert("有重复了");
                } else if (arrs.length > 5 - 1) {
                    alert("最多五个");
                } else {
                    arrs.push(ainput.value); //添加到数组
                    Oul.appendChild(newLi); //创建元素
                };
    
                delLi(btnA); //删除的方法
    
            }
        }
        </script>
    </head>
    
    <body>
        <input type="text" value="" id="Input">
        <input type="button" value="添加" id="Btn">
        <ul id="Oul"></ul>
    </body>
    
    </html>
    • 相关阅读:
      windows10 + anaconda + tensorflow-1.5.0 + python-3.6 + keras-2.2.4配置和安装
      k-center问题-学习
      交换机+路由器 网络口连接桥接关系示意
      用scp命令来通过ssh传输文件,ssh推送.py程序到CentOS7服务器端出现lost connection错误
      codevs 1519 过路费 最小生成树+倍增
      10.18 noip模拟试题
      poj 3565 ants
      [国家集训队2011]种树 (神贪心~~)
      poj 1821 Fence 单调队列优化dp
      SPFA 小优化*2
    • 原文地址:https://www.cnblogs.com/hupan508/p/5197421.html
    Copyright © 2011-2022 走看看