利用js實(shí)現(xiàn)點(diǎn)擊按鈕實(shí)現(xiàn)圖片排序

3403771864 發(fā)布于2022-10-23 13:49 / 502人閱讀

　　利用JS就可以實(shí)現(xiàn)在點(diǎn)擊按鈕實(shí)現(xiàn)圖片排序，做個(gè)狠人，直接說(shuō)：

　　效果

　　1 、點(diǎn)擊按鈕

　　如果按鈕文字是從大到小將li標(biāo)簽按照從大到小的順序排列文字改成從小到大

　　如果按鈕文字是從小到大將li標(biāo)簽按照從小到大的順序排列文字變成從大到小

　　2 、點(diǎn)擊按鈕將li隨機(jī)排序

　　<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>隨機(jī)排序</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 點(diǎn)擊按鈕
　　如果按鈕文字是從大到小 將li標(biāo)簽按照從大到小的順序排列 文字改成從小到大
　　如果按鈕文字是從小到大 將li標(biāo)簽按照從小到大的順序排列 文字變成從大到小
　　2.2 點(diǎn)擊按鈕 將li隨機(jī)排序
　　標(biāo)簽排序比較快
　　注意:
　　獲取元素方式:
　　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.將集合轉(zhuǎn)成數(shù)組
　　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標(biāo)簽按照從大到小的順序排列
　　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.設(shè)置返回值
　　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清空頁(yè)面中ul的內(nèi)容
　　ul.innerHTML = '';
　　// 8.2.將liarr里面的每一個(gè)數(shù)據(jù)渲染到頁(yè)面ul中
　　for (var j = 0; j < liarr.length; j++) {
　　ul.innerHTML += '<li>' + liarr[j].innerHTML + '</li>';
　　}
　　}
　　// 隨機(jī)排序
　　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>

　　效果：

　　從小到大