通过js实现点击按钮图片从大到小 从小到大 随机排序
html样式
<body>
<div id="div1">
<a href="#">从大到小</a>
<a href="#">随机排序</a>
</div>
<div id="div2">
<p><img src="img/1.jpg"><br>美女1</p>
<p><img src="img/2.jpg"><br>美女2</p>
<p><img src="img/3.jpg"><br>美女3</p>
<p><img src="img/4.jpg"><br>美女4</p>
<p><img src="img/1.jpg"><br>美女5</p>
<p><img src="img/2.jpg"><br>美女6</p>
<p><img src="img/3.jpg"><br>美女7</p>
<p><img src="img/4.jpg"><br>美女8</p>
</div>
</body>
css样式
style>
#div1 {
text-align: center;
}
#div1 a {
display: inline-block;
width: 80px;
height: 40px;
line-height: 40px;
background: red;
color: #fff;
text-decoration: none;
margin-right: 20px;
}
#div1 a {
color: #fff;
background: red;
}
#div2 {
text-align: center;
width: 800px;
margin: 0 auto;
}
#div2 p {
float: left;
width: 200px;
height: 200px;
}
#div2 img {
width: 100%;
height: 100%;
}
</style>
</head>
js样式
<script>
var btns = document.getElementById('div1').getElementsByTagName('a');
var o = document.getElementById('div2');
var ps = o.getElementsByTagName('p');
var arr = [];
for (var i = 0; i < ps.length; i++) {
arr.push(ps[i]);
}
btns[0].onclick = function () {
arr.reverse();
var s = '';
arr.forEach(function (item) {
s += "<p>" + item.innerHTML + "</p>";
});
o.innerHTML = s;
// console.log(ps);
};
btns[1].onclick = function () {
var arr = [];
for (var i = 0; i < ps.length; i++) {
arr.push(ps[i]);
}
arr.sort(function (a, b) {
return Math.random() - 0.5;
});
var s = '';
arr.forEach(function (item) {
s += "<p>" + item.innerHTML + "</p>";
});
o.innerHTML = s;
};
实现这个功能要了解reverse();这个倒叙功能,
第一步(顺序排序)
遍历数组,取出p
声明一个变量,用来保存数组的内容
第二步
变量 += 标签 +文字内容
显示图片
倒序排序只用使用arr.reverse();这个,可以人数组倒序
随机排序
取随机数,随机取数,要正值,负值都有,所以减0.5