本文实例为大家分享了js点击按钮实现图片排序的具体代码,供大家参考,具体内容如下 效果 1 、点击按钮 如果按钮文字是从大到小 将li标签按照从大到小的顺序排列 文字改成
本文实例为大家分享了js点击按钮实现图片排序的具体代码,供大家参考,具体内容如下
效果
1 、点击按钮
如果按钮文字是从大到小 将li标签按照从大到小的顺序排列 文字改成从小到大
如果按钮文字是从小到大 将li标签按照从小到大的顺序排列 文字变成从大到小
2 、点击按钮 将li随机排序
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
.wrap {
width: 440px;
margin: 50px auto;
text-align: center;
}
ul li {
float: left;
width: 100px;
height: 130px;
margin-right: 10px;
margin-bottom: 10px;
font-size: 12px;
}
ul li img {
width: 100px;
height: 100px;
}
ul li p {
line-height: 30px;
text-align: center;
font-size: 12px;
}
.wrap button {
display: inline-block;
width: 100px;
height: 40px;
text-align: center;
line-height: 40px;
background-color: red;
border: none;
margin-right: 20px;
margin-bottom: 20px;
color: #fff;
font-size: 16px;
}
</style>
<div class="wrap">
<button>从大到小</button><button>随机排序</button>
<ul>
<li>
<img src="./img1.jfif" alt="">
柴犬<span>1</span>
</li>
<li>
<img src="./img2.jfif" alt="">
柴犬<span>2</span>
</li>
<li>
<img src="./img3.jfif" alt="">
柴犬<span>3</span>
</li>
<li>
<img src="./img4.jfif" alt="">
柴犬<span>4</span>
</li>
<li>
<img src="./img5.jfif" alt="">
柴犬<span>5</span>
</li>
<li>
<img src="./img6.jfif" alt="">
柴犬<span>6</span>
</li>
<li>
<img src="./img7.jfif" alt="">
柴犬<span>7</span>
</li>
<li>
<img src="./img8.jfif" alt="">
柴犬<span>8</span>
</li>
</ul>
<script>
// 1.获取元素 button li ul
var btns = document.getElementsByTagName('button');
var lis = document.getElementsByTagName('li');
var ul = document.getElementsByTagName('ul')[0];
console.log(btns, lis, ul);
// 5.将集合转成数组
var liarr = [];
for (var i = 0; i < lis.length; i++) {
liarr.push(lis[i]);
}
console.log(liarr);
// 2.添加事件
btns[0].onclick = function () {
// 3.如果按钮是从大到小
if (this.innerText == '从大到小') {
// 4.将li标签按照从大到小的顺序排列
liarr.sort(function (a, b) {
console.log(a, b);
// 6.获取a、b中的span
var as = a.getElementsByTagName('span')[0].innerText;
var bs = b.getElementsByTagName('span')[0].innerText;
console.log(as, bs);
// 7.设置返回值
return bs - as;
});
// 9.更新文字
this.innerText = '从小到大'
} else {
liarr.sort(function (a, b) {
console.log(a, b);
var as = a.getElementsByTagName('span')[0].innerText;
var bs = b.getElementsByTagName('span')[0].innerText;
return as - bs;
});
this.innerText = '从大到小'
}
// console.log(liarr);
// 8.渲染到ul中
// 8.1清空页面中ul的内容
ul.innerhtml = '';
// 8.2.将liarr里面的每一个数据渲染到页面ul中
for (var j = 0; j < liarr.length; j++) {
ul.innerHTML += '<li>' + liarr[j].innerHTML + '</li>';
}
}
// 随机排序
btns[1].onclick = function () {
liarr.sort(function (a, b) {
console.log(a, b);
return Math.random() - 0.5;
});
ul.innerHTML = '';
for (var j = 0; j < liarr.length; j++) {
ul.innerHTML += '<li>' + liarr[j].innerHTML + '</li>';
}
}
</script>
效果:
从小到大
从大到小
随机排序
--结束END--
本文标题: js点击按钮实现图片排序
本文链接: https://www.lsjlt.com/news/154212.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0