JS基础----函数应用案例

最新推荐文章于 2023-02-17 13:31:16 发布

郭雨婷01

最新推荐文章于 2023-02-17 13:31:16 发布

阅读量192

点赞数

文章标签： javascript 前端 css3 js

本文链接：https://blog.csdn.net/m0_51272779/article/details/124644278

版权

函数

思维导图

在这里插入图片描述

案例一：目录

在这里插入图片描述
代码如下：

<body>
    <h1>前端班那点事</h1>
    <button onclick="zf()">正序/倒序</button>
    <aside>
         <ul></ul>
    </aside>
    <script>
        //数据源
        var arr = ["盒模型","浮动","定位","表单","响应式","弹性盒子","特效","动画","less/sass","网格","ES5"];
        //获取ul
        var ul=document.getElementsByTagName("ul")[0];
        //为ul添加内容
        function setUl(){
            //ul置空
            ul.innerHTML = '';
            //添加li
            for (var i=0; i<arr.length; i++){
                ul.innerHTML +=`
                <li>${arr[i]}</li>
                  `
            }
        }
        //执行
        setUl();
        //正序倒序
        function zf(){
            //反转数组
            arr=arr.reverse();
              //重置ul
              setUl();
        }
    </script>
</body>

案例二：搜索

在这里插入图片描述

代码如下：

 <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        html {
            font-size: 62.5%;
        }

        body {
            text-align: center;
        }

        ul {
            width: 300px;
            margin: 0 auto;
        }

        li {
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid lightgray;
            font-size: 2.6rem;
        }
    </style>
</head>

<body>
    <div>
        <input id="search" type="text">
        <button onclick="ss()">搜索</button>
    </div>
    <ul>
    </ul>
    <p id="total">共N条</p>
</body>
<script>
    var books = ["警世名言", "红楼梦", "百年孤独", "老人与海", "人生", "平凡的世界", "三国演义", "遥远的救世主", "钢铁是怎样炼成的", "白夜行", "魔鬼搭讪学", "童年", "白鹿原", "孟子", "解忧杂货铺", "飘", "嫌疑人X的献身", "活着"];

    var ul = document.querySelector("ul");
    var iptSearch = document.getElementById("search");
    var pTotal = document.getElementById("total");

    //data是需要显示的数据
    function setUl(data) {
        
        ul.innerHTML='';
        pTotal.innerHTML = "共" + data.length + "条";
        for (var i = 0; i < data.length; i++) {
            ul.innerHTML += `<li>${data[i]}</li>`;
        }

    }
    setUl(books);
    //搜索
    function ss(){
        //拿到需要搜索的数据 input.value
        var s=iptSearch.value;
        if(s===''){
            // 显示数据源
            setUl(books);
            return ;
        }
        //与数据源进行比对，返回一个新的数组
        var arr=[];
        for(var i=0; i<books.length; i++){
            //检索子字符串
            if(books[i].indexOf(s)!=-1){
                arr.push(books[i]);
            }
        }
        //显示新数组内容
        setUl(arr);

    }