一些简单方法的封装和练习

最新推荐文章于 2022-03-01 10:18:27 发布

z-ying-jian

最新推荐文章于 2022-03-01 10:18:27 发布

阅读量240

点赞数 3

文章标签：数组排序、冒泡、快速、数组去重、选项卡

本文链接：https://blog.csdn.net/qq_41989299/article/details/87021086

版权

数组排序

<script>
    // let ary = [21, 23, 12, 3, 11, 14, 3, 12, 21, 23, 11, 14];
    //第一种方法(冒泡排序：相邻两项比较交换位置)
    /*for (let i = 0; i < ary.length; i++) {
        for (let j = 0; j < ary.length-1-i; j++) {
            if (ary[j] > ary[j + 1]) {
                let temp = ary[j + 1];
                ary[j + 1] = ary[j];
                ary[j] = temp;
            }
        }
    }
    console.log(ary);*/
    //第二种方法（快速排序）
    /*function order(array) {
        if (array.length <= 1) {
            return array;
        }
        let middleNum = Math.floor(array.length / 2);
        let middleAry = array.splice(middleNum, 1)[0];
        let left = [];
        let right = [];
        for (let i = 0; i < array.length; i++) {
            if (array[i] < middleAry) {
                left.push(array[i]);
            } else {
                right.push(array[i]);
            }
        }
        return order(left).concat(middleAry, order(right));
    }

    console.log(order(ary));*/
    //第三种方法
    /* function order(array) {
         let newAry = [array[0]];
         for (let i = 1; i < array.length; i++) {
             for (let j = 0; j < newAry.length; j++) {
                 if (array[i] > newAry[j]) {
                     //从小到大
                     if ((j === newAry.length - 1)) {
                         newAry.push(array[i]);
                         break;
                     }
                 } else {
                     newAry.splice(j, 0, array[i]);
                     break;
                 }
             }
         }
         return newAry;
     }

     console.log(order(ary));*/
</script>

数组去重

<script>
    let ary = [21, 23, 12, 3, 11, 14, 3, 12, 21, 23, 11, 14];

    //第一种方法
    /* function deleteRepeat(array) {
         let obj = {};
         let newAry = [];
         for (let i = 0; i < array.length; i++) {
             obj[array[i]] = array[i];
         }
         for (let key in obj) {
             newAry.push(obj[key])
         }
         return newAry;
     }

     console.log(deleteRepeat(ary));*/
    //第二种方法
    /*    function removeRepeat(array) {
            let newAry = [];
            for (let i = 0; i < array.length; i++) {
                if (newAry.indexOf(array[i]) === -1) {
                    newAry.push(array[i]);
                }
            }
            return newAry;
        }
        console.log(removeRepeat(ary));*/
    //第三种方法
    /*    function deleteRepeat(array) {
            array.sort(function (a, b) {
                return a - b;
            });
            for (let i = 0; i < array.length - 1; i++) {
                if (array[i] === array[i + 1]) {
                    array.splice(i + 1, 1);
                    i&#45;&#45;;
                }
            }
            return array;
        }
        console.log(deleteRepeat(ary));*/
</script>

封装获取哥哥元素节点的方法

<script>
    let oLis = document.getElementsByTagName("li");
    function getBrother(ele) {
        let brother = ele.previousSibling;
        while (brother) {
            if (brother.nodeType === 1) {
                return brother;
            }else {
                brother = brother.previousSibling;
            }
        }
    }

    console.log(getBrother(oLis[2]));
</script>

四位随机验证码

let code = document.getElementsByClassName("code")[0];
    function getCode(ele) {
        let str = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
        //获取随机数
        let newStr = "";
        while (newStr.length < 4) {
            let index = Math.round(Math.random() * (str.length - 1));
            if (newStr.toUpperCase().indexOf(str[index].toUpperCase()) === -1) {
                newStr += str[index];
                str = str.replace(str[index], "");
            }
        }
        ele.innerHTML = newStr;
    }
    getCode(code);
    code.onclick = function () {
        getCode(this);
    }

选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <title>选项卡</title>
    <link rel="icon" href="">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-size: 20px;
            font-weight: 400;
            color: red;
        }

        #parent {
            width: 600px;
            height: 500px;
            margin: 100px auto;
        }

        ul {
            width: 100%;
            list-style: none;
            overflow: hidden;
            position: relative;
            top: 1px;
        }

        ul li {
            width: 198px;
            height: 50px;
            line-height: 50px;
            border: 1px solid #EEE;
            text-align: center;
            float: left;
            cursor: pointer;
        }

        #parent > div {
            width: 100%;
            height: 200px;
            line-height: 200px;
            text-align: center;
            border: 1px solid #EEE;
            box-sizing: border-box;
            display: none;
        }

        ul li.select {
            background: #EEE;
            border-bottom-color: #EEE;
        }

        #parent > div.select {
            background: #EEE;
            display: block;
        }
    </style>
</head>
<body>
<div id="parent">
    <ul>
        <li class="select">光年之外</li>
        <li>再见只是陌生人</li>
        <li>初学者</li>
    </ul>
    <div class="select">光年之外</div>
    <div>再见只是陌生人</div>
    <div>初学者</div>
</div>
<script>
    //获取元素
    var parent = document.getElementById("parent");
    var liList = parent.getElementsByTagName("li");
    var dList = parent.getElementsByTagName("div");

    /*  /!*给每一个我们要操作的li，绑定点击事件*!/
      for (var i = 0; i < liList.length; i++) {
          liList[i].index = i;
          liList[i].onclick = function () {
              //点击是我们先把他的兄弟元素的样式全部清除掉
              for (var j = 0; j < liList.length; j++) {
                  liList[j].className = "";
                  dList[j].className = "";
              }
              //给我们当前点击的这个li，和对应的Div添加一个类名
              this.className = "select";
              dList[this.index].className = "select";
          }
      }*/

    function change(index) {
        for (var i = 0; i < liList.length; i++) {
            //还是相同的操作，将样式全部清除
            liList[i].className = "";
            dList[i].className = "";
        }
        liList[index].className = "select";
        dList[index].className = "select";
    }

    //第二种方法，我们可以通过自执行函数，给li绑定点击事件
    /*   for (var i = 0; i < liList.length; i++) {
           +function (i) {
               liList[i].onclick = function () {
                   change(i);
               }
           }(i);
       }*/

    /*第三种方法，利用ES6中循环*/
    for (let i = 0; i < liList.length; i++) {
        liList[i].onclick = function () {
            change(i);
        }
    }
</script>
</body>
</html>

z-ying-jian

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一些简单方法的封装和练习

数组排序&lt;script&gt; // let ary = [21, 23, 12, 3, 11, 14, 3, 12, 21, 23, 11, 14]; //第一种方法(冒泡排序：相邻两项比较交换位置) /*for (let i = 0; i &lt; ary.length; i++) { for (let j = 0; j &lt; ary.len...
复制链接

扫一扫