前端学习-第二阶段-day08_<div data-flx-iterate="i,orderno">-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_34723035/article/details/111876195

博客记录了今日练习内容，包含点击实现从大到小、从小到大排序，以及随机排序的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今日练习

点击自动从大到小排序，再次点击从小到大排序，点击随机随机排序
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        div {
            width: 650px;
            height: 410px;
            padding: 30px;
            padding-top: 0;
            margin: 40px auto;
            border: 1px solid #d3d3d3;
            text-align: center;
        }

        button {
            display: inline-block;
            margin-top: 5px;
            margin-bottom: 10px;
            width: 70px;
            height: 25px;
            outline: none;
            border: none;
            background-color: #4682b4;
            color: white;
            cursor: pointer;
        }

        ul {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            width: 650px;

        }

        li {
            text-align: center;
            margin-bottom: 10px;
        }

        img {
            width: 150px;
            height: 150px;
        }
    </style>
</head>

<body>
    <div>
        <button>从大到小</button>
        <button>随机排序</button>
        <ul>
            <li><img src="./img/动漫1.jpg" alt="" id="1">
                <p>1</p>
            </li>
            <li><img src="./img/动漫2.jpg" alt="" id="2">
                <p>2</p>
            </li>
            <li><img src="./img/动漫3.jpg" alt="" id="3">
                <p>3</p>
            </li>
            <li><img src="./img/动漫4.jpg" alt="" id="4">
                <p>4</p>
            </li>
            <li><img src="./img/动漫5.jpg" alt="" id="5">
                <p>5</p>
            </li>
            <li><img src="./img/动漫6.jpg" alt="" id="6">
                <p>6</p>
            </li>
            <li><img src="./img/动漫7.jpg" alt="" id="7">
                <p>7</p>
            </li>
            <li><img src="./img/动漫8.jpg" alt="" id="8">
                <p>8</p>
            </li>
        </ul>
    </div>
</body>
<script>
    var arr = [{
            "src": "./img/动漫1.jpg",
            "title": "1"
        },
        {
            "src": "./img/动漫2.jpg",
            "title": "2"
        },
        {
            "src": "./img/动漫3.jpg",
            "title": "3"
        },
        {
            "src": "./img/动漫4.jpg",
            "title": "4"
        },
        {
            "src": "./img/动漫5.jpg",
            "title": "5"
        },
        {
            "src": "./img/动漫6.jpg",
            "title": "6"
        },
        {
            "src": "./img/动漫7.jpg",
            "title": "7"
        },
        {
            "src": "./img/动漫8.jpg",
            "title": "8"

        }
    ]
    var oBttns = document.getElementsByTagName("button");
    var oLis = document.getElementsByTagName("li");
    var oUl = document.getElementsByTagName("ul")[0];
    var run = true;
    oBttns[0].onclick = function () {
        if (run == true) {
            
            oUl.innerHTML = '';
            arr.sort(function (a, b) {
                return b.title - a.title;
            });

            for (i = 0; i < arr.length; i++) {
                oUl.innerHTML += "<li>" + "<img src=" + arr[i].src + ">" + "<p>" + arr[i].title + "</p>" + "</li>"
            }
            oBttns[0].innerHTML = "从小到大";
            run = false;
        } else {

            oUl.innerHTML = '';
            arr.sort(function (a, b) {
                return a.title - b.title;
            });

            for (i = 0; i < arr.length; i++) {
                oUl.innerHTML += "<li>" + "<img src=" + arr[i].src + ">" + "<p>" + arr[i].title + "</p>" + "</li>"
            }
            oBttns[0].innerHTML = "从大到小";
            run = true;
        }

    }
    oBttns[1].onclick = function () {
        
            oUl.innerHTML = '';
            arr.sort(function () {
                return Math.random()-0.5
            });

            for (i = 0; i < arr.length; i++) {
                oUl.innerHTML += "<li>" + "<img src=" + arr[i].src + ">" + "<p>" + arr[i].title + "</p>" + "</li>"
            }
           
        

    }
</script>

</html>