【Javascript】入门之图片排序

最新推荐文章于 2024-03-17 09:44:55 发布

夹心776655

最新推荐文章于 2024-03-17 09:44:55 发布

阅读量1.7k

点赞数

分类专栏：代码实例 js交互设计文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_37086980/article/details/110501241

版权

代码实例同时被 2 个专栏收录

72 篇文章 3 订阅

订阅专栏

js交互设计

46 篇文章 0 订阅

订阅专栏

描述: 点击从大到小, 图片按照从大到小的顺序来排序，按钮文字为从小到大; 点击从小到大, 图片按照从小到大的顺序来排序, 按钮文字变为从大到小；点击随机排序, 图片随机排序并每次生成不重复随机数(下标)

在这里插入图片描述

Sort用法

数组.sort();

默认按照字符串的编码进行排序

数组.sort(参数);

参数必须是函数函数有两个形参

第一个形参 - 第二个形参按照从小到大排序

第二个形参 - 第一个形参按照从大到小的顺序进行排序

var arr = [3, 4, 5, 1, 2, 5, 6];
arr.sort();
console.log(arr); // [1, 2, 3, 4, 5, 5, 6]

var arr = [32, 23, 1, 32, 23, 4, 6, 8, 54, 32];
// arr.sort();
// console.log(arr); // [1, 23, 23, 32, 32, 32, 54]

// 参数必须是函数  函数有两个形参
arr.sort(function (a, b) {
    // return a - b; // 第一形参-第二个形参  默认按照从小到大排序
    return b - a; // 第二个形参 - 第一个形参  按照从大到小的顺序进行排序
});
console.log(arr);

代码实现

方法一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片排序</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #wrap{
            width: 800px;
            height: 530px;
            margin: 0 auto;
            text-align: center;
            overflow: hidden;
        }
        #wrap > button{
            width: 80px;
            height: 40px;
            background-color: #ff0000;
            border:none;
            outline: none;
            font-size: 15px;
            color:#fff;
            margin: 10px 0 15px 0;
        }
        #wrap > button:nth-of-type(2){
            margin-left: 25px;
        }
        #wrap > ul > li{
            list-style: none;
            float: left;
            /* border: 1px solid #333; */
        }
        #wrap > ul > li > img{
            width: 200px;
            height: 200px;
        }
        #wrap > ul > li > p{
            font: 15px/30px "微软雅黑";
        }
    </style>
</head>
<body>
    <!-- 1.布局 -->
    <div id="wrap">
        <!-- 两个功能按钮 -->
        <button>从大到小</button>
        <button>随机排序</button>
        <!-- 图片布局 -->
        <ul>
            <li>
                <img src="" alt="">
                <p></p>
            </li>
            <li>
                <img src="" alt="">
                <p></p>
            </li>
            <li>
                <img src="" alt="">
                <p></p>
            </li>
            <li>
                <img src="" alt="">
                <p></p>
            </li>
            <li>
                <img src="" alt="">
                <p></p>
            </li>
            <li>
                <img src="" alt="">
                <p></p>
            </li>
            <li>
                <img src="" alt="">
                <p></p>
            </li>
            <li>
                <img src="" alt="">
                <p></p>
            </li>
        </ul>
        <script>
            /* 
                描述:
                点击从大到小, 图片按照从大到小的顺序来排序  文字 从小到大
                点击从小到大, 图片按照从小到大的顺序来排序  文字 从大到小

                点击随机排序, 图片随机排序  每次生成随机数(下标)  生成不重复的随机下标
                生成了一个重复的下标  本轮循环需要多走一次
            
            */
            //  1. 获取button, 父元素li, 图片img和标题p
            var btns = document.getElementsByTagName('button');
            var lis = document.getElementsByTagName('li');
            console.log(btns, lis);
            var img = document.getElementsByTagName('img');
            var p = document.getElementsByTagName('p');
            console.log(img, p);

            // 2.1 用对象存储每一个li
            var imgInfo = {
                'url':['./img/2.JPG','./img/3.JPG','./img/4.JPG','./img/5.jpg','./img/6.jpg','./img/7.jpg','./img/8.jpg','./img/9.jpg'],
                'title':['花卉1','花卉2','花卉3','花卉4','花卉5','花卉6','花卉7','花卉8']
            };
            // 2.2 建立数组存储下标便于比较
            var arr = [0, 1, 2, 3 ,4 ,5 ,6 ,7];
            // 5.调用初始化函数
            init(arr);
            // 3.给每个li填充url和title
            // 4.封装初始化函数便于调用
            function init(arr){
                for(var i = 0; i < lis.length; i++){
                    //赋值图片地址
                    img[i].src = imgInfo.url[arr[i]];
                    //  赋值标题内容
                    p[i].innerHTML = imgInfo.title[arr[i]];
                }
            }

            // 5.点击从小到大排序按钮, 文字变为从大到小, 图片从小到大排序
            //假设一开始按钮为""从大到小" 此时为false, 如果"从小到大", 状态为true
            btns[0].onoff = false;
            btns[0].onclick = function(){
                if(this.onoff){
                    // 如果是从小到大排序
                    arr.sort(function(a ,b){
                        return a - b;
                    });
                    // console.log(arr);
                    // 按照排序下标重新填充图片src和title
                    init(arr);
                    // 按钮内容改变
                    this.innerHTML = '从大到小';
                    // 按钮状态改变
                    this.onoff = false;
                }else{
                    //从大到小排序
                    arr.sort(function(a , b){
                        return b - a;
                    });
                    // console.log(arr);
                    // 按照排序下标重新填充src和title
                    init(arr);
                    // 按钮内容改变
                    this.innerHTML = '从小到大';
                    // 按钮状态改变
                    this.onoff = true;
                }
            }

            /*点击随机排序, 图片随机排序  每次生成随机数(下标)  生成不重复的随机下标
                生成了一个重复的下标  */
            // 建立保存随机数的数组
            var randomArr;
            // 6.点击随机排序按钮, 生成随机数0-7之间的随机数
            btns[1].onclick = function(){
                
                // 调用getNumNoRepeat()
                getNumNoRepeat();
                // 调用randomArr函数
                init(randomArr);
            }
            
            // 封装函数
            function getNumNoRepeat(){
                // 清空数组
                randomArr = [];
                // 生成 0 - 7 之间的随机数, 并且不能重复
                do{
                    // 生成0-7之间的随机数
                    var num = Math.floor(Math.random() * 8);
                    // console.log(num);
                    // 如果数组中不存在随机数num, 则添加进数组中
                    if(randomArr.indexOf(num) == -1){
                        randomArr.push(num);
                    }
                }while(randomArr.length < 8);
                // console.log(randomArr);
            }
        </script>
    </div>
</body>
</html>

方法二:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片排序</title>
    <style>
        body {
            text-align: center;
        }

        img {
            width: 150px;
            height: 150px;
        }

        ul {
            width: 650px;
            height: 350px;
            margin: auto;
        }

        p {
            display: inline-block;
        }

        li {
            display: inline-block;
            width: 155px;
            height: 155px;
        }

        button {
            width: 100px;
            height: 40px;
            background-color: red;
        }
    </style>
</head>

<body>
    <button class="bt">从大到小</button>
    <button>随机排序</button>
    <ul>
        <li>
            <img src="./img/2.jpg" alt="">
            <p>图片2</p>
        </li>
        <li>
            <img src="./img/1.jpg" alt="">
            <p>图片1</p>
        </li>
        <li>
            <img src="./img/4.jpg" alt="">
            <p>图片4</p>
        </li>
        <li>
            <img src="./img/3.jpg" alt="">
            <p>图片3</p>
        </li>

        <li>
            <img src="./img/5.jpg" alt="">
            <p>图片5</p>
        </li>
        <li>
            <img src="./img/6.jpg" alt="">
            <p>图片6</p>
        </li>
        <li>
            <img src="./img/7.jpg" alt="">
            <p>图片7</p>
        </li>
        <li>
            <img src="./img/8.jpg" alt="">
            <p>图片8</p>
        <li>
    </ul>
    <script>
        /*
            排序:
                点击从大到小, 图片按照从大到小的顺序来排序  文字 从小到大
                点击从小到大, 图片按照从小到大的顺序来排序  文字 从大到小

                点击随机排序, 图片随机排序  每次生成随机数(下标)  生成不重复的随机下标
                生成了一个重复的下标  本轮循环需要多走一次
        */
        // 获取元素: btn span
        var btns = document.getElementsByTagName('button');
        var lis = document.getElementsByTagName('li');
        console.log(btns, lis);
        // 看到图片和名字一一对应的数据  数组里面放对象
        var arr = [
            { 'title': '图片1', 'src': './img/5.jpg' },
            { 'title': '图片2', 'src': './img/6.jpg' },
            { 'title': '图片3', 'src': './img/7.jpg' },
            { 'title': '图片4', 'src': './img/8.jpg' },
            { 'title': '图片5', 'src': './img/9.jpg' },
            { 'title': '图片6', 'src': './img/10.jpg' },
            { 'title': '图片7', 'src': './img/11.jpg' },
            { 'title': '图片8', 'src': './img/12.jpg' },
        ];
        // 点击按钮
        btns[0].onclick = function () {
            // 判断按钮的文字是从大到小?
            if (this.innerHTML == '从大到小') {
                // 图片按照从大到小的顺序来排序  文字 从小到大
                arr.sort(function (a, b) {
                    // console.log(a, b);
                    return b.title.localeCompare(a.title, 'zh');
                });
                
                // 按钮文本内容换成 从小到大
                this.innerHTML = '从小到大';
            } else {
                arr.sort(function (a, b) {
                    // console.log(a, b);
                    return a.title.localeCompare(b.title, 'zh');
                });
                // 按钮文本内容换成 从大到小
                this.innerHTML = '从大到小';
            }
            console.log(arr);
            // 将arr的每一个数据渲染到对应的每一个span中
            for (var i = 0; i < lis.length; i++) {
                // console.log(spans[i]);
                // 获取对应的子标签
                var img = lis[i].getElementsByTagName('img')[0];
                var p = lis[i].getElementsByTagName('p')[0];
                // console.log(img, p);
                // 更改img的地址
                img.src = arr[i].src;
                // 文字内容
                p.innerHTML = arr[i].title;
            }
        }

        // 随机排序 点击随机排序, 图片随机排序  每次生成随机数(下标)  生成不重复的随机下标
        btns[1].onclick = function () {
            // 生成8个随机数
            var na = [];
            for (var i = 0; i < 8; i++) {
                var num = Math.floor(Math.random() * 8);
                console.log(num);
                // 如果当前下标不重复, 在na这个数组中没有num的时候，才将num添加进去
                // 当出现重复项，本轮循环需要多留一次
                if (na.indexOf(num) == -1) {
                    na.push(num);
                } else {
                    i--;
                }
            }
            console.log(na);
            // na数组中存的是每一个span标签要渲染的数据的下标
            // 将arr的每一个数据渲染到对应的每一个span中
            for (var i = 0; i < lis.length; i++) {
            
                // 获取对应的子标签
                var img = lis[i].getElementsByTagName('img')[0];
                var p = lis[i].getElementsByTagName('p')[0];
                // console.log(img, p);
                // 更改img的地址
                img.src = arr[na[i]].src;
                // 文字内容
                p.innerHTML = arr[na[i]].title;
            }
        }
    </script>
</body>
</html>

夹心776655

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
【Javascript】入门之图片排序

描述: 点击从大到小, 图片按照从大到小的顺序来排序，按钮文字为从小到大; 点击从小到大, 图片按照从小到大的顺序来排序, 按钮文字变为从大到小；点击随机排序, 图片随机排序并每次生成不重复随机数(下标)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini
复制链接

扫一扫