js图片随机排序和升序排序

最新推荐文章于 2022-09-03 20:39:55 发布

进阶的小牛

最新推荐文章于 2022-09-03 20:39:55 发布

阅读量1.2k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/datuzidppd5556/article/details/99671491

版权

js 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

js图片随机排序和升序排序

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img {
            width: 300px;
            height: 200px;
        }

        div {
            width: 300px;
            height: 250px;
            text-align: center;
            float: left;
        }

        button {
            width: 200px;
            height: 50px;
            margin-bottom: 50px;
            float: left;
        }
    </style>
</head>

<body>

    <div class="image1">
        <img src="../image/p1.jpg" alt="">
        <span>图片<i>1</i></span>
    </div>
    <div class="image1">
        <img src="../image/p2.jpg" alt="">
        <span>图片<i>2</i></span>
    </div>
    <div class="image1">
        <img src="../image/p3.jpg" alt="">
        <span>图片<i>3</i></span>
    </div>
    <div class="image1">
        <img src="../image/p4.jpg" alt="">
        <span>图片<i>4</i></span>
    </div>
    <div class="image1">
        <img src="../image/p5.jpg" alt="">
        <span>图片 <i>5</i></span>
    </div>>
    <button>从大到小排序</button>
    <button>随机排序</button>
    <script>
        var btn = document.querySelectorAll("button");
        var divs = document.querySelectorAll("div");
        var imgs = document.querySelectorAll("img");
        var spans = document.querySelectorAll("i");
        var arr = ["1", "2", "3", "4", "5"];
        btn[0].onclick = function () {
            for (i = imgs.length, n = 0; i >= 1, n < imgs.length; i-- , n++) {
                imgs[n].src = "../image/p" + i + ".jpg";

                var a = arr.sort(function (a, b) {
                    return b - a;
                })
                //console.log(a);// ["5", "4", "3", "2", "1"]
                spans[n].innerHTML = a[n];
            }
        }

        var arr1 = ["1", "2", "3", "4", "5", "6", "7", "8"];
        btn[1].onclick = function () {
            var quc = []
            for (i = imgs.length, n = 0; i >= 1, n < imgs.length; i--) {
                var suiji = parseInt(Math.random() * (8 - 1) + 1);
                if (quc.indexOf(suiji) == -1) {
                    quc += suiji;
                    imgs[n].src = "../image/p" + quc[n] + ".jpg";
                    spans[n].innerHTML = quc[n];
                    // console.log(quc, 111);
                    n++;
                }

            }
        }
    </script>
</body>

</html>

结果：
在这里插入图片描述

进阶的小牛

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
js图片随机排序和升序排序

js图片随机排序和升序排序<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...
复制链接

扫一扫