js点击按钮实现图片排序

本文实例为大家分享了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>
? ? ? ? ? ? /*?
? ? ? ? ? ? ? ? ? 2. 效果
? ? ? ? ? ? ? ? ? ? ? ? 2.1 点击按钮?
? ? ? ? ? ? ? ? ? ? ? ? ? ? 如果按钮文字是从大到小 将li标签按照从大到小的顺序排列 文字改成从小到大
? ? ? ? ? ? ? ? ? ? ? ? ? ? 如果按钮文字是从小到大 将li标签按照从小到大的顺序排列 文字变成从大到小
? ? ? ? ? ? ? ? ? ? ? ? 2.2 点击按钮 将li随机排序?
? ? ? ? ? ? ? ? ? ? 标签排序比较快
? ? ? ? ? ? ? ? ? ? 注意:?
? ? ? ? ? ? ? ? ? ? ? ? 获取元素方式:
? ? ? ? ? ? ? ? ? ? ? ? ? ? document/父元素.getElementsByTagName()
? ? ? ? ? ? ? ? ? ? ? ? ? ? document/父元素.getElementsByClassName()
? ? ? ? ? ? ? ? ? ? ? ? ? ? */
? ? ? ? ? ? // 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>

效果：

从小到大

从大到小

随机排序

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于js点击按钮实现图片排序的详细内容...