<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.將集合轉(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標簽按照從大到小的順序排列
? ? ? ? ? ? ? ? ? ? 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清空頁面中ul的內(nèi)容
? ? ? ? ? ? ? ? ul.innerHTML = '';
? ? ? ? ? ? ? ? // 8.2.將liarr里面的每一個數(shù)據(jù)渲染到頁面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>