用户查询案例讲解

最新推荐文章于 2024-06-20 15:06:48 发布

m0_63448468

最新推荐文章于 2024-06-20 15:06:48 发布

阅读量45

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_63448468/article/details/133928863

版权

效果展示：

代码展示：

1.css代码

<style>
    body {
        text-align: center;
    }

</style>

2.js代码

<script>
        function seacrhonc(){
            
            let searchVal = document.querySelector(".seacrh-input").value;//value属性表示按钮的文本内容
            let isfind = false;
            let uuu = datas.users;
            for (let i = 0; i < uuu.length; i++) {
                let arr = uuu[i];
                if (arr.name == searchVal) {
                    console.log('123');
                    document.querySelector(".users-info").innerHTML =
                    `
                    <div>${arr.name}</div>
                    <div>${arr.age}</div>
                    <div>${arr.gender}</div>
                    <div>${arr.favs}</div>
                    `;
                    console.log('123');
                    isfind = true;
                    break;
                }
                if (!isfind) {
                    document.querySelector(".users-info").innerHTML = "查无此人";
                }
            }

        }
    </script>

3.html代码

    <input type="text" class="seacrh-input">
    <button class="secarh-btn" onclick="seacrhonc()">搜索</button>

    <div class="users-info">


    </div>

    <script src="data.js">

4.data对象内容

let datas={
   total:10,
   users:[
    {name:"小黑子",age:20,gender:"男",favs:["唱","跳","rap"]},
    {name:"小白",age:20,gender:"男",favs:["唱","跳"]},
    {name:"小红",age:20,gender:"女",favs:["rap"]},
    {name:"张三",age:20,gender:"男",favs:["唱","跳","篮球"]},
    {name:"李四",age:20,gender:"男",favs:["唱","rap"]},
    {name:"王二",age:20,gender:"男",favs:["跳","rap"]},
    {name:"小蓝",age:20,gender:"女",favs:["唱","rap"]},
    {name:"二狗子",age:20,gender:"男",favs:["唱","跳","rap","篮球"]},
    {name:"小山",age:20,gender:"男",favs:["rap","篮球"]},
    {name:"王大大",age:20,gender:"男",favs:["唱"]}
   ]   
}