使用数组方法使得图文顺序倒序随机切换

最新推荐文章于 2020-12-24 05:53:09 发布
最新推荐文章于 2020-12-24 05:53:09 发布
阅读量262 收藏 1
点赞数 1
分类专栏： js 文章标签： js css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41684068/article/details/108018936
版权

使用数组方法使得图文顺序倒序随机切换

实现功能描述：从小到大 和从大到小是同一个按钮，切换图片和文字；随机排序是另一个按钮，可以随机切换图文。
第一种方法：使用了数组的sort函数排序，随机数用的是Math.random() -0.5;
第二种方法：使用了数组的reverse函数翻转，随机数用的是Math.floor(Math.random() * arr.length);
拿去使用的时候别忘了改图片地址哈

<!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;
        }

        .big {
            width: 800px;
            height: 500px;
            border: 1px solid red;
            margin: 30px auto;
            text-align: center;
        }

        button {
            margin: 17px auto;
            width: 70px;
            height: 25px;
            background-color: red;
            color: white;
            border: none;
        }

        .wrap {
            width: 800px;
            height: 440px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        img {
            width: 200px;
            display: block;
        }
    </style>
</head>

<body>
    <div class="big">
        <button>从大到小</button>
        <button>随机排序</button>
        <div class="wrap">
            <div class="box">
                <img src="../pic/1.jpg" alt="">
                <p>美女1</p>
            </div>
            <div class="box">

                <img src="../pic/2.jpg" alt="">
                <p>美女2</p>
            </div>
            <div class="box">

                <img src="../pic/3.jpg" alt="">
                <p>美女3</p>
            </div>
            <div class="box">

                <img src="../pic/4.jpg" alt="">
                <p>美女4</p>
            </div>
            <div class="box">

                <img src="../pic/5.jpg" alt="">
                <p>美女5</p>
            </div>
            <div class="box">

                <img src="../pic/6.jpg" alt="">
                <p>美女6</p>
            </div>
            <div class="box">

                <img src="../pic/7.jpg" alt="">
                <p>美女7</p>
            </div>
            <div class="box">

                <img src="../pic/8.jpg" alt="">
                <p>美女8</p>
            </div>
        </div>
    </div>
    <script>
    //点击随机排序，图片文字随机排序
        var btn = document.getElementsByTagName('button');
        var p = document.getElementsByTagName('p');
        var img = document.getElementsByTagName('img');
        var num = [0, 1, 2, 3, 4, 5, 6, 7];//存储图片的对应下标，以便下面翻转使用
        var arr = [{
            'img': '../pic/1.jpg',
            'name': '美女1'
        }, {
            'img': '../pic/2.jpg',
            'name': '美女2'
        }, {
            'img': '../pic/3.jpg',
            'name': '美女3'
        }, {
            'img': '../pic/4.jpg',
            'name': '美女4'
        }, {
            'img': '../pic/5.jpg',
            'name': '美女5'
        }, {
            'img': '../pic/6.jpg',
            'name': '美女6'
        }, {
            'img': '../pic/7.jpg',
            'name': '美女7'
        }, {
            'img': '../pic/8.jpg',
            'name': '美女8'
        }];
        
       
        // 顺序和倒序切换
        btn[0].flag = 1;//1表示排序是从大到小的排序
        btn[0].onclick = function () {
            if (this.flag == 0) {
            //正序
               num.sort(function (a, b) {
                    return a - b;
                })
                correspond();
                this.innerText = '从大到小';
                this.flag = 1;
            }else {
               //倒序
                num.sort(function (a, b) {
                    return b - a;
                })
                correspond();
                this.innerText = "从小到大";
                this.flag = 0;

            }
        }
        //对应接收
        function correspond() {
            for (var i = 0; i < box.length; i++) {
                // 用num可以在点击事件中 同步 切换 图片和文字
                img[i].src = arr[num[i]].img;
                p[i].innerText = arr[num[i]].name;
            }
        }
        
         //随机排序  Math.random() -0.5  网上有说他不是真正意义上的随机
         //但是我们得知道：js中无法拿到真正无规律的数字，所有随机数都由浏览器的方法直接返回的，在使用中不存在真假的问题，只是有概率问题；所以任何一种能拿到随机数的方法都可以用   
        btn[1].onclick = function () {
            num.sort(function (a, b) {
                return Math.random() -0.5;
            })
            correspond();
        }
    </script>

</body>

</html>

<!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;
        }

        body {
            text-align: center;
        }

        p {
            margin-top: 30px;
            color: #fff;
        }

        p button {
            width: 80px;
            height: 35px;
            background-color: red;
        }

        div {
            width: 800px;
            height: 450px;
            margin: 15px auto;
        }

        img {
            width: 200px;
            height: 200px;
            background-color: burlywood;
        }

        li {
            list-style: none;
        }

        div ul {
            display: flex;
            flex-wrap: wrap;
        }
    </style>
</head>

<body>
    <!-- CSS基本样式 -->
    <p>
        <button>从大到小</button>
        <button>随机排序</button>
    </p>
    <div>
        <ul>
            <li>
                <img src="./img/1.jpg" alt=""><br>
                <span>美女1 </span>
            </li>
            <li>
                <img src="./img/2.jpg" alt=""><br>
                <span>美女2</span>
            </li>
            <li>
                <img src="./img/3.jpg" alt=""><br>
                <span>美女3 </span>
            </li>
            <li>
                <img src="./img/4.jpg" alt=""><br>
                <span>美女4 </span>
            </li>
            <li>
                <img src="./img/1.jpg" alt=""><br>
                <span>美女5 </span>
            </li>
            <li>
                <img src="./img/2.jpg" alt=""><br>
                <span>美女6</span>
            </li>
            <li>
                <img src="./img/3.jpg" alt=""><br>
                <span>美女7 </span>
            </li>
            <li>
                <img src="./img/4.jpg" alt=""><br>
                <span>美女8 </span>
            </li>
        </ul>
    </div>
    <!-- JS部分 -->
    <script>
        // 从大到小按钮操作
        // 1. 当按钮内容是从大到小时, 点击按钮，将图片按照从大到小的顺序排列
        // 2. 当按钮内容是从小到大时, 点击按钮, 将图片从小到大排列
        // 存数据 一一对应的数据用对象存储
        var arr = [{
            'img': './img/1.jpg',
            'name': '美女1'
        }, {
            'img': './img/2.jpg',
            'name': '美女2'
        }, {
            'img': './img/3.jpg',
            'name': '美女3'
        }, {
            'img': './img/4.jpg',
            'name': '美女4'
        }, {
            'img': './img/1.jpg',
            'name': '美女5'
        }, {
            'img': './img/2.jpg',
            'name': '美女6'
        }, {
            'img': './img/3.jpg',
            'name': '美女7'
        }, {
            'img': './img/4.jpg',
            'name': '美女8'
        }];

        console.log(arr);
        var indexArr = [0, 1, 2, 3, 4, 5, 6, 7];

        // 获取元素 btn img span
        var btn = document.getElementsByTagName('button');
        var img = document.getElementsByTagName('img');
        var span = document.getElementsByTagName('span');
        console.log(btn, img, span);

        // 点击事件
        btn[0].onclick = function () {
            indexArr.reverse();
            for (var i = 0; i < img.length; i++) {
                img[i].src = arr[indexArr[i]].img;
                span[i].innerText = arr[indexArr[i]].name;
            }
            if (this.innerText == '从大到小') {
                this.innerText = '从小到大';
            } else {
                this.innerText = '从大到小';
            }
        }

        btn[1].onclick = function(){
            // 存储每次点击生成的随机下标
            var newArr = [];
            for(var i = 0; i < arr.length; i++){
            //因为可能随机出现7.xx或者其他带小数的数字，所以需要向下取整
                var num = Math.floor(Math.random() * arr.length);
                //以防止出现同样的随机数，导致所有图文不能随机
                if(newArr.indexOf(num) == -1){
                    newArr.push(num);
                } else {
                    i--;
                }
            }
            console.log(newArr);
            for (var i = 0; i < img.length; i++) {
                img[i].src = arr[newArr[i]].img;
                span[i].innerText = arr[newArr[i]].name;
            }
        }
    </script>
</body>

</html>
甜甜笑乐开怀
关注
专栏目录
图文详解GPT-4最强对手Claude2的使用方法
herosunly的博客
07-14 6万+
本文通过图文的形式详细介绍了GPT-4最强对手Claude2的使用方法，希望能对学习大语言模型的同学们有所帮助。 文章目录 1. Cluade vs GPT 1.1 背景 1.2 Claude2的特点介绍 1.3 Claude2和GPT-4的对比 2. Claude 2的使用方法 2.1 使用平台 2.2 被忽视的用法
灵活使用数组制作图片切换js实现
10-21
主要介绍了灵活使用数组制作图片切换效果，js实现图片切换特效，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
按照数组的形式排序+条件切换切换查询
03-11 1009
<br />    //TOP50<br />  public static function getTOP50 ($fromTime='',$endTime='',$type='warAllNum' ) {<br />   $fromTime = str_replace("-"
用数组实现图片切换
weixin_30679823的博客
06-24 250
由于要参加网站首页设计的竞赛，所以看了下网站上的图片切换的代码，找了其中一个较简单的模板，写了如下效果的代码。最后友情提示，要理解src的路径，这图片是我自己电脑中picture文件夹中的，你们只需要修改下就好了，不懂还可以留贴。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w...
调整数组顺序
BluthLeee的博客
09-27 547
题目描述 输入一个整数数组，实现一个函数来调整该数组中数字的顺序，使得所有的奇数位于数组的前半部分，所有的偶数位于数组的后半部分，并保证奇数和奇数，偶数和偶数之间的相对位置不变。 分析 归并排序法，使用链表或数组容器 代码 import java.util.ArrayList; public class Solution { public void reOrderArray(int [] ...
图片的随机排列
01-28
插件描述：产生随机数排列位置. 参考示例：http://www.jq22.com/jquery-info5765
C# 数组实例介绍(图文)
12-25
数组即是一组相同类型组合在一起，使用一个通用的名称，通过分配的下标访问的数据集合中的元素。 数组是具有相同类型的一组数据。当访问数组中的数据时，可以通过下标来指明。c#中数组元素可以为任何数据类型，数组...
模拟新浪微博图文混排切换效果
06-11
JavaScript部分，可以使用数组存储所有的图文块数据，然后在页面加载时初始化展示第一个图文块。当用户触发切换事件时，通过改变容器的显示状态（如display属性），来实现内容的切换。为了实现平滑的过渡，可以利用...
图文详解c/c++中的多级指针与多维数组
09-01
但如果我们想要定义一个指针`p`来指向整个数组，我们需要使用数组指针类型，即`char (*p)[3]`： ```c char (*p)[3] = &a; ``` 这表明`p`现在是一个指向包含3个char元素数组的指针，而不是单个char。 当我们进入二维...
[原理]图片随机变换代码
sdjncjc的专栏
06-09 873
Java 数组的反转
HarrisJayce的博客
11-28 298
数组的反转:数组中的元素颠倒顺序 例如: 原始数组为:1,2,3,4,5; 数组反转后:5,4,3,2,1; 思路:本质是考察交换两个变量的值,两种方式 实现反转,就需要将数组最远端的元素和最近端的元素位置互换 定义两个变量,保存数组的最小索引和数组的最大索引 让最小的索引变量++,最大的索引变零–,再次交换位置 最小的索引超过了最大索引,数组反转结束 什么时候停止交换 1.min = max 2.min>man 什么时候交换 min<max public static void main(St
调整数组元素顺序
风知我意否的博客
12-05 4562
输入一个整数数组，实现一个函数来调整该数组中数字的顺序，使得所有的奇数位于数组的前半部分，所有的偶数位于数组的后半部分，并保证奇数和奇数，偶数和偶数之间的相对位置不变。 第一种：用两个数组分别保存奇数和偶数，然后将其合并； 第二种：使用类似冒泡排序的扫描方法，如果数组中出先前偶后奇的情况就交换两元素的位置，否则不交换。下面是第二种的代码： public void reOrderArray(...
利用Math.random做背景图像随机切换【前端开发技能必备系列】
weixin_30512089的博客
06-24 243
你应该见过（尤其是在一个网站的登录页面，比如：人人小站）这样的效果：每次登录的页面背景都是不同的。这说明该页面很有可能启用了背景随机切换的效果。最初见到这种效果的呈现时，觉得比较炫，后来仔细想想，这个用javascript实现起来应该很简单。 先看一下我做的演示吧：http://www.threesnow.com/code/093/ 1. 首先要准备一些图像，图像的大小（无论是尺寸大小还是数据...
语言 全排列 函数_C语言如何编写将数组内容倒序排列的函数（C Primer plus 10-6）...
weixin_39965490的博客
12-24 592
程序内容： 编写一个函数，把double类型数组中的数据倒序排列，并用一个驱动程序测试函数。 程序为C Primer Plus第十章第六题的答案示例附：程序代码为本人亲自编写，并非书内标准答案，仅供参考。如果程序有任何bug或者有好的建议，可以在评论区留言，或者私信。程序源代码：#include<stdio.h> void reverse_order(double arr[],in...
数组的顺序对调
weixin_42581477的博客
07-12 1329
js图片随机排序和升序排序
datuzidppd5556的博客
08-16 1247
js图片随机排序和升序排序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...
虚拟机安装与使用图文教程
"虚拟机使用图文说明" 在IT领域，虚拟机是一种强大的工具，它允许用户在一台物理计算机上模拟运行多个独立的操作系统实例。这篇虚拟机使用图文说明主要涵盖了VMware_Workstation的安装和Fedora系统的开启过程，旨在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值