列表开发中用的到的小功能,列表正序倒序功能。
直接上代码不多说
html部分
```
<button id="qie" onclick="cut();">正序</button>
<ul id="gets">
</ul>
```
css
```
button{
width: 200px;
height: 100px;
font-size: 50px;
}
gets{
width: 100px;
overflow: hidden;
}
#gets li{
float: left;
width: 100%;
overflow: hidden
}
li span{
float: right;
}
```
js
```
var result =[
{id:1,name:'中国银行'},
{id:2,name:'北京银行'},
{id:3,name:'建设银行'},
{id:4,name:'工商银行'},
{id:5,name:'交通银行'}
]
var qie =document.getElementById("qie")
var gets= document.getElementById("gets")
// 初始化
cut();
// 正序
function sortId(a,b){
return a.id-b.id
}
// 倒序
function sortId2(a,b){
return b.id-a.id
}
var flag=true;
function cut(){
if(flag){
qie.innerHTML="倒序"
result.sort(sortId2);
// console.log(result);
var res="";
for (var i=0;i<result.length;i++){
res += '<li>' +result[i].id +'<span>'+ result[i].name+'</span>'+'</li>'
}
gets.innerHTML=res;
flag = false;
}else{
qie.innerHTML="正序"
result.sort(sortId);
var res2="";
for (var i=0;i<result.length;i++){
res2 += '<li>' +result[i].id +'<span>'+ result[i].name+'</span>'+'</li>'
}
gets.innerHTML=res2;
flag = true;
}
}
```
网友评论