这个功能很有意思，下面我把我的示例给大家看看！
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <title></title> <link rel="stylesheet" href="css/index.css" /> </head> <body> <div id="tb"> <img src="img/huoy.jpg" width="100%" height="100%"/> </div> <input id="su" placeholder="请输入搜素内容" oninput="sr()"/> <div id="xuanx"> <p>序号</p> <p id="xing">姓名</p> <p id="jy" onclick="jiaoy()">交易量</p> <p id="gs">公司</p> </div> <div id="nrong"> <div id="nrone"> <p>1</p> <p>刘志杰</p> <p>999</p> <p>五头牛</p> </div> </div> <script src="js/index.js"></script> </body> </html>
#tb{ width: 100%; height: 150px; background-color: mediumpurple; text-align: center; font-size: 20px; line-height: 55px; } #tb img{ background-size: 100%; } #nrong{ width: 100%; height: 600px; background-color: lightskyblue; overflow: scroll; } #su{ width: 30%; height: 30px; background-color:white; margin-left: 35%; color: rebeccapurple; } #xuanx{ width: 100%; height: 80px; background-color: rgba(193, 193, 193, 0.2); display: flex; justify-content: space-around; line-height: 45px; font-size: 20px; } #nrone{ width: 100%; height: 60px; background-color: slategray; display: flex; justify-content: space-around; font-size: 18px; }
上面是基本样式，还是很不错的！
//声明一个全局变量 mg let mg; //获取HTML中的交易量; let jy = document.getElementById('jy'); //获取HTML中的内容框; let nrong = document.getElementById('nrong'); //获取input输入款; let su = document.getElementById('su'); //声明new XMLHttpRequest; let mh = new XMLHttpRequest(); //使用 open 方法指定要请求的地址、类型和方式; mh.open('get', 'mohu.json', true); //使用send方法发送请求; mh.send(); //绑定 onreadystatechange 事件; mh.onreadystatechange = function() { if (mh.readyState == 4 && mh.status == 200) { let text = mh.responseText; console.log(text); let data = JSON.parse(text); console.log(data); mh = data; wb(mh); } } //判断 readyState 和 status 的状态; // 接收数据通过 json 转换使用，是用json将数据转化为js可用的形式; //mg=请求过来的数据; //调用wb渲染; //渲染函数 //创建一个函数 函数名为wb function wb(data) { let str = ""; for (let i = 0; i < data.length; i++) { str += `<div id="nrone"> <p>${[i+1]}</p> <p>${data[i].num}</p> <p>${data[i].volume}</p> <p>${data[i].firm}</p> </div>`; } nrong.innerHTML = str; } //声明一个空字符串; //for循环 循环data数据; //将自己创的jon数据与HTML的内容拼接; //用innerHTHL给最外层的nrong进行渲染; //声明一个全局变量jiao,变量值为 true(交易量); let jiao = true; //创建函数 函数名为jiao(){ function jiaoy() { jiao = !jiao; let arr = []; if (jiao == true) { arr = mh.sort(function(a, b) { return a.volume - b.volume; }); } else { arr = mh.sort(function(a, b) { return b.volume - a.volume; }); } wb(arr); } //通过点击让jiao的值取反 jiao = !jiao; // 创建新的空数组 //if判断(变量值为true时){ //从小到大排序 赋值给新数组; // }else{ //从大到小排序 赋值给新数组; // } // 调用渲染函数 传递的数据是新数组; //} //创建函数 函数名为sr; function sr() { let arr2 = []; let val = document.getElementById('su').value; for (let b = 0; b < mh.length; b++) { if (String(mh[b].num).indexOf(val) > -1 || String(mh[b].volume).indexOf(val) > -1 || String(mh[b].firm).indexOf( val) > -1) { arr2.push(mh[b]); } } wb(arr2); } //给input输入框绑定 oninput事件; //声明一个空数组 arr2; //声明一个变量 val 让它的值等于输入框的值; //for 循环数据data; //if 判断(姓名、交易量、公司的isdexof大于-1时){ //把这一数据放到新数组里; // } //调用渲染函数 传递的数据是新数组;
这是写在js里的数据！
[{ "num":"刘志杰", "volume":"999", "firm":"五头牛" }, { "num":"王竹森", "volume":"899", "firm":"三只羊" }, { "num":"王炸", "volume":"668", "firm":"五头牛" }, { "num":"李炮", "volume":"558", "firm":"三只羊" }, { "num":"小屁孩", "volume":"748", "firm":"一只鸡" }, { "num":"小破孩", "volume":"957", "firm":"五头牛" }, { "num":"小妮子", "volume":"967", "firm":"一只鸡" }, { "num":"江流儿", "volume":"698", "firm":"三只羊" }, { "num":"江河", "volume":"158", "firm":"三只羊" }, { "num":"王山河", "volume":"258", "firm":"一只鸡" }, { "num":"刘志", "volume":"624", "firm":"三只羊" }, { "num":"刘杰", "volume":"325", "firm":"五头牛" }, { "num":"冯子材", "volume":"681", "firm":"三只羊" }, { "num":"冯源", "volume":"199", "firm":"三只羊" }, { "num":"熊大", "volume":"919", "firm":"五头牛" }, { "num":"熊二", "volume":"932", "firm":"一只鸡" }, { "num":"光头强", "volume":"369", "firm":"三只羊" }, { "num":"司马懿", "volume":"479", "firm":"三只羊" }, { "num":"司马光", "volume":"874", "firm":"一只鸡" }, { "num":"司马迁", "volume":"581", "firm":"三只羊" }, { "num":"刘禅", "volume":"447", "firm":"三只羊" }, { "num":"刘备", "volume":"789", "firm":"五头牛" }, { "num":"马超", "volume":"339", "firm":"一只鸡" }, { "num":"马子", "volume":"579", "firm":"三只羊" }, { "num":"郝海燕", "volume":"589", "firm":"三只羊" }, { "num":"崔有病", "volume":"249", "firm":"五头牛" }, { "num":"崔油饼", "volume":"123", "firm":"三只羊" }, { "num":"吕德华", "volume":"321", "firm":"一只鸡" }, { "num":"吕布", "volume":"558", "firm":"五头牛" }, { "num":"吕小布", "volume":"682", "firm":"五头牛" } ]
这是json数据！
结构就这么多！
