切换图片（随机按顺序）

最新推荐文章于 2021-12-21 09:57:47 发布

吴机智

最新推荐文章于 2021-12-21 09:57:47 发布

阅读量163

点赞数

分类专栏：案例文章标签： js

本文链接：https://blog.csdn.net/m0_49893750/article/details/108503039

版权

案例专栏收录该内容

45 篇文章 0 订阅

订阅专栏

<html lang="en">

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

        .wrap {
            width: 800px;
            margin: 50px auto;
        }

        .wrap p {
            text-align: center;
        }

        .wrap p button {
            width: 100px;
            height: 30px;
            margin: 20px;
            background-color: red;
            color: #fff;
        }

        .wrap div {
            float: left;
        }

        .wrap div img {
            width: 200px;
            height: 150px;
            display: block;
        }

        .wrap div span {
            display: inline-block;
            width: 200px;
            text-align: center;
            line-height: 30px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <p><button>从大到小</button><button>随机排序</button></p>
        <div class="a">
            <div><img src="../第二周/img/img/11.jpg" alt=""><span>花花1</span></div>
            <div><img src="../第二周/img/img/12.jpg" alt=""><span>花花2</span></div>
            <div><img src="../第二周/img/img/13.jpg" alt=""><span>花花3</span></div>
            <div><img src="../第二周/img/img/14.jpg" alt=""><span>花花4</span></div>
            <div><img src="../第二周/img/img/15.jpg" alt=""><span>花花5</span></div>
            <div><img src="../第二周/img/img/16.jpg" alt=""><span>花花6</span></div>
            <div><img src="../第二周/img/img/17.jpg" alt=""><span>花花7</span></div>
            <div><img src="../第二周/img/img/18.jpg" alt=""><span>花花8</span></div>
        </div>

    </div>

    <script>
        // 效果描述: 点击从小到大按钮, 图片从小到大排序, 点击从大到小按钮, 图片从大到小排序
        var btns = document.getElementsByTagName('button');
        var a = document.getElementsByClassName('a')[0];
        console.log(btns);
        // 不知道当前是什么状态，用一个变量存储一下, true表示目前是从小到大排序
        var flag = true;
        // 存储数据
        var arr = [{
            'img': '../第二周/img/img/11.jpg',
            'name': '花花1'
        }, {
            'img': '../第二周/img/img/12.jpg',
            'name': '花花2'
        }, {
            'img': '../第二周/img/img/13.jpg',
            'name': '花花3'
        }, {
            'img': '../第二周/img/img/14.jpg',
            'name': '花花4'
        }, {
            'img': '../第二周/img/img/15.jpg',
            'name': '花花5'
        }, {
            'img': '../第二周/img/img/16.jpg',
            'name': '花花6'
        }, {
            'img': '../第二周/img/img/17.jpg',
            'name': '花花7'
        }, {
            'img': '../第二周/img/img/18.jpg',
            'name': '花花8'
        }]
        // 添加点击事件
        btns[0].onclick = function () {
            // 先清空a
            a.innerHTML = '';
            // 判断当前是什么状态
            if (flag) {
                // 当前是从小到大排序， 需要变成从大到小的排序
                arr.sort(function (a, b) {
                    return b.name.localeCompare(a.name, 'zh');
                });
                // flag = false; // true - false
                btns[0].innerHTML = '从小到大';
            } else {
                // 当前是从大到小, 需要变成从小到大
                arr.sort(function (a, b) {
                    return a.name.localeCompare(b.name, 'zh');
                });
                // flag = true; // false ->true
                btns[0].innerHTML = '从大到小';
            }
            // 将arr的每一个数据添加到a中
            for (var i = 0; i < arr.length; i++) {
                a.innerHTML += '<div><img src="' + arr[i].img + '" alt=""><span>' + arr[i].name + '</span></div>';
            }
            flag = !flag;
        }

        // 点击随机按钮, 生成随机的下标的数组, 再去渲染页面
        btns[1].onclick = function () {
            var newArr = [];
            for (var i = 0; i < 8; i++) {
                var num = Math.floor(Math.random() * 8);
                // 判断是否存在于新的数组中
                if (newArr.indexOf(num) == -1) {
                    newArr.push(num);
                } else {
                    i--;
                }
            }
            // 遍历数组，根据数组中的下标渲染页面
            a.innerHTML = '';
            for (var j = 0; j < newArr.length; j++) {
                console.log(newArr[j]);
                var index = newArr[j]; // 要渲染的数据的下标
                a.innerHTML += '<div><img src="' + arr[index].img + '" alt=""><span>' + arr[index].name +
                    '</span></div>';
            }
        }
    </script>
</body>

</html>