資訊專欄INFORMATION COLUMN
利用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>效果：
從小到大
從大到小
隨機排序
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/128193.html
摘要：之前寫過一篇基于的表格分頁組件的文章，主要介紹了組件的編寫方法，有興趣的可以訪問這里進行閱讀前言為了進一步讓大家了解的神奇魅力，了解的一種以數據為驅動的理念，本文主要利用實現了一個數字拼圖游戲，其原理并不是很復雜，效果圖如下展示地址為有能力 之前寫過一篇《基于Vue.js的表格分頁組件》的文章，主要介紹了Vue組件的編寫方法，有興趣的可以訪問這里進行閱讀：https://segment...
響應式可過濾的游戲+工具展示頁面 用于各種網站以按類別對圖像進行排序。在本文中，我將向您展示如何借助 HTML CSS 和 javascript 創建響應式可過濾的游戲+工具展示頁面。 可過濾作品集是一種流行的網絡元素，可用于各種網站。它是一種作品畫廊，大量作品整齊地排列在一起。值得注意的一點是，所有作品都可以在這里按類別排序。有一個導航欄，其中對所有類別進行了排序。單擊這些類別中的任何一個時。...
摘要：后兩個屬性可選。屬性定義了項目的縮小比例，默認為，即如果空間不足，該項目將縮小。屬性定義了在分配多余空間之前，項目占據的主軸空間。它的默認值為，即項目的本來大小。結合的異步組件和的代碼分割功能，輕松實現路由組件的懶加載。 項目總結 這是我第二個用 Vue 實現的項目，下面內容包括了在實現過程中所記錄的知識點以及一些小技巧 項目演示地址：https://music-vue.n-y.io源...
摘要：道阻且長啊前端面試總結前端面試筆試面試騰訊一面瀏覽器工作原理瀏覽器的主要組件包括用戶界面包括地址欄后退前進按鈕書簽目錄瀏覽器引擎用來查詢及操作渲染引擎的接口渲染引擎渲染界面和是基于兩種渲染引擎構建的，使用自主研發的渲染引擎，和都使用網絡用來 道阻且長啊TAT(前端面試總結) 前端 面試 筆試 面試 騰訊一面 1.瀏覽器工作原理 瀏覽器的主要組件包括： 用戶界面－ 包括地址欄、后退/前...
閱讀 547·2023-03-27 18:33
閱讀 732·2023-03-26 17:27
閱讀 630·2023-03-26 17:14
閱讀 591·2023-03-17 21:13
閱讀 521·2023-03-17 08:28
閱讀 1801·2023-02-27 22:32
閱讀 1292·2023-02-27 22:27
閱讀 2178·2023-01-20 08:28
