[{ "name": "乐多", "identity": 1, "popularity": 150 }, { "name": "捏捏脸", "identity": 1, "popularity": 160 }, { "name": "别重复", "identity": 2, "popularity": 120 }, { "name": "南山", "identity": 1, "popularity": 178 }, { "name": "随风", "identity": 1, "popularity": 160 }, { "name": "泉", "identity": 1, "popularity": 170 }, { "name": "6v", "identity": 1, "popularity": 160 }, { "name": "婷婷", "identity": 1, "popularity": 155 }]
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> input { width: 30%; margin-left: 35%; margin-top: 50px; } .title { margin-left: 15%; margin-top: 20px; width: 70%; display: flex; } .name { margin-top: 15px; width: 33%; text-align: center; } .contents { width: 70%; margin-left: 15%; margin-top: 10px; } .content { width: 100%; display: flex; } </style> </head> <body> <input type="text" class="input" oninput="search()" /> <div class="title"> <div class="name">姓名</div> <div class="name">性别</div> <div class="name" onclick="boss()">身高</div> </div> <div class="contents"> <div class="content"> <div></div> <div></div> <div></div> </div> </div> <script> // 声明变量用于存储从服务器获取的 JSON 数据 let data; // 获取第一个类名为 'input' 的元素 let input = document.getElementsByClassName('input')[0]; // 创建 XMLHttpRequest 对象 let xhr = new XMLHttpRequest(); // 使用 GET 方法异步请求指定路径的资源 xhr.open('get', 'js/mohu.json', true); // 发送请求 xhr.send(); // 绑定 onreadystatechange 事件处理函数，处理响应状态变化 xhr.onreadystatechange = function() { // 检查请求是否已完成且响应状态为 200（成功） if (xhr.readyState == 4 && xhr.status == 200) { // 获取响应文本 let text = xhr.responseText; // 将响应文本解析为 JSON 对象 data = JSON.parse(text); // 遍历数据数组，根据身份属性进行转换 for (let i = 0; i < data.length; i++) { if (data[i].identity == 1) { data[i].identity = '女'; } else if (data[i].identity == 2) { data[i].identity = '男'; } } // 调用渲染函数，传入处理后的数据 renderer(data); } }; // 获取第一个类名为 'contents' 的元素 let contents = document.getElementsByClassName('contents')[0]; // 定义渲染函数，接收数据并将其显示在页面上 function renderer(data) { let str = ''; // 遍历数据数组，生成 HTML 内容 for (let i = 0; i < data.length; i++) { str += `<div class="content"> <div class="name">${data[i].name}</div> <div class="name">${data[i].identity}</div> <div class="name">${data[i].popularity}</div> </div>`; } // 将生成的 HTML 内容插入到 'contents' 容器中 contents.innerHTML = str; } // 定义布尔变量 i，用于指示排序顺序 let i = false; // 定义点击函数，用于排序数据 function boss() { // 如果 i 为 false，按受欢迎度从小到大排序 if (i == false) { data.sort(function(a, b) { return a.popularity - b.popularity; }); // 如果 i 为 true，按受欢迎度从大到小排序 } else if (i == true) { data.sort(function(a, b) { return b.popularity - a.popularity; }); } // 反转 i 的值 i = !i; // 调用渲染函数，更新页面内容 renderer(data); } // 定义搜索函数，用于根据输入框中的值过滤数据 function search() { let value = input.value; let arr = []; // 遍历数据数组，查找名称包含输入值的项 for (let i = 0; i < data.length; i++) { if (data[i].name.indexOf(value) >= 0) { arr.push(data[i]); } } // 调用渲染函数，显示过滤后的数据 renderer(arr); } </script> </body> </html>
